Here’s a funny story. If you’re like me and incredibly pedantic about your code, and new things like accessibility get you overzealous, you may be able to relate to this story.

Accessibility is still something front-end developers fight for. Was it really that hard to come up with some descriptive alt text? That feature has been around since HTML2. It’s been almost twenty years. The original spec states the following as the description of the use of alt:

text to use in place of the referenced image resource, for example due to processing constraints or user preference.

Due to processing constraints or user preference. Regardless of the image not loading (‘processing constraints’), a visually impaired user does not have a preference either. By default, they simply have trouble viewing the image the way a person without a visual impairment would. Although the spec says nothing about the term accessibility, it suggests that yes, the image may not load as required, and yes, the user can turn image loading off. In fact, I remember doing the latter in my dial-up internet days.

We need to provide users with an alternative. Although we may not be doing all of these yet, providing fallbacks, using an alternate stylesheet for older browsers, and allowing text to be resized are just a few of the things that have been flagged as important. If not for accessibility, then certainly for another purpose that makes the end user’s life easier, or still gives them a satisfactory experience.

The fact that one of these alternatives, our friend alt, has been around for decades, suggests that we should be paying more attention to how we can make things better for the user, even if they have some kind of disability.

It’s better to be overzealous than not at all, though, and related to that, here’s my funny story.

ARIA roles

If you haven’t yet educated yourself on these small pieces of markup then I suggest you do so – I remember being very keen about it about three years ago and the concept is still unfamiliar to people. For newbies, it basically constitutes adding a role="x" attribute to your HTML, where x is a relevant ARIA role.

The reason I love ARIA roles is that, like semantic HTML5 elements, they make sense to us.

A couple of examples of the role attribute include role="navigation" for a collection of navigational elements, role="heading" for the heading of a section of the page, and role="button" button for an input that allows a user-triggered action to occur on click.

There are a handful of definitions for other similarly semantic ARIA roles which can suggest their use.

Can I have multiple ARIA roles?

No. The spec gives the following description for role:

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

An HTML element can’t have two roles. All roles are semantic in some way or another, and realistically speaking, one element cannot be two types of an object at once. Can you have something that is both a button and a heading? Not… really. If you did, then I would question your motives. (For the record, button does not mean a link or an anchor tag.)

ARIA roles in conjunction with HTML5 elements

Here is a piece of HTML with semantic elements.

<article>
  <h1>A review of ‘Like Soda’ by Violent Soho</h1>
  <p>This new track by Brisbane grunge rock group Violent Soho is probably not everyone’s cup of tea, but if you’re looking for some local Australian music, give this a try.</p>
</article>

If you’re like me you’re inclined to put <h1 role="heading">. If you have read the definitions I linked to earlier, you’re probably having a lot of fun writing <nav role="navigation"> and <button role="button"> in your HTML too.

Unfortunately, this isn’t exactly wrong, but it’s redundant. We’ve got semantic HTML. No one said anything about polluting HTML with way too many accessibility-related things, but the above examples are redundant and should not be used. This table is a great reference to cross-check between HTML elements and ARIA roles.

Conclusion

Try to be semantic wherever possible and choose the best role for your element, if a semantic HTML5 tag doesn’t take care of it already. If in doubt, leave it out.

That alt text is important, so use it. Paint a picture for a blind user, give a written preview for the poor person with the slow internet connection, and take pride in your markup.

Further Reading

Apart from the links in this article, here are some other guides/articles that I would recommend, and a couple of publicly answered questions about ARIA roles.

• ARIA in HTML
• Notes on Using ARIA in HTML
• Multiple aria role “navigation” and “complementary”?
• HTML5 and multiple ARIA roles
• Periodic Table of ARIA 1.0 Attributes
• Periodic Table of ARIA 1.0 Roles
• Using ARIA landmarks to identify regions of a page