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
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 are added via role=”name of role goes here”. There are six different categories of role attributes:
<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.
<input type=”search” aria-label=”search text” >
<input type=”submit” value=”Site Search”>
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
<h1>Guide to Accessible Website Design<h1>
…. main content area of page ….
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 …
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 …
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.
I mentioned earlier that there are 6 different categories of landmark roles, so to finish this short article here is a summary of each.