How to Use ARIA Effectively with HTML5

Share this article

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.

Frequently Asked Questions (FAQs) about Using ARIA Effectively with HTML5

What is the significance of ARIA in HTML5?

ARIA, which stands for Accessible Rich Internet Applications, is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. It supplements HTML5 by providing additional semantics to describe the role, state, and functionality of web components. This helps assistive technologies, like screen readers, to understand the content better and provide a more inclusive web experience.

How does ARIA improve web accessibility?

ARIA improves web accessibility by providing additional information about the semantics of web components. It describes the role (what the element does), properties (characteristics of the element), and state (current condition of the element) of web components. This information is crucial for assistive technologies to interpret the content and provide appropriate feedback to users with disabilities.

Can you provide an example of using ARIA roles in HTML5?

Sure, ARIA roles can be used to define the role of an HTML element. For example, if you have a div element that acts as a button, you can use the ‘button’ role to convey this information to assistive technologies. Here’s how you can do it:

<div role="button" tabindex="0">Click me</div>

What are ARIA states and properties, and how are they used?

ARIA states and properties provide additional information about an element’s behavior and structural relation to other elements. For instance, the ‘aria-disabled’ state indicates that the element is currently disabled. The ‘aria-labelledby’ property establishes relationships between elements and their labels. Here’s an example:

<button aria-disabled="true">Submit</button>
<div aria-labelledby="header1">Content</div>

How does ARIA impact SEO?

While ARIA primarily improves accessibility, it doesn’t directly impact SEO. Search engines like Google don’t consider ARIA attributes for ranking. However, since ARIA improves the overall user experience, it indirectly contributes to SEO by reducing bounce rates and increasing the time users spend on your site.

Can ARIA replace good HTML semantics?

No, ARIA should not be used to replace good HTML semantics. Instead, it should be used to enhance the accessibility of web content where HTML semantics fall short. Always use native HTML elements when possible, and use ARIA as a supplement.

What is the concept of ARIA Live Regions?

ARIA Live Regions allow assistive technologies to be notified about changes to content that happens dynamically, without refreshing the page. This is particularly useful for screen reader users who wouldn’t otherwise know about updates happening on the page.

Are there any limitations or drawbacks to using ARIA?

While ARIA is a powerful tool for enhancing web accessibility, it does have limitations. Incorrect use of ARIA can actually make a website less accessible. Therefore, it’s crucial to understand and use ARIA correctly. Also, not all assistive technologies fully support ARIA, so it’s important to test your website with various technologies.

How can I validate my use of ARIA in HTML5?

You can validate your use of ARIA with various tools like the W3C Markup Validation Service or the aXe accessibility testing tool. These tools can help identify any errors or issues in your ARIA implementation.

Where can I learn more about ARIA and web accessibility?

The W3C’s Web Accessibility Initiative (WAI) provides comprehensive resources on ARIA and web accessibility. You can also refer to the ARIA Authoring Practices Guide for detailed information on how to use ARIA effectively.

Georgie LuhurGeorgie Luhur
View 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.

accessibilityARIAaria attributesaria rolespatrickc
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week