Better accessible names

OK, you've added an accessible name to your control. Maybe you've used aria-label, <label> or some other way to name a control. Now you wonder: what makes a name good, effective or useful?

I wrote about why accessible names matter and where to add them before. In this post, I will go into how to make the actual names more user friendly. These tips are all from an underappreciated piece of content that I love: the Composing Effective and User-Friendly Accessible Names section of the ARIA Authoring Practices Guide. All credits go to the authors, I'm just adding context and examples.

Function over form

An accessible name is used by assistive technologies to refer to things on a web page. For instance, if you use voice control, you could say the accessible name of a particular control to activate it. If you use a screenreader, it is the name that gets read out when you get to the control, or when you pull up a list of controls (eg a list of links on the page).

Because of how we use accessible names, we want to keep them functional and avoid naming controls after what they look like. Ideally, you do this in the imperative form, that makes it easiest to quickly grasp what a thing is going to do.

examples of buttons: three dots stacked vertically in right top of navigation bar; arrow pointing right on top of seris of image; three lines stacked vertically in left top corner of interface; floppy disk in Word interface

Examples:

  • “Open navigation” works better than “Hamburger” and “More options” better than “Kebab”
  • “Next slide” works better than “Arrow right” or “Right pointing triangle”
  • “Save document” works better than “Floppy disk”

Most unique part first

In a series of names, like a set of buttons, links, etc, start with the most unique part of the name. This makes it easier to distinguish them.

Let's say you list a bunch of albums and want to include “album” in each name. Most unique first means you say “Midnight Marauders - Album”, “To Pimp A Butterfly - Album” etc, rather than “Album - Midnight Marauders”, “Album - To Pimp A Butterfly”.

albums in Spotify UI: Midnight Marauders by A Tribe Called Quest, To Pimp a Butterfly by Kendrick Lamar, Our Pathetic Age by DJ Shadow, Source by Nubya Garcia, Lianne la Havas by Lianne La Havas

Or you have actions for a link: “Edit link”, “Copy link” and “Share link” work better than “Link edit”, “Link copy” and “Link share”.

This even applies to the <title> of web pages: if you're repeating your company name in it, leave it for last and list what's unique about the page first. Technically not an accessible name, but the same naming advice happens to apply.

Be concise

Keep a name to the most important 1-3 words, prefer brevity.

No roles as part of the name

Things that have names in your page will (or should) have roles too. The browser will derive the role for you, whether you've set it explicitly (e.g. role="button") or it comes for free with the element (e.g. <button>). If you add the role, for instance the word ‘button’, to the name, that is redundant and this can be annoying for users.

Examples:

  • use “Close” instead of “Close button”
  • use “Main” instead of “Main nav”
  • use “Save” instead of “Save button”

Keep names unique

Imagine you work in a school and all your students are named “Alice”. It would be hard to address them… this is the same for the names of controls and components in your page, especially for users who use mostly these names to browse the page.

Examples:

  • instead of an overview page that shows news items with “read more” links, use the title of each news item as the link name
  • instead of saying “click here”, use the name of the page you're linking too, for instance: “See also: [name of the page]”

Sentences aren't names

The last tip in the document is: start names with a capital letter, for better pronounciation in some screenreaders, and don't end with a period, because a name is not a sentence.

I'm not sure if this is the type that this tip is originally referring to, but one example of setences in accessible names is this: a card that has a title, a description and a picture, that is clickable as a whole, implemented by wrapping it all in one <a> element. I've seen this in the wild. It is often problematic, because it creates names that are way too long and confusing. My recommendation would be to do this instead: pick a string that is a more useful (and concise) name and make that the <a>. Then solve the clickability issue with CSS.

Wrapping up

Before I wrap up, I want to assure you that you don't need to use ARIA to provide names, even if this information is part of the ARIA Authoring Practices. Text content in the appropriate HTML elements (<label>, <legend>, <caption>, <button>, <a>) works perfectly fine too. An added benefit is that when you provide visible names with these HTML elements, they can be used by more users, including people who don't use assistive technologies and people collaborating with assistive technology users.

