...
| Anchor | ||||
|---|---|---|---|---|
|
...
When the form input field has keyboard focus:
the screen reader should announce/notify the user that it is a required field
Markup
| Code Block |
|---|
<form novalidate> <label for="fname">First Name:</label> <input id="fname" required> </form> |
...
| Anchor | ||||
|---|---|---|---|---|
|
...
Markup
Use the “aria-required” attribute in combination with the “radiogroup role” in the fieldset tag.
...
Add an invisible required label, within the legend tag. that will be announced by the screen reader.
A sighted user will not see this text.
| Code Block |
|---|
<fieldset> <legend>Select your shipping option:<<span class="required">required</span></legend> <input id="overnight" type="radio" name="shipping" value="overnight"> <label for="overnight">Overnight</label><br> <input id="twoday" type="radio" name="shipping" value="twoday"> <label for="twoday">Two day</label><br> <input id="ground" type="radio" name="shipping" value="ground"> <label for="ground">Ground</label> </fieldset> |
...
| Anchor | ||||
|---|---|---|---|---|
|
...
When it comes to making a group of checkboxes required you cannot use the same technique that’s used to make a group of radio buttons required.
The required attributes on the fieldset will not work and there is no equivalent checkboxgroup role.
Basically, what you can do here is to add Add an invisible required label, within the legend tag. that will be announced by the screen reader.
A sighted user will not see this text.
...
You can make standalone/single checkboxes mandatory to complete by applying the “required” attribute to the input tag.
When the checkbox has keyboard focus:
the screen reader should announce/notify the user that it is a required field
Markup
| Code Block |
|---|
<form> <input id="agreement" type="checkbox" required aria-invalid="false"> <label for="agreement">All the information I have submitted in this application is true</label> </form> |
...