A beginners guide to ARIA

I recently talked about some quick semantic wins and mentioned a small handful of ARIA roles you could add by default just to get the ball rolling. I wanted to expand on that point some, and while this post isn’t meant to be an all encompassing resource for all things ARIA it should help you on the path to understanding it a bit more.

What is ARIA

I really like Mozilla’s definition of what ARIA is

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider).
Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar.

The gist is that we aren’t talking about marking up a blog post – that can be handled by things like Schema.org.

ARIA’s main goal is to make internet applications more accessible, so things like Twitter. With these type of websites elements are expanding/contracting, coming in and out of focus and disappearing or being created on the fly constantly. These interactions create some unique challenges for people who rely on assistive technologies.  

What does ARIA look like

ARIA looks like a set of attributes you add to already existing elements on the page, for example here we see the role attribute being used;

<form role="search">
  <input type="text" name="search_field" />
</form>

Is it just defining roles?

Defining roles is a massive part of the idea behind ARIA but it certainly isn’t the only thing they are good for. In the following example we will see an element that can sometimes be hidden being used;

<li aria-hidden="true">Hidden</li>

When we decide to show this <li> we would change the aria-hidden attribute to true, this is way more semantic that using a class .hide because that class could be doing anything under the hood.

ARIA states

The aria-hidden attribute is known as a state. States describe what the status is of a given element, you can imagine as state to be the answer an element would answer to a question, for example “Hey input field, are you good for me to let the user continue on with this form?”, “No – I am invalid”.

There are some element specific states, but here are the global ARIA states

• aria-busy
• aria-disabled
• aria-grabbed
• aria-hidden
• aria-invalid

ARIA properties

As well as these states we have what are known as ARIA properties. A property is some meta data associated with an element.

There are some element specific properties, but to keep things simple here are the global ARIA properties

• aria-atomic
• aria-controls
• aria-describedby
• aria-dropeffect
• aria-flowto
• aria-haspopup
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant

aria-controls, for example describes the elements whose very presence or at the very least their contents are controlled by the element you are marking up.

You can see how this could quickly start to add some really detailed information into your application.

Hopefully this has helped

This was only designed to be a very quick introductory guide to what ARIA is, hopefully I have helped ease you in and you now know enough to be dangerous!