ARIA MADE EASY

GOLDEN RULES OF ARIA:

Bottom Line: Because ARIA is used to send information to assistive devices like a screen reader, misrepresenting this information with bad ARIA coding practices can have harmful side effects to non-visual users that rely on this information to navigate pages. So, it is best to learn what ARIA is and its rules before you attempt to use it.

WAI-ARIA 1.1 ARIA in HTML

The 4 W’s of ARIA

This training is NOT designed to provide a lot of code examples because there are many websites that are better designed for showing code (See buttons above or list of resources).  However, this training is designed to show the what, when, where, and why of using ARIA. Before you start using ARIA, you need to know:

  1. WHAT it is and WHAT problems does it solve
  2. WHERE can you use it
  3. WHY should you use it
  4. WHEN to use it and WHEN not to use it

Semantics

When it comes to making a page accessible, it is all about the STRUCTURE of page elements. When it comes to ARIA, it is all about the SEMANTICS of those page elements as well as its structure. So, what is semantics?

DEFINITION: As it relates to ARIA, semantic is the MEANING of an HTML object (e.g., an element that is representative of an object with a descriptive name like a button) and understood by a human as such. Just by knowing the name, you can ascertain certain characteristics of an object. In the case of a button, you expect that it should:

  • has a button label (name)
  • can be clicked
  • do something when clicked
  • have focus when tabbed to

Most HTML elements (e.g., button, video, audio, menu, article) have semantic meanings;  however, there are some non-semantics elements (e.g., div, span) that do not convey semantics information. Moreover, when an author creates a new component (e.g., widget), it may not convey semantics information as well.

For content to be accessible, it must convey semantics information about its structure and behavior to assistive technology (AT) devices. ARIA is used to communicate this semantics information when native HTML is not enough.

Rules and Exceptions

There are five main ruless (and a few exceptions) to using ARIA:

Rule #1: Use a native HTML element or attribute
Rule #2: Do not change the native element semantics
Rule #3: ARIA controls must be keyboard accessible
Rule #4: Do not use role=”presentation” OR
aria-hidden=”true” on focusable element
Rule #5: All ARIA elements must have an accessible name

ARIA Examples

  • Label
    • aria-label
  • Relationships
    • aria-labelledby
    • aria-owns
    • aria-activedescendant
    • aria-describedby
    • aria-posinset
    • aria-setsize
  • Hiding Content
    • aria-hidden
  • Updating Content
    • aria-live
      • polite
      • assertive
      • off
    • aria-atomic
    • aria-relevant
    • aria-busy (are you busy)

Resources

ARIA Resources:

W3C Resources:

Other Resources:

Accessibility Tools: