...
Required Group of Checkboxes
The “aria-label” attribute can also be used for screen reader users.
...
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 an invisible required label, within the legend tag. that will be announced by the screen reader. A sighted user will not see this text.
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> |
CSS
| Code Block | ||
|---|---|---|
| ||
.required {
display: none;
} |
...