Recently, I had a client request that we incorporate ARIA labels into a web app. If you’re unfamiliar with ARIA labels and web accessibility, I encourage you to read the Web Accessibility Initiative overview on the fundamentals. The Initiative’s aim is to provide standards for making web pages accessible to everyone, and it’s what governments and organizations use to create their digital standards and policies.
The client wanted to bring the web app in line with their accessibility policy, and noted that there was an alternative text option for images but no aria-label option in the editor. Of course there is the option to use the code editor and clients can add ARIA labels within the code editor.
As I’m a trial-by-fire operator in the realm of accessibility (WCAG is dense and no one else wants to own it), I had to look it up.
For links, the visible link text should be descriptive. Avoid terms like, ‘click here’, or ‘read more’. For images the descriptive text lives inside of the alt text field.
What I learned is that ARIA labels should be used sparingly in cases where proper html cannot express something clearly within the markup. So things like icon only buttons, fancy tabs, dropdown lists and other elements where things can be confusing.
While ARIA labels are a valid tool, use them as a failsafe where proper html tags aren’t available.
References:
https://www.w3.org/WAI/fundamentals/
ARIA: aria-label attribute – ARIA | MDN
Accessible name – Glossary | MDN