Skip to Main Content

Q&A: What’s in a Name? Why and How to Add Accessible Names to User Interface Elements

taught by: Alicia Evans

Session Summary

In this lesson, you'll learn why it's crucial to ensure user interface elements have accessible names, how to use developer tools to find the accessible name of an element, various techniques for implementing accessible names, and how those names should be crafted.


Watch this presentation in the Knowbility Learning Center

Assistive technologies use the accessible name to identify User Interface (UI) elements to users. But the web is riddled with nameless UI elements, causing uncertainty and confusion. As developers, it's important to know why the accessible name is important, how it differs from a visual label, and how to provide an accessible name.

In this technical lesson, you'll learn:

  • What the accessible name is and why it is important.
  • How to find the accessible name in Chrome's developer tools.
  • Techniques for adding an accessible name through HTML, CSS, and ARIA.
  • WCAG violations and best practices associated with accessible names.

Practical Skills

  • What is in an accessible name?
  • Where do you find it, and how is it computed?
  • Techniques for crafting and assigning an accessible name.