HTML & CSS
Article

How to Use ARIA Effectively with HTML5

By Georgie Luhur

ARIA stands for ‘Accessible Rich Internet Applications’ and can help make your website more accessible to people with disabilities such as hearing or visual impairment. Let’s see how we, as developers, can make life easier for them.

One way we can use ARIA is by adding it to our HTML. You may already be familiar with semantic elements in HTML such as nav, button or header. It’s quite easy to see what these elements would be used for. These elements give more meaning to the content of a page, and we can use a combination of these elements and ARIA in our markup. However, there are a few things to keep in mind when using them together.

ARIA Roles

ARIA roles are added to HTML markup like an attribute. They define the type of element and suggest what purpose it serves. The following example identifies the element as some kind of banner:

<header role="banner">

The following example, often placed in a containing element, suggests that its content provides some information about the content within the containing element:

<div role="contentinfo">
    This website was built by Georgie.
</div>

An alert with dynamic content should use role="alert":

<div role="alert">
    Please upgrade to the latest version of your browser for the best experience.
</div>

This one is my personal favorite, which is used when an element is simply for presentation. If you imagine someone using a screen reader, think of the elements that they would not want read out. One example is an element that might contain a visual decoration, or is an empty element simply serving an image or background color.

<a href="aria.html" role="presentation">
  <img src="aria-thumbnail.jpg" role="presentation" alt="Use ARIA effectively">
</a>

ARIA Attributes

ARIA attributes are slightly different from roles. They are added to markup in the same way, but there is a range of ARIA attributes available for use. All ARIA attributes are prefixed with aria-. There are two types of attributes, states and properties.

  • The value of states are bound to change as a result of user interaction.
  • The value of properties is less likely to change.

An example of an ARIA attribute that is a state is aria-checked. This is used to show the state of elements that are emulating interactive elements, such as checkboxes and radio buttons, but are not the native elements themselves (e.g. custom UI elements built with div and span tags).

<span role="checkbox" 
      aria-checked="true"
      tabindex="0"
      id="simulatedcheckbox">
</span>

An example of an ARIA attribute that is a property is aria-label. This is used when a label for a form element is not visible on the page (perhaps because it makes no sense to make it visible, or if the design dictates this). For cases when label text is visible, aria-labelledby is the more appropriate attribute to use.

This can be done with the figure element as shown below.

<figure aria-labelledby="operahouse_1" role="group">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House">
    <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

You can read more about supported states and properties on the W3C website.

Rules of ARIA

Before you get too keen, remember that we don’t want to be adding ARIA to every element, for a couple of reasons.

Use Semantic HTML Elements Where Possible

Default implicit ARIA semantics refers to semantics that are already applied to an element by the browser. Elements such as nav, article and button have default implicit ARIA statements of role="navigation", role="article" and role="button" respectively. Before semantic HTML elements existed, it was common to have elements such as <div class="main-navigation" role="navigation">. Now we are able to use nav in place of div, but we no longer need to add role="navigation" because this is already implied. You can refer to this W3C table to check whether or not an ARIA attribute is required for a certain element.

Your Element Can Only Have One Role

An element should not have multiple ARIA roles. The definition of a role is as follows:

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 cannot have two roles. All roles are semantic in some way or another, and going by the definition above, an element cannot be two types of an object. Can you have something that is both a button and a heading? No, it has to be one or the other. Choose the role that best describes the function of your element.

Do Not Change Native Semantics

You should not apply a contrasting role to an element that is already semantic, as adding a role overrides the native semantics of an element. For example:

<footer role="button">

The second rule of ARIA use does, however, suggest that if you must, you use a nested HTML element instead.

<footer><button>Purchase this e-book</button></footer>

How Else Can You Make Your Markup More Accessible?

Use as Many Semantic Elements as Possible

This comes with practice, but if you think of the function of what you are building, it can give you a good idea as to what element you can use that would be much better than a div or a span. To practice, you could continually refer to what elements are available for you to use and familiarize yourself with them.

One of my favourite examples is the use of blockquote, which is often misused. There are other similar elements which serve specific purposes:

  • q – used to serve inline quotes, such as a direct quote by someone, within paragraph text.
  • cite – used to cite a creative work within text, such as mentioning a poem.

Here is an example containing the two elements above:

<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>

There are many HTML elements that you may not have considered, including some new ones, so make sure you have a look at the possibilities!

alt Attribute

This is an often forgotten piece of markup that can make a huge difference to the accessibility of your markup, especially for screen readers. It has actually been around since HTML2, and is described as follows:

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 actually 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 the image may not load as required, and the user has the ability to turn image loading off. Although we live in a world where the latter seems hard to believe, we cannot assume what our user does on the other end. Therefore we need to provide users with an alternative.

People often write alt text such as “dog” for a photograph of their dog playing in the park, for example. Unfortunately, despite including this text, it really doesn’t paint a picture for the visually impaired. The following is more acceptable:

<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park">

Note that the alt attribute does not reflect the same purpose as the figcaption element – the purpose of alt is to provide alternative text for an image, while figcaption can be a relevant caption for a figure. Using the same example, this may be appropriate text:

<figcaption>Isn’t Bobby cute?</figcaption>

An Example Using Semantic HTML and ARIA, Taking Accessibility into Account

If you look at the example I included earlier in this article, you’ll see that I included something that:

  • uses semantic HTML for an image and its caption
  • uses the cite element appropriately
  • provides appropriate alt text
  • uses one of the ARIA attributes I’ve already mentioned
