SiteLint documentation and guidelines

Group elements name attribute

Description

The name attribute in HTML is essential for grouping form elements, particularly radio buttons and checkboxes, into logical sets. This attribute allows users and assistive technologies to understand that these elements are part of the same group, ensuring correct behavior and accessibility. Properly using the name attribute helps create an accessible and user-friendly form experience.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need grouped elements to be properly identified, so the screen reader can convey the relationship between the elements accurately.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear grouping of form elements, making it easier to understand and interact with the form.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices can interact more efficiently with grouped form elements.

Why it matters

Using the name attribute to group related form elements ensures that these elements are treated as a single logical set. This is especially crucial for radio buttons, where only one option can be selected within the group. Proper grouping improves form accessibility and usability, ensuring that all users can interact with the form effectively and understand the relationships between the elements.

Coding problems and solutions

Common coding problems

  • Missing name attribute: form elements that should be grouped do not have a name attribute, leading to confusion and incorrect behavior.
  • Inconsistent name attribute: related form elements have different name attributes, preventing them from being recognized as a group.
  • Incorrect use of name attribute: using the name attribute incorrectly, such as applying it to elements that should not be grouped.

How to fix it

Add name attribute to grouped elements

Ensure that related form elements have the same name attribute to group them correctly.

Correct example
<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>
Incorrect example
<label>
    <input type="radio" name="gender-male" value="male"> Male
</label>
<label>
    <input type="radio" name="gender-female" value="female"> Female
</label>

Use the same name attribute for all elements within the same group.

Correct example
<label>
    <input type="checkbox" name="interests" value="sports"> Sports
</label>
<label>
    <input type="checkbox" name="interests" value="music"> Music
</label>
Incorrect example
<label>
    <input type="checkbox" name="interest-sports" value="sports"> Sports
</label>
<label>
    <input type="checkbox" name="interest-music" value="music"> Music
</label>

Use the name attribute appropriately

Apply the name attribute correctly to elements that should be grouped and avoid using it on unrelated elements.

Correct example
<label>
    <input type="radio" name="age-group" value="18-25"> 18-25
</label>
<label>
    <input type="radio" name="age-group" value="26-35"> 26-35
</label>
Incorrect example
<label>
    <input type="text" name="age-group" value="18-25"> 18-25
</label>
<label>
    <input type="text" name="age-group" value="26-35"> 26-35
</label>

Known limitations

  • Complex forms: for complex forms with multiple groups of related elements, ensure that each group is correctly identified and tested for accessibility.
  • Dynamic content: when adding dynamic form elements, ensure that the name attribute is properly applied to maintain grouping.
  • Testing across devices: test forms across different devices and assistive technologies to ensure that grouped elements are correctly recognized and handled.

Resources