Technical Service Bulletin Week 35 - Using Aria to improve Accessibility

26 Aug 2019 | Accessibility | Tech Update

Helen Grimbly
  • Tweet this item
  • share this item on Linkedin

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>

It is important to note that should not use ARIA where HTML tags or attributes can be used instead. In the first example above, aria-label or aria-labelledby would not be suitable as the HTML <label> tag is perfectly adequate for the purpose: https://www.w3.org/TR/using-aria/#rule1