Form Group: Section with role="group" or "radiogroup" does not have a label

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

People who are blind cannot use the visual layout of a group of related form elements and their shared group label - such as a question with a set of radio button answers - to determine the relationship between the form fields and the group label. In order to understand the relationship of the form fields, their individual labels, and their group label, the relationships must be expressed semantically. When grouped form elements and their group label are expressed semantically, a screen reader user can put focus on a form element and the screen reader will read the form element label and element type as well as the group label.

Grouping controls is most important for related radio buttons and checkboxes.

How to Fix

Fix this issue by doing ALL of the following:

1. Place the related form fields within a container, such as a <div>.
2. Add the role="group" attribute to the container.
3. Add the aria-labelledby attribute to the same container. The aria-labelledby attribute references the id attribute value of the visible text that serves as the label for the group.

<div role="group" aria-labelledby="contact-label"> <p id="contact-label">Contact Information</p> <p><label for="name">Name: </label> <input type="text" id="name"></p> <p><label for="phone">Phone: </label> <input type="text" id="phone"></p> <p><label for="email">Email: </label> <input type="text" id="email"></p>E27 <p><label for="address">Address: </label> <input type="text" id="address"></p> <p><label for="city">City: </label> <input type="text" id="city"></p> <p><label for="state">State: </label> <input type="text" id="state"></p> <p><label for="zip">Zip: </label> <input type="text" id="zip"></p> </div>