Testing name mismatches

Example 1: Visible name and accessible name do not match

The accessible name for this <button> should be: Goodbye world

Not recommended. The accessible name does not match the visible text, which can cause problems for screen reader and voice control users.

<button aria-label="Goodbye world">Hello</button>

Example 2. Visible name and accessible name partially match

The accessible name for this <button> should be: Close dialog

Recommended. The accessible name begins with the visible text and provides additional context, making it easier for screen reader and voice control users.

<button aria-label="Close dialog">Close</button>

Example 3: Accessible name from button content

The accessible name for this <button> should be: Submit

Recommended. The visible text provides the accessible name, so screen reader and voice control users receive the same label that appears on screen.

<button>Submit</button>