DJ Quilter

Front-End Developer

Doing Accessible Websites: Part 2

Your markup can be better. From an accessibility point of view.

The first thing that we should all be doing is using HTML5 elements. <main>, <nav>, <article> and <button> all provide a functional context for your website. Of course there are times when you might not to be able to use the markup that you want to, and in cases like that, you have ARIA.

What is ARIA?

ARIA (or WAI-ARIA, or Web Accessibility Initiative – Accessible Rich Internet Applications, or Accessible Rich Internet Applications — ufff, KISS, right?!) gives us a way of labelling elements which, for whatever reason, aren’t as semantic as we’d like them to be. There are three types of ARIA attribute, which are roles, properties and states.

The ARIA roles attribute has a number of predefined values, the most useful of which (in my opinion) are listed below:

  • navigation
  • main
  • search
  • article
  • button

You’ll find the role attribute written something like this:

<span role="button">Click Me</span>

Properties and states are different, in that their attribute name changes depending on their function. Expanding on the above example, we can see how they might be used in the wild:

<span role="button" aria-hidden="false">Click Me</span>

In this case, we’ve added the hidden state, which I’ve pointlessly set to false. But hey, maybe it gets hidden later!

Properties and states are very similar, to the extent that it takes a bit of thinking (and Googling) to work out whether you’re after a state or property. The difference should not be too hard to grasp though; a properties explains the characteristics of an element, while the state explains a current (and inherently changeable) condition of that element.

If you’re looking for a nice clean list of properties and states, the best that I can do is point you to the firehose that is the W3C website. If you’re looking for something a bit more easy to consume (but more in depth than I’ve been), I would point you at the WebAIM site.

Should I Add ARIA Attributes To Everything?

The short answer is no. If you have a element which already semantically describes a piece of content, you don’t need to use ARIA. ARIA is for use when you need a bit of a helping hand.