Grouped form fields

Introduction to screen‐readers: Voiceover MacOS Edition

The information here applies to any set of inputs wrapped by a fieldset, such as radios, checkboxes or date components.

A fieldset is what is known as a grouping element and is announced to Voiceover to tell the user the inputs inside are related.

It is important that the group is given an accessible name. This function is performed by the legend and is normally the question the group refers to. You'll hear this read out when you reach the group with Voiceover.

Activity

Move to the radio group below. You will hear the group name announced (derived from the `legend`), then you will hear the `legend` itself followed by the options as you move through the component.

Remember you can move through the radio inputs quickly by using the form element shortcut VO + Cmd + J.

You can select a radio or checkbox by pressing VO + space when you are on the item.

When you select a radio or checkbox, or move to a selected input, you will hear Voiceover announce “selected”.

Where do you live?

Legends and the Rotor

You can see the group (with the legend as its name) above the group's inputs in the Rotor VO + U.

Rotor showing the group named with the legend above the fields

Key takeaway:

When testing, check each group with a fieldset has a legend with appropriate copy inside it.

Next, hints and errors