That's all. As mentioned above, these tips are from Composing Effective and User-Friendly Accessible Names in the W3C's ARIA Authoring Practices. That specific page has a lot more tips and also covers accessible descriptions, name and description calculation, per-role guidance on whether you need a name, lots of gotchas and various coding techniques for adding names. Happy naming!

Thanks to Job for some useful input.

Comments, likes & shares (116)

NicoMai, María Ozámiz, Accessabilly, Ben Bloodworth 🇺🇦, Sarah L. Fossheim (they/them), hawkupr, Afnizar Nur Ghifari, Daniel Yuschick, mundi morgado, Eric Cheung, Hwi Lee, Tom Arild Jakobsen, Gaël Poupard, Michelle Barker, Gareth Crossan, Dan, Τheo!, Stephanie Eckles, Kai, Craig England, Tryggvi ❄️🇺🇦, José Villaseñor, Nikolay Cholakov🙏4❤, Alicia Jarvis (She/Her/Elle) 🇨🇦🇺🇦🌻, Anna, sylvia villegas, Jens Oliver Meiert, Oliver Farrell, Ari Picker, Marcos Posada, nguythang(Steve), 🇺🇦Justin, Bhupesh Singh, Thomas Bassetto, irgendwasmitcomputern, Bonita Diener, Adem Fatnassi, Pixolomew, Tristan Dubbeld, Håvard, 全部入りHTML太郎, hannah harvey, Chris Johnson, Scott de Jonge, Wout Thielemans, Jeanne Peureux, Geoffrey Stephenson, Accessibility London, 𝕮𝖊𝖘𝖆𝖗 𝕮𝖍𝖆𝖛𝖊𝖟 @home, Bọ́lájí Ayọ̀dejì, Callum Akehurst-Ryan, Steve Lee, Lawal Hamzat Ademola, María R. 🌙, Carlos A. Perez, tiger ⚡ 🦊, Orla Randles, Nita E., Paul Polanski, reilly, Ruth, EssexCountyAAC, AEL Data Services LLP | Accessibility ♿, kingpixel, Free Xenon (he/him) (IAAP, CPACC), Vee • Product Designer, 𝐉𝐚𝐜𝐤 𝐄𝐦𝐞𝐫𝐬𝐨𝐧, Herman Wikner, daichi, Chandler, neighborhood clown, Ondreas, Jo, 75Fallin and Luis Sánchez liked this

NicoMai, Sarah L. Fossheim (they/them), Ron Derksen, Web Axe, rmroppert, José Villaseñor, Nikolay Cholakov🙏4❤, Tryggvi ❄️🇺🇦, Alicia Jarvis (She/Her/Elle) 🇨🇦🇺🇦🌻, Kai, sylvia villegas, Marcos Posada, Bhupesh Singh, irgendwasmitcomputern, Matthew Deeprose, Accessibility London, Dinael®, Bọ́lájí Ayọ̀dejì, María R. 🌙, Lawal Hamzat Ademola, Nita E., EssexCountyAAC, Steve Lee, Free Xenon (he/him) (IAAP, CPACC), Vee • Product Designer, Sasha Chu 🤍💙🤍 💙💛, daichi, Chandler and neighborhood clown reposted this

Fantastic writeup here!
Fantastic article, a mistake I've seen a ton is people mentioning the role of an element in the accessible name. It is redundant, don't do it, the role of the element already gets voiced by assistive technologies. #a11y #accessibility
The "hamburger menu" is the most common usage even though people know "Open Navigation" name, it's just that we sometimes lack awareness on terminology. Btw, this blog is full of value. Loved it.
더 쉽게 접근할 수 있는 이름 "다음 슬라이드"는 "오른쪽 화살표" 또는 "오른쪽을 가리키는 삼각형"보다 더 잘 작동한다 hidde.blog/better-accessi…
“Open navigation” works better than “Kebab” or “Hamburger” “Next slide” works better than “Arrow right” or “Right pointing triangle” “Save document” works better than “Floppy disk” hidde.blog/better-accessi…
Important! "Better accessible names" hidde.blog/better-accessi… by @hdv #a11y #webcontent
How do you write clear, understandable and accessible labels for elements? This blog post makes it easy to understand. hidde.blog/better-accessi…
Better accessible names hidde.blog/better-accessi… - by that nice Mr @hdv