An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
A11y tips: bind form controls and messages
As we saw before, the ARIA attribute aria-describedby
can be used to establish a relationship between a form control and an element.
It is very important to establish this connection since, when a form control receives focus, screen readers enter the so-called form mode and from there only the control and its related elements are announced, for which there must be a good relationship established between them so that the user has all the necessary information at the time of filling it in.
This includes certain types of messages, such as hints about the format that the data must have (eg: passwords), links to other documents (eg: legal terms checkbox) or error messages of the data entered.
And what is the correct way to do it? Assigning the aria-describedby
attribute of the form control the value of the id
attribute of the message that we want to relate, as in this example:
<label for="password"> Password</label><input type="password" id="password" aria-describedby="password-desc" autocomplete="off"><p id="password-desc"> Password must be at least 8 characters long and contain a number.</p>
In case of having more than one related element, the aria-describedby
attribute admits more than one value, separated with a space:
<label for="password"> Password</label><input type="password" id="password" aria-describedby="password-desc password-error" autocomplete="off"><p id="password-desc"> Password must be at least 8 characters long and contain a number.</p><p id="password-error"> Your password does not comply with the required format</p>
Original Link: https://dev.to/carlosespada/a11y-tips-bind-form-controls-and-messages-2mb7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To