SiteLint documentation and guidelines

Unsupported role on element

Description

This rule checks for the use of unsupported ARIA roles on HTML elements. ARIA (Accessible Rich Internet Applications) roles define how an element should be interpreted by assistive technologies like screen readers. Using unsupported or incorrect roles can lead to confusion and misinterpretation, making web content less accessible.

Disabilities Impacted

  • Visual Impairments: Users with visual impairments rely on screen readers to navigate web content. Unsupported roles can cause screen readers to misinterpret elements, leading to a confusing or incomplete understanding of the page.
  • Cognitive Disabilities: Users with cognitive disabilities may rely on consistent and predictable interactions. Unsupported roles can disrupt this consistency, making it harder for them to understand and interact with the content.
  • Motor Impairments: Users with motor impairments may use assistive technologies that depend on correct ARIA roles to provide alternative navigation methods. Incorrect roles can hinder these technologies from functioning properly.

Why It Matters

Correct use of ARIA roles is essential for creating accessible web content. ARIA roles help define the structure and behavior of web elements for assistive technologies. Unsupported roles can break the accessibility features of a website, making it difficult for users with disabilities to navigate and understand the content. Ensuring the correct use of ARIA roles helps create a more inclusive and accessible web experience.

Coding Problems and Solutions

Common Coding Problems

  • Using Unsupported Roles: Assigning ARIA roles that are not recognized or supported on certain HTML elements.
  • Role Misuse: Applying roles inappropriately, such as using a role intended for one type of element on a different type of element.
  • Redundant Roles: Adding ARIA roles that duplicate the native semantics of an element, which can confuse assistive technologies.

How to Fix It

Validate ARIA Roles

Ensure that the ARIA roles you use are supported and appropriate for the element in question.

Incorrect example
<div role="button">Click me</div>
<!-- Use <button> instead of <div> for buttons -->
Correct example
<button type="button">Click me</button>

Refer to ARIA Specifications

Consult the ARIA specifications to understand which roles are supported on which elements and use them appropriately.

ARIA in HTML

Avoid Redundant Roles

Do not add ARIA roles that duplicate the native semantics of an element.

Incorrect example
<nav role="navigation">Navigation content</nav> <!-- 'role="navigation"' is redundant -->
Correct example
<nav aria-label="Main">Navigation content</nav>

Known Limitations

  • Complex Custom Components: Custom interactive components might need ARIA roles to convey their purpose to assistive technologies. Ensure these roles are appropriate and supported.
  • Browser and Screen Reader Variability: Different browsers and screen readers may support ARIA roles differently. Testing across multiple platforms is crucial.
  • Dynamic Content: For dynamically changing content, ensure that ARIA roles remain appropriate and are updated as needed.

Resources