## Why is this an issue?

ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes provide additional information about an element’s role, state, properties, and values to assistive technologies like screen readers.

This rule checks that when using the `role` property in DOM elements, its value is a valid non-abstract ARIA role.

## How to fix it

Check that each element with a defined ARIA role has a valid non-abstract value.

    <div role="meth" aria-label="a^{2} + b^{2} = c^{2}">
      a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    </div>

To fix the code use a valid value for the ARIA role attribute.

    <div role="math" aria-label="a^{2} + b^{2} = c^{2}">
      a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    </div>

## Resources

### Documentation

- MDN web docs - Using ARIA: Roles, states, and properties
- MDN web docs - ARIA roles (Reference)

### Standards

- W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2