Radio Button Test

To be accessible, radio buttons must be associated with both a group label (i.e., "question") and a label (i.e., "answer"). This is done by grouping the related radio buttons in a fieldset or other element with role="radiogroup". In a fieldset, a legend provides the group label; with other elements, an aria-labelledby attribute points to the element serving as the group label.

Example 1: Fieldset & Legend

This example uses a fieldset element to group the radio buttons with a legend element as the group label. CSS can be used to hide the default fieldset border.

Does this example use html fieldset and legend elements?

Example 2: ARIA Radio Group

This example uses a div role="radiogroup" to group the radio buttons with aria-labelledby pointing to a span with the group label.

Does this example use role radiogroup and aria-labelledby?

Example 3: ARIA Group

This example uses a div role="group" to group the radio buttons with aria-labelledby pointing to a span with the group label.

Does this example use role group and aria-labelledby?

More Information