« Back to home

Testing accessible names

Which of the examples below have descriptive accessible names?

Button without an accessible name

In this example, the button has no accessible name. Screen reader users will hear it announced only as a button, with no indication of what it does.

• Visible text: None, but icon present
• Accessible name: None

<button>
  <img src="down.png" alt="">
</button>

Link using content

In this example, the content of the <a> element provides its accessible name.

• Visible text: More
• Accessible name: More

<a href="#">More</a>

Button using content

In this example, the content of the <button> element provides its accessible name.

• Visible text: Close
• Accessible name: Close

<button>Close</button>

Link using aria-label

In this example, aria-label provides a more descriptive accessible name than the visible link text.

• Visible text: More
• Accessible name: More about wombats

<a href="#" aria-label="More about wombats">
  More
</a>

Button using aria-label

In this example, the button contains only an icon, so aria-label provides its accessible name.

• Visible text: None, but icon present
• Accessible name: Expand accordion

<button aria-label="Expand accordion">
  <img src="down.png" alt="">
</button>

<input> without an accessible name

In this example, the <input> has no accessible name. Screen reader users will hear it announced only as a form field, with no indication of its purpose.

• Visible label: Address
• Accessible name: None

<label>Address</label>
<input type="text">

<input> with programmatically associated <label>

In this example, the content of the <label> element provides the accessible name for the <input>. This works because the for and id attributes programmatically associate the label with the input.

• Visible label: Address
• Accessible name: Address

<label for="address">Address</label>
<input id="address" type="text">

« Back to home