...
| Code Block |
|---|
<label for="fname">Family Name *:</label> <input type="text" name="familyname" id="fname" aria-required="true" required> |
Let Screen Reader Users Know When Radio Button Form Controls are Mandatory/Required to Complete
Add the aria-required attribute in combination with the radiogroup role in the fieldset tag.
This works with a group of radio buttons, but not with a group of checkboxes.
Example:
| Code Block |
|---|
<fieldset aria-required="true" role="radiogroup">
<legend class="field-required">
What will you be selling?
</legend>
<span class="flex-shrink-0">
<input id="eqobtmq-merchandise" value="merchandise" lang="en" type="radio" name="data[whatWillYouBeSelling][e26kiyb-eqobtmq]" class="input-radio position-relative d-block mr-2 mb-0" ref="input" aria-invalid="false">
</span>
<label for="eqobtmq-merchandise" class="d-flex flex-items-center fs-inherit my-2">
<span class="flex-auto">
Merchandise
</span>
</label>
<span class="flex-shrink-0">
<input id="eqobtmq-prepackagedFoodOrDrink" value="prepackagedFoodOrDrink" lang="en" type="radio" name="data[whatWillYouBeSelling][e26kiyb-eqobtmq]" class="input-radio position-relative d-block mr-2 mb-0" ref="input" aria-invalid="false">
</span>
<label for="eqobtmq-prepackagedFoodOrDrink" class="d-flex flex-items-center fs-inherit my-2">
<span class="flex-auto">
Prepackaged food or drink
</span>
</label>
<span class="flex-shrink-0">
<input id="eqobtmq-both" value="both" lang="en" type="radio" name="data[whatWillYouBeSelling][e26kiyb-eqobtmq]" class="input-radio position-relative d-block mr-2 mb-0" ref="input" aria-invalid="false">
</span>
<label for="eqobtmq-both" class="d-flex flex-items-center fs-inherit my-2">
<span class="flex-auto">
Both merchandise and prepackaged food or drink
</span>
</label>
</fieldset>
|
Let Screen Reader Users Know When a Group of Checkboxes are Mandatory/Required to Complete
Add an invisible required label that will be announced by the screen reader. A sighted user will not see this text.
Example:
| Code Block |
|---|
<legend class="field-required">
Type of addenda <span class="visuallyhidden">required</span>
</legend>
|
Accessible Autocomplete Forms
...