SiteLint documentation and guidelines

Aria attribute conflict

Description

ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and applications by providing additional semantic information to assistive technologies. However, conflicts can arise when multiple ARIA attributes are used on the same element in ways that create contradictory or confusing information. ARIA attribute conflicts can hinder the usability and accessibility of web content for users relying on assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers may receive conflicting or confusing information due to ARIA attribute conflicts.
  • Cognitive disabilities: users with cognitive disabilities may struggle to understand the content if ARIA attribute conflicts lead to unclear or contradictory instructions.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices may experience issues if ARIA attribute conflicts affect the behavior of interactive elements.

Why it matters

Ensuring that ARIA attributes are used correctly and without conflicts is essential for maintaining a logical and accessible user experience. ARIA attribute conflicts can lead to confusion and make it difficult for users to understand and interact with the content. Properly managing ARIA attributes enhances the accessibility and usability of web content, providing a better experience for all users.

Coding problems and solutions

Common coding problems

  • Conflicting ARIA roles: assigning multiple conflicting ARIA roles to the same element.
  • Conflicting ARIA properties: using ARIA properties that provide contradictory information on the same element.
  • Incorrect ARIA attribute usage: applying ARIA attributes in ways that do not align with their intended use or combining them inappropriately.

How to fix it

Avoid conflicting ARIA roles

Ensure that each element has a single, appropriate ARIA role that matches its function.

Incorrect example
<button role="button" role="link">Submit</button>
Correct example
<button role="button">Submit</button>

Ensure consistent ARIA properties

Use ARIA properties that provide consistent and complementary information.

Incorrect example
<div role="tabpanel" aria-expanded="true" aria-hidden="true">Content</div>
Correct example
<div role="tabpanel" aria-expanded="true">Content</div>

Use ARIA attributes appropriately

Apply ARIA attributes according to their intended use and avoid combining them in ways that create confusion.

Incorrect example
<button aria-pressed="true" aria-selected="true">Toggle</button>
Correct example
<button aria-pressed="true">Toggle</button>

Test for conflicts

Regularly test your content using assistive technologies to identify and resolve ARIA attribute conflicts.

Incorrect example
<nav aria-label="Main navigation" aria-labelledby="footer">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>
Correct example
<nav aria-label="Main navigation">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

Known limitations

  • Complex components: managing ARIA attributes for complex components can be challenging and requires careful planning and testing.
  • Dynamic content: ensure that dynamically generated content does not introduce ARIA attribute conflicts.
  • Testing across devices: test your content across different devices and assistive technologies to ensure consistency and identify any ARIA attribute conflicts.

Resources