Technical Service Bulletin Week 35 - Using Aria to improve Accessibility

26 Aug 2019

Helen Grimbly

Helen Grimbly, Support Lead

This week, Support Lead, Helen Grimbly will be looking at examples of when ARIA should be used.

ARIA is great for improving accessibility, however it is an extension to be used on top of HTML features rather than a replacement.

So for example, if you are using an <img> tag, you should use the alt attribute to provide the text alternative. Or if you are using labels for form input fields, they should be labelled using the <label> tag.

ARIA attributes are used when you are doing something beyond what HTML provides.

Example 1: Associating a tooltip with a form field using aria-describedby 
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1

<label for="username">Your username</label> 
<input type="text" id="username" name="user" aria-describedby="username-tooltip" required> 
<div role="tooltip" id="username-tooltip">Your username is your email address</div>

Example 2: When aria-current is set to true, then screen readers will indicate that something is “Current”. 
https://www.w3.org/TR/wai-aria-1.1/#aria-current

<ul> 
<li><a href="home">Home</a></li> 
<li><a href="shop">Shop</a></li> 
<li><a href="contact" aria-current="true">Contact</a></li> 
</ul>