SIA-R60Groups have an accessible name

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that grouping elements for form controls have an accessible name.

Applicability

This rule applies to every element in the HTML namespace with a semantic role of group or inheriting from group, that has two or more descendants in the flat tree which:

• are included in the accessibility tree; and
• have one of the following semantic roles: checkbox, combobox, listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox; and
• whose closest ancestor in the flat tree with a semantic role of group or inheriting from group is this group element.

Expectations

1. The test target has an accessible name that is not empty.

Assumptions

This rule makes the following assumption:

• group elements around form controls are used to group semantically related controls.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This form is used to input a US social security number, with one field per group of digits. The individual fields are grouped together and a global name is provided for the group:

<div role="group" aria-labelledby="ssn">
    <span id="ssn">Social Security Number</span>
    <input size="3" type="text" aria-required="true" title="First 3 digits" />
    <input size="2" type="text" aria-required="true" title="Next 2 digits" />
    <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

This multiple choice question is using Radio Buttons for the various answers. They are grouped together and an accessible name is provided:

<div role="radiogroup" aria-labelledby="question-label">
    <div id="question-label">
        On a scale from 1 to 5, how much do you like WCAG?
    </div>
    <p>
        <label><input type="radio" name="answer" value="1" /> 1</label>
    </p>
    <p>
        <label><input type="radio" name="answer" value="2" /> 2</label>
    </p>
    <p>
        <label><input type="radio" name="answer" value="3" /> 3</label>
    </p>
    <p>
        <label><input type="radio" name="answer" value="4" /> 4</label>
    </p>
    <p>
        <label><input type="radio" name="answer" value="5" /> 5</label>
    </p>
</div>

This form is used to input a US social security number. A table is used for formatting. The <tr> element has an implicit semantic role of row which inherits from group and indicates semantic grouping of the input fields in each cell. It has an accessible name.

<table>
    <tr aria-labelledby="ssn">
        <th id="ssn">Social Security Number</th>
        <td>
            <input
                size="3"
                type="text"
                aria-required="true"
                title="First 3 digits"
            />
        </td>
        <td>
            <input
                size="2"
                type="text"
                aria-required="true"
                title="Next 2 digits"
            />
        </td>
        <td>
            <input
                size="4"
                type="text"
                aria-required="true"
                title="Last 4 digits"
            />
        </td>
    </tr>
</table>

The outermost <div> element, with a semantic role of group, is not applicable because the form controls are within nested grouping elements. Both <div> elements with a semantic role of radiogroup have an accessible name.

<div role="group">
    <div role="radiogroup" aria-labelledby="question1-label">
        <div id="question1-label">
            On a scale from 1 to 5, how much do you like WCAG?
        </div>
        <p>
            <label><input type="radio" name="answer" value="1" /> 1</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="2" /> 2</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="3" /> 3</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="4" /> 4</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="5" /> 5</label>
        </p>
    </div>
    <div role="radiogroup" aria-labelledby="question2-label">
        <div id="question2-label">How compliant to WCAG is your website?</div>
        <p>
            <label><input type="radio" name="answer" value="A" /> A</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="AA" /> AA</label>
        </p>
        <p>
            <label><input type="radio" name="answer" value="AAA" /> AAA</label>
        </p>
    </div>
</div>

Failed

This grouping element does not have an accessible name.

<div role="group">
    <span id="ssn">Social Security Number</span>
    <input size="3" type="text" aria-required="true" title="First 3 digits" />
    <input size="2" type="text" aria-required="true" title="Next 2 digits" />
    <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

Inapplicable

This grouping element does not have any nested form controls:

<div role="group" aria-labelledby="ssn1">
    <span id="ssn1">Social Security#</span>
</div>

This grouping element has only one descendant which is included in the accessibility tree and has one of the required semantic roles:

<div role="group" aria-labelledby="ssn">
    <span id="ssn">Social Security Number</span>
    <input size="3" type="text" title="First 3 digits" />
    <input size="2" type="text" aria-hidden="true" title="Next 2 digits" />
    <input size="4" type="text" aria-hidden="true" title="Last 4 digits" />
</div>