Go to search page
A11ying with Sanna - I would if I could a guide to web accessibility

What is WAI-ARIA?

WAI-ARIA refers to the Web Accessibility Initiative - Accessible Rich Internet Applications. It is a technical specification written by the World Wide Web Consortium (W3C). WAI-ARIA is often called ARIA for short. ARIA enabled accessible landmark navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and much more. But many of these were later incorporated into HTML5.

You should always use the correct semantic HTML element instead of using ARIA. One reason for this is that the native elements already have built-in keyboard accessibility, roles, and states. A good example of this is a <button> element. A button can be accessed with a keyboard. Often I've seen people use <div> elements instead of buttons. Divs cannot be accessed with a keyboard by default so if you use the element like this, you will need to create the keyboard functionality for the element yourself.

ARIA is a great thing, but always remember to be careful when implementing it. In the worst scenario, you might completely ruin the user experience of your non-visual users and make the site inaccessible. Even the specification says that no ARIA is better than bad ARIA.

Rules of ARIA

The ARIA specification defines five rules of ARIA use:

  1. If you can use a native HTML element or attribute with the semantics and behavior you require already built in, then do so.
  2. Do not change native semantics, unless you really have to.
  3. All interactive ARIA controls must be usable with the keyboard.
  4. Do not use role="presentation" or aria-hidden="true" on a focusable element.
  5. All interactive elements must have an accessible name.

Check out Using ARIA page on w3.org for more on these rules

ARIA components

There are three main components of ARIA. They are roles, properties, and states. Roles are used to define a type of user interface (UI) element. Properties and states can be applied to elements and are used together to support ARIA roles existing on a page. States can change on their own or with user interaction, usually with JavaScript. Properties rarely change once they’re set.

Source material