ARIA – A Beginners Guide

ARIA stands for Accessible Rich Internet Application. ARIA was designed to make Web content and dynamic applications accessible to disabled people – by providing a list of new attributes that can be added to HTML elements.

These attributes are understood by browsers and assistive technology – adding functionality to help make web content more accessible.

Here are some ways that ARIA makes websites more accessible

• The role attribute is used to add ‘landmarks’ to different sections of a web page. These landmarks allow screen readers users to quickly jump from section to section. JAWS, for example, uses the semi-colon key to navigate through landmarks. 
• ARIA can be used to make dynamic content accessible. For example, if a screen reader user fills in a form incorrectly, ARIA can be used to take the user directly to the text of the error message. If sections of a page have changed dynamically users can be alerted to that change. Without the use of ARIA dynamic applications can be inaccessible to screen reader users. 
• ARIA can be used to tell uses whether a drop-down menu is open or closed or if the content of an accordion menu is hidden or in view. 
• ARIA can be used to make JavaScript widgets accessible. For example a progress bar widget. 

‘Role’ and ‘states & properties’ attributes

There are two categories of ARIA attributes. ‘Role’ attributes and ‘states & properties’ attributes. These attributes can be added to elements manually or they can be added dynamically, i.e. using scripts. 

Role attributes

Role attributes are added via role=”name of role goes here”. There are six different categories of role attributes:

• navigation
• search
• banner
• application
• contentinfo
• form
• complementary
• main

In this short article we will concentrate on the landmark role attribute:

For example: 

<div id=”nav” role=”navigation”>…</div>

Everything within this <div> will be recognised as being part of the navigation section.

When landmarks have been added to a page, screen reader users can jump directly to the different sections. The name of the attribute makes the function of each section clear for users.

Here is an example of using the search landmark:

<form role=”search”>

  <input type=”search” aria-label=”search text” >

  <input type=”submit” value=”Site Search”>

</form>

You may have noticed that I used an additional ARIA attribute in the above example, the aria-label. The aria-label attribute is a way to add a text label to an element. The text label is not visible on the screen but is read out by screen readers. 

Examples of landmark attribute use:

Here is an example of using the ‘main‘ landmark

<div role=”main”>

  <h1>Guide to Accessible Website Design<h1>

  …. main content area of page ….

</div>

There can be more than one section on a page using the same landmark role. For example there could be several navigation sections on a page. When that is the case you can use the aria-labelledby attribute to help distinguish between them. For example,

Example 1: the main navigation

<div id=”mainnav” role=”navigaton” aria-labelledby=”mainnavigation”>

<h2  id=”mainnavigation”>Main Navigation</h2>

…main navigation links here …

</div>

Example 2: the right-hand column navigation

<div id=”rightcolunnnav” role=”navigation” aria-labelledby=”rightnavigation”>

<h2  id=”rightnavigation”>Right-Hand Column Navigation</h2>

…right-hand column navigation goes here …

</div>

The crucial detail to note in the above examples is that the value of the aria-labelledby attribute is the same as the value of the <h2> id attribute – thus connecting them. In long-hand what is being said is, ‘this heading value is the label for this navigation area’. So the main navigation area is labelled as, ‘Main Navigation’. This is what screen readers will read out as the label for that navigation area. 

A summary of the 6 different role attributes categories

I mentioned earlier that there are 6 different categories of landmark roles, so to finish this short article here is a summary of each. 

• Landmark roles: to identify large content areas. Used by screen readers for navigation.
• Document Structure roles: describe document structures, e.g. role=”form”.
• Widget roles: a widget could be a slider on a page, or a button or progress bar. 
• Window roles: used when creating browser or application windows such as a modal dialog. They can have a window-like behavior – they don’t have to be an actual separate window –  could be a section of the page styled to look like a window
• Live Region roles: Live regions are regions of a web page that get automatically updated as a result of an event – such as a user typing content into a search form. ofter search forms show results automatically without the user having to press a submit button. 
• Abstract roles: are used by browsers to help organize a web page.

Further study

W3C WAI-ARIA Authoring Practices 1.1:

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.