Testing allybites examples

Example 1: what’s the name of the button?

<button></button>

Answer: No accessible name

The button has no content and no labelling attribute, so there's nothing to announce.

Example 2: what’s the name of the button?

<button>Submit</button>

Answer: Submit

Visible text content inside a button is its accessible name by default.

Example 3: what’s the name of the link?

<a href="#">
  <svg>
    <title>Hello</title>
  </svg>
</a>

Answer: Hello

An SVG <title> acts as the text content of the SVG, so the browser treats it the same as visible text inside the link. The accessibility tree will show it as coming from contents.

Example 4: what’s the name of the button?

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

Answer: Close

The aria-label directly on the element sets the name, overriding the empty content.

Example 5: what’s the name of the link?

<a href="#" aria-label="Goodbye">
  <svg>
    <title>Hello</title>
  </svg>
</a>

Answer: Goodbye

The aria-label outranks <title> inside a child SVG, so "Goodbye" beats "Hello".

Example 6: what’s the name of the input?

<label>Search the site</label>
<input placeholder="Search">

Answer: Search

The <label> is not programmatically associated with the input (no for/id pairing), so it's ignored. The placeholder is the only thing left, so provides the name.

Example 7: what’s the name of the button?

<button aria-labelledby="x" aria-label="Close">
  Cancel
</button>
<span id="x">Delete</span>

Answer: Delete

The aria-labelledby beats the aria-label and the button's contents. It points to the <span> containing "Delete".

Example 8: what’s the name of the input?

<label for="fish">Fish</label>
<input
  type="text"
  id="fish"
  aria-label="dog"
  title="rabbit"
  placeholder="fox"
>

Answer: dog

The aria-label beats names coming from the <label>, title and placeholder.

Example 9: what’s the name of the button?

how are you

today

<button>
  <img src="cross.png" alt="Hello">
  <span class="hidden">how are you</span>
  <span role="img" aria-label="doing"></span>
  <span role="img" aria-labelledby="aaa"></span>
  <span role="img" title="?"></span>
</button>

<p id="aaa" style="display: none;">today</p>

Answer: Hello how are you doing today ?

Buttons use “name from contents”, meaning their accessible name is built from the accessible text alternatives of descendant content. Different child elements can contribute text in different ways, and the final name is concatenated together.

The image provides alt text: "Hello"

Even though visually hidden, the first <span> provides text: "how are you". Buttons build their accessible name from descendant content, so visually hidden text can still participate in the button’s name calculation. This works because the content is visually hidden only. It would not work if the element used display: none, visibility: hidden, or aria-hidden="true".

The second <span> has a role of img and therefore provides a name via aria-label: "doing"

The third <span> has a role of img and therefore provides a name via aria-labelledby: "today"

The fourth <span> has a role of img and therefore provides a fallback accessible name via the title: "?"

The space before "?" comes from how the browser computes accessible names. Each child element’s contribution is usually separated by a space when the final name is concatenated together. So the <span role="img" title="?"> contributes its own separate text token, producing "today ?" rather than "today?".

Testing home