...
| Code Block |
|---|
<label for="fname">First Name:</label> <input id="fname" required> |
...
| Anchor | ||||
|---|---|---|---|---|
|
...
When the legend is announced by the screen reader:
it should notify the user that it is a required form element
Markup
Add an invisible required label, within the legend tag. that will be announced by the screen reader.
...
| 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> |
CSS
| Code Block | ||
|---|---|---|
| ||
.required {
display: none;
} |
...
| Anchor | ||||
|---|---|---|---|---|
|
...
A sighted user will not see this text.
When the legend is announced by the screen reader:
it should notify the user that it is a required form element
Markup
| Code Block |
|---|
<fieldset> <legend>I enjoy the following activities:<span class="required">required</span></legend> <input id="hiking" type="checkbox" name="toppings" value="hiking"> <label for="hiking">Hiking</label><br> <input id="biking" type="checkbox" name="toppings" value="biking"> <label for="biking">Biking</label><br> <input id="running" type="checkbox" name="toppings" value="running"> <label for="running">Running</label><br> <input id="dancing" type="checkbox" name="toppings" value="dancing"> <label for="dancing">Dancing</label> </fieldset> |
...
| Code Block | ||
|---|---|---|
| ||
.required {
display: none;
} |
...
| Anchor | ||||
|---|---|---|---|---|
|
...
| 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> |