SiteLint documentation and guidelines

Unsupported role attribute used

Description

The Unsupported role attribute used accessibility issue occurs when an HTML element has a role attribute that is not recognized by assistive technologies (AT) like screen readers. The roleattribute is part of ARIA (Accessible Rich Internet Applications), which provides a way to make dynamic content and interactive elements accessible to users with disabilities.

When an unsupported role is used, assistive technologies may not be able to interpret the element’s purpose or provide appropriate feedback to users, potentially leading to confusion or difficulty navigating the page.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers may encounter difficulties when encountering elements with unsupported roles:

    • Screen readers may not be able to provide accurate information about the element’s purpose or functionality.
    • Users may struggle to understand the structure and organization of the page.

  • Cognitive disabilities: individuals with cognitive disabilities might face challenges due to inconsistent or unexpected behavior:

    • Unpredictable interactions can cause frustration and confusion.
    • Users may find it difficult to understand the purpose of certain elements or navigate the page efficiently.

  • Motor impairments: while motor impairments are less directly impacted, users who rely on keyboard navigation or specialized input devices may experience difficulties:

    • Elements with unsupported roles might not receive focus or behave as expected during keyboard navigation.
    • Users may encounter unexpected behavior when interacting with elements using assistive technologies.

Why it matters

Ensuring that only supported roles are used is crucial for maintaining accessibility:

  • It ensures that assistive technologies can accurately interpret and communicate the structure and functionality of web pages.
  • Proper role usage helps create a consistent and predictable user experience for people with disabilities.
  • Using supported roles contributes to meeting WCAG guidelines.

Coding problems and solutions

Common coding problems

Incorrect usage

Incorrect usage
<div role="customRole">Custom Element</div>

Using a deprecated role

Using a deprecated role
<button type="button" role="buttonmenu">Menu Button</button>

Using a role that doesn’t exist

Using a role that doesn’t exist
<nav role="navigationbar">Main Navigation</nav>

How to Fix It

To resolve these issues, follow these best practices:

  1. Only use roles defined in the ARIA specification.
  2. Choose the most appropriate role for each element based on its purpose and functionality.
  3. Avoid inventing custom roles unless absolutely necessary and well-documented.
  4. Keep your knowledge of ARIA roles up-to-date, as some roles may become deprecated over time.

Corrected examples

Correct usage
<div role="button">Custom Button</div>
Using a non-deprecated role
<button type="button" role="menuitem">Menu Item</button>
Using a role that does exist
<nav role="navigation">Main Navigation</nav>
<!-- The nav element already implies a navigation role, so adding role="navigation" is redundant and unnecessary. This is just for the historical and example reason as some screen reader weren't supporting nav element. -->

Known Limitations

While using supported roles is crucial, there are some limitations to consider:

  • New roles may be introduced in future ARIA specifications, which might not be immediately recognized by older assistive technologies.
  • Complex images with multiple functions may require additional accessibility measures beyond simple alt text.
  • Some roles might be supported by certain browsers or screen readers but not others, potentially leading to inconsistent experiences across different platforms.

Resources

Standard

  • Standard: WCAG
  • Rule ID: unsupported-role-on-element