Q&A: What’s in a Name? Why and How to Add Accessible Names to User Interface Elements
taught by: Alicia Evans
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.
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.
- What is in an accessible name?
- Where do you find it, and how is it computed?
- Techniques for crafting and assigning an accessible name.