How to make maxlength attribute accessible?
accessibility, forms, html
Solution
When the limit is reached you can detect that with `JS` and then announce it to assistive technologies e.g. screen-readers by insert the following after the `<input/>`
<p class="visually-hidden" aria-live="assertive" role="alert">Limit reached. You can only use 20 characters in this field.</p>
Note: remember to remove it if/when within the limit again.
You can hide `.visually-hidden` off-screen with CSS.. or this information could actually be useful for everyone so you could omit the `.visually-hidden` class if it fits your design.
And to let screen-reader users know about the limit you could put `<span class=visually-hidden>Max 20 characters</span>` inside your `<label>` element. (and same goes here, perhaps all users could benefit from having that info visible..)
Problem
I have a form in a few input fields. For one of the input field I have a length validation, for which I have used `maxlength="20"`. The issue here is that the JAWS users don't come to know that the max length has been reached in the input field, as JAWS continues to keep on reading the key they press on their keyboard. Is there a way to make this accessible? Regards, Zeeshan