ARIA Command Name

Why It Matters

• Unlabeled controls are invisible to screen readers. A button with only an icon and no accessible name forces screen reader users to guess what it does — or skip it entirely.
• Voice control users cannot activate unnamed elements. People who navigate by voice need to speak the name of a control to use it. No name means no way to interact.
• It is a fundamental accessibility requirement. Every interactive element must have an accessible name. This is not an advanced consideration — it is the baseline for usable interfaces.
• It improves clarity for everyone. The process of naming controls well often reveals confusing UI patterns. If you struggle to name a button, that button might need a clearer design.

How to Fix It

1. Use visible text when possible. The simplest and most reliable way to name a button is to put text inside it: <button>Save Changes</button>. No extra attributes needed.
2. Add aria-label for icon-only controls. If a button or menu item only shows an icon, give it an accessible name with aria-label="Close dialog" so screen readers have something to announce.
3. Use aria-labelledby to reference existing text. If there is already descriptive text on the page, point to it with aria-labelledby rather than duplicating the text in an aria-label.
4. Add a visually hidden <span> as a fallback. If you need text for screen readers but do not want it visible, use a CSS class that hides it visually while keeping it in the accessibility tree: <span class="visually-hidden">Delete item</span>.
5. Check the name makes sense out of context. Screen reader users often navigate by pulling up a list of all buttons on a page. "Submit" is vague; "Submit Contact Form" is clear.

Common Mistakes

• Relying on tooltips as names. A title attribute adds a hover tooltip but is not reliably announced by all screen readers. Use aria-label or visible text instead.
• Naming buttons with generic text. "Click here," "Go," or "OK" tell the user nothing about what happens next. Be specific about the action the button performs.
• Using placeholder text as a name. Placeholder text in inputs disappears when the user starts typing and is not consistently announced by screen readers. It is not a substitute for a real label.
• Duplicating names for different actions. Two buttons both labeled "Delete" on the same page force users to guess which one does what. Add context to distinguish them.