This post marks the second installment of my five part series diving into more developer-focused WCAG success criteria and explaining them for my designer friends.
A name, often referred to as an accessible name, is a short description, typically one to three words, that is used to provide people who use assistive technology with the purpose of a UI element and differentiate it from others on the page. At the very least, all interactive UI elements to have an accessible name, though some non-interactive elements (like headers and tables) can also have them.
I discussed this briefly in my Differentiating ARIA Properties post, but there are several different HTML elements and attributes that can make up an accessible name. Because developers can combine these elements/attributes in a number of various ways, web browsers use a complex algorithm for determining an element's accessible name.
Providing accessible names is a critical task in order to ensure a web experience is accessible and that is reflected by how many success criteria reference names in their requirements:
While the HTML elements and attributes are ultimately a developer's responsibility for writing and establishing an accessible name, here are some basic recommendations for designers to prevent errors from occurring with accessible names.
First and foremost, you should be using visible text labels within your designs as it makes the interface easier to understand for all users. If your design does not have one, consider adjusting the design to include one. Additionally it simplifies developer maintenance, prevents bugs, and reduces language translation requirements.
We've all left something up to the developer's interpretation before and been unpleasantly surprised with the results, right? In the instance where you cannot use a visible label, you should provide the element's accessible name to your developers. Make sure you find a balance between conciseness and clarity, otherwise they won't be accessible.
Some recommendations for crafting these names include:
Some naming techniques may have inconsistent results across browsers, making it important for you to verify they work properly in each browser
Introduction to my most recent accessibility side project