...
| Anchor | ||||
|---|---|---|---|---|
|
...
Make the form element mandatory to complete by applying the “required” attribute to the input tag.
By default, when a form element has been marked as required and receive keyboard focus, the screen reader will announce the form element as “required invalid”.
The form element should be announced as invalid only after it has lost keyboard focus.
Add the “aria-invalid=”false” attribute to the default state to prevent screen readers from announcing the form element as invalid.
When the form input field has keyboard focus:
the screen reader should announce/notify the user that it is a required field
the screen reader should NOT announce that it is an invalid entry, the form element should be announced as invalid after it has lost keyboard focus
Markup
| Code Block |
|---|
<label for="fname">First Name:</label> <input id="fname" required> required required aria-invalid="false"> |
...
You can make standalone/single checkboxes mandatory to complete by applying the “required” attribute to the input tag.
By default, when a form element has been marked as required and receive keyboard focus, the screen reader will announce the form element as “required invalid”.
The form element should be announced as invalid only after it has lost keyboard focus.
Add the “aria-invalid=”false” attribute to the default state to prevent screen readers from announcing the form element as invalid.
When the checkbox has keyboard focus:
the the screen reader should announce/notify the user that it is a required field
the screen reader should NOT announce that it is an invalid entry, the form element should be announced as invalid after it has lost keyboard focus
Markup
| Code Block |
|---|
<input id="agreement" type="checkbox" required aria-invalid="false"> <label for="agreement">All the information I have submitted in this application is true</label> |
...