How to make maxlength attribute available?

Question

I have a form in several input fields. For one of the input fields, I have a length check for which I used maxlength="20".

The problem here is that JAWS users are not aware that the maximum length has been reached in the input field, as JAWS continues to read the key that they press on the keyboard.

Is there any way to make this available?

Regards, Zeeshan

Answer 1

Three approaches that are not mutually exclusive:

• Include instructions on the maximum number of characters before an element.
• Implementing character checking at startup using JavaScript.
• , JavaScript, .

1 , , , . 3 , 2, : , .

@Quentin, , JAWS. maxlength input HTML, , HTML 2.0 (1995), , . , JAWS , , , .

Answer 2

, mws-stat -

<input type="text" class='mw' maxlength='20'/>

var a=$('.mw').attr('maxlength');
console.log(a);

$('.mw').keyup(function(){
console.log($(this).val().length);
});

Answer 3

title . , JAWS. , NVDA title . , JavaScript, "ding", , .

Answer 4

, JS, , . , <input/>

<p class="visually-hidden" aria-live="assertive" role="alert">Limit reached. You can only use 20 characters in this field.</p>

: , / .

.visually-hidden CSS.. , .visually-hidden, .

- , <span class=visually-hidden > Max 20 characters inside your `. ( , , , .)

Answer 5

-

<script>
  function show(){

var x=document.getElementById("text1").value;
var y=x.length;
document.getElementById("p1").innerHTML="Characters left" +(20-y);

                 }  
</script>

<input type="text" id="text1" maxlength="20" onkeydown="show()">
<p id="p1"></p>

http://jsfiddle.net/EVrqP/1/