ARIA properties and ARIA states

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

ARIA properties and ARIA states

Aria-properties and aria-states are both attributes. The main difference between them are:

  1. aria-properties are unlikely to change
  2. aria-states are likely to change

In practice, we don’t really differentiate between properties or states. We simply see them as attributes.

Examples of ARIA attributes you’ve seen are:

  1. aria-label
  2. aria-labelledby
  3. aria-describedby
  4. aria-hidden

You can find the list of properties and states in the specs. There are 48 properties and states grouped into 5 categories.

  1. Global attributes
  2. Widget attributes
  3. Live region attributes
  4. Drag and drop attributes
  5. Relationship attributes

We won’t go through the list of attributes one by one because you’ll get overwhelmed. We will go through the attributes you need to know right before you use them to build components.

ARIA support across screen readers

ARIA attributes mentioned in the W3C Spec are not fully supported across screen readers. You should check for support before implementing them.

The best resources I could find to check for support are:

  1. Aria Support for JAWS: An ARIA support list for JAWS, maintained by accessibility experts.
  2. A11y Support: A community-driven ARIA Supports list for all screen readers.