Radio Buttons Using Fieldset/Legend

Problem: Radio buttons can be difficult to interpret for assistive technology users if not coded correctly.

Solution: Use fieldset/legend with correct coding.

Radio Button Examples Using Fieldset/Legend

Example 1: A Simple Yes/No Question about Holiday Pay

Example 2: A Simple Yes/No Question: Do you have any leased or owned vehicles for your business to report?

Notes

1. Using fieldset/legend elements to group related elements is the recommended coding technique for maximum accessibility.
2. Putting aria-required="true" as an attribute inside the fieldset will announce that the values are required when a screen reader reads the legend.
3. The asterisk, which indicates a required field, should be hidden to a screen reader. This can be done by enclosing it in a span element with a class of aria-hidden=true. For example: <span aria-hidden="true">*<span aria-hidden="true">. This prevents unneccessary information from being read by a screen reader.
4. The required attribute will not be read in PC cursor mode when foucs lands on the first radio button. If the user is in forms mode, or changes to forms mode, the label or title of the attribute will be announced as required.
5. The name attribute of the grouped radio buttons must be the same: ex. name="BenefitsPT".

Code Snippet

Example 3: A More Complex Scenario, Yes/No Question with Full and Part Time options

Notes

1. This scenario is more complex than example 1 due to the addition of the full or part time answers. This makes the interpretation by a screen reader more complex. In this scenario, the full or part time designators are added in the title attribute which gives the screen reader the extra information needed to distinguish between full time and part time responses.
2. This scenario uses two side by side panels displayed in a single row. This layout was used to meet the desing requirements.

JAWS Auto Forms Mode behavior for radio buttons is a little different from its behavior with other types of controls. This is because unlike other controls, it is possible to interact with radio buttons in both Forms Mode and with the Virtual Cursor. When navigating with the TAB key, JAWS will stay in Forms Mode if it is already on, but it will not enter Forms Mode if it is off. Users can press SPACEBAR to choose a specific radio button when using the Virtual Cursor, and pressing the ARROW keys will not change the value of the radio button group. Users can also press ENTER to activate Forms Mode, and subsequent presses of the UP and DOWN ARROW keys will change the value of the radio button group.

Code Snippet Fieldset/Legend for Full Time

Code Snippet Fieldset/Legend for Part Time

Example 5: A Gender Radio button selection

This example demonstrates a radio button group for gender nested inside a table. The grouping makes use of the fieldset/legend elements to meet WCAG guidelines and ensure usability to screen readers.

Code Snippet Gender radio group using Fieldset/Legend nested inside a table

Example 6: Using Fieldset and Legend to designate a group of related input controls.

This example demonstrates how to designate a group of input number controls as required.

Code Snippet for using Fieldset and Legend to designate a group of related input controls.