A beginners guide to ARIA
Help to get yourself some quick semantic wins with 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
roleattribute 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;
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-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
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-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!