---
title: "Put the visible words in the name · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/label-in-name
updated: 2026-10-20
licence: "All rights reserved"
---

# Put the visible words in the name

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: When a control shows text, its accessible name must contain that text, ideally at the start. This is WCAG criterion 2.5.3 (A).
- How: Let the visible text be the name. Add an `aria-label` only to controls without visible text. If you must add words, keep the visible words first and in the same order, so voice users can say what they see.
- Check: axe `label-content-name-mismatch` passes. A test finds no control with visible text whose `aria-label` leaves that text out.

Example:

```html
<!-- Good: the name starts with the visible words -->
<button type="button" aria-label="Send message to support">Send message</button>
<!-- Bad: someone who says "click Send" cannot reach it -->
<button type="button" aria-label="Submit form">Send</button>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/label-in-name`.

- Previous: [Label every form field](https://agentwranglers.se/playbook/website/accessibility/form-labels)
- Next: [Make everything work by keyboard](https://agentwranglers.se/playbook/website/accessibility/keyboard-navigation)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)