26 Aug 2019 | Accessibility | Tech Update
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