## Why is this an issue?

ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide additional semantics to help assistive technologies, like screen readers, interpret the element.

Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".

This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA property `aria-required` is not supported by the role `link`. Therefore, using `aria-required` on an anchor tag would violate this rule.

    <div role="checkbox" aria-chekd="true">Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}

## How to fix it

Check the spelling of the aria-* attributes and verify that they are actually supported by the element role. Remove non-compatible attributes or replace them with the correct ones.

    <div role="checkbox" aria-checked="true">Unchecked</div>

## Resources

### Documentation

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

### Standards

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