How to Use ARIA Effectively with HTML5

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:

[code language="html"]
<header role="banner">
[/code]

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

[code language="html"]
<div role="contentinfo">
This website was built by Georgie.
</div>
[/code]

An alert would look like so:

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

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.

[code language="html"]
<span class="frame-corner" role="presentation"></span>
[/code]

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, which is used on the states of elements such as checkboxes and radio buttons.

[code language="html"]
<input type="radio" aria-checked="true">
[/code]

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. Its use is as follows, with the attribute’s value matching the id value of the element it refers to.

[code language="html"]
<label id="address">Address</div>
<input type="text" aria-labelledby="address">
[/code]

This can also be done with the figure element.

[code language="html"]
<figure aria-labelledby="operahouse_1">
<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>
[/code]

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.

Continue reading %How to Use ARIA Effectively with HTML5%

by Georgie Luhur via SitePoint