<figure aria-labelledby="operahouse_1" role="group">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House"/>
    <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Conclusion

ARIA roles and attributes can make a huge difference when your content is processed by screen readers and other assistive technologies. As the use of assistive technologies becomes more common, we need to consider integrating ARIA in our code as a regular practice.

Georgie Luhur
Meet the author
Georgie is a front-end web developer at Campaign Monitor and a concert photographer for Casual Band Blogger. She likes Japanese food, painting her nails, pop rock music, and salted caramel everything. You will always find her looking for new teas.
  • Robert Salmon

    Great article but I think there’s a typo in the aria-labelledby example. There should be a closing tag instead of a closing .

    • Patrick Catanzariti

      Thanks for spotting that Robert! I’ve updated it :)

  • Steve Faulkner

    It’s great that you are spreading the word about ARIA!
    There are a few issues in your examples of usage:

    1. You don’t need to and should not use aria-checked with a native input type=radio as the HTML checked attribute provides the accessibility mapping.
    2. span elements don’t need role=presentation in the vast majority of cases as they are not exposed as objects in the browser accessibility tree (same goes for div elements).
    3. Use the HTML for/id association for labels rather than aria-labelledby as labelledby does not provide the expected behaviour of label elements for other users (i.e. clicking/touching label moves focus to the labelled control – increasing hot area of a control) All aria-labelledby does is provide an accessible name for a control in accessibility APIs.
    4. Note: in order for role=alert to work as expected there needs to be a change of display of the message (display:none to display:block for example) or the alert content needs to be added to the DOM dynamically.

    • Vincent

      Other clarifications:

      An element may not have multiple roles, so that it can not be both a button and a link at the same time, but ARIA roles cascade so that you may do something like role=”table grid”. This is a newer implementation so won’t work unless you’re using new assistive technologies/browsers.

      4. For VoiceOver/Safari a change of display is not enough, you must insert content for it to be read.

      • Patrick Catanzariti

        Thank you to both Vincent and Steve for some great feedback and thoughts on this! Loving the discussion, the more this is spoken about openly and advice is given, the better the industry will become with ARIA :)

    • http://hey.georgie.nu/ Georgie

      Thanks for all that! Definitely learned some new things. Great to get feedback from more well-versed folk in the field. Regarding #3, would my example of `aria-labelledby` in the figure element example be correct usage?

      • Steve Faulkner

        >Regarding #3, would my example of `aria-labelledby` in the figure element example be correct usage?

        yes, suggest that adding role=”group” to figure would help as this exposes the figure element to screen reader users.

  • Leo H

    Thank you for writing an article about ARIA/accessibility!

    • http://hey.georgie.nu/ Georgie

      You’re welcome, Leo!

  • http://uk.linkedin.com/in/karlbrownactor Karl Brown

    A really good post with lots of good information. Thank you for including the rule to use more semantic markup before reaching for the ARIA!
    However, it’s worth pointing out that using descriptive alt attributes doesn’t mean that an image passes accessibility tests. You can fail to meet WCAG 2.0 1.1.1 “due to providing a text alternative that is not null for images that should be ignored by assistive technology.” In your example, if the picture of the dog was aesthetic and didn’t have functionality (e.g., wasn’t the only piece of content in a link) then it would need alt=”” to tell assistive technology to ignore it. 1.1.1 is about giving text alternatives that “serves the equivalent purpose”, so it’s worth being careful and not trusting to technology to show it as an error.

    • http://hey.georgie.nu/ Georgie

      Hi Karl, thanks for your comment and the extra information about `alt` attributes. Your example made sense to me and it’s definitely something I will keep in mind for later. :)

  • https://englishextra.github.io/ englishextra

    header role banner will throw a warning that you shouldnt do it saying header is a banner semanically

    same goes for

    / Sadly the quality of articles on sitepoint is very low. Dont you ladies think of incomes making this garbage site

    • http://hey.georgie.nu/ Georgie

      Maybe you should read properly and learn to communicate before sharing your opinion or attempting to insult anyone. Thanks for your opinion. :)

      • https://englishextra.github.io/ englishextra

        Maby this article should be published with more essense less water and recomposed

  • http://ericnjanga.com Eric Njanga

    Great article. Very interesting. As a complementary information, I’d like to mention that adding redondant landmark roles might be necessary if support for IE and IOS safari is necessary.

    • http://hey.georgie.nu/ Georgie

      I didn’t consider that – thanks Eric. Really appreciated. :)

  • λetmecode

    There is no responsible, modern HTML markup without properly used ARIA attributes. Very good, concise and relevant article.

    Edit: Since this seems to be your first article on Sitepoint, I hope we get to more of you soon.

    • http://hey.georgie.nu/ Georgie

      Thank you! Yes, I have another one in the works. :)

  • Keith Holliday

    This is great. Is there a program you would recommend to measure your or validate this use of ARIA?

  • http://studiorgb.uk Paweł Grzybek

    Such a great introduction to ARIA. Thanks Georgie!

  • http://hey.georgie.nu/ Georgie

    Hi Jason, I’ve requested for the examples to be updated accordingly. :) Thank you!

    • Jason Featheringham

      You’re incredible! I felt really inspired by your article. Thank you!

      • Patrick Catanzariti

        I’ve gone through with Georgie and updated some of the article to avoid any confusion on best practice for readers :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.