Where an accessible name comes from in HTML

Four sources, and they override each other in a fixed order.

<button type="button" aria-label="Close dialog">
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-x"/>
  </svg>
</button>

<h2 id="billing-heading">Billing</h2>
<section aria-labelledby="billing-heading">
  <p>Next invoice on 1 August.</p>
</section>

<label for="q">Search snippets</label>
<input type="search" id="q" name="q">

How it works

1. aria-labelledby wins, then aria-label, then the visible label, then title.
2. An icon-only button has no text, so it needs one of the first two.
3. If there is visible text, the accessible name should contain it.

The run, in numbers

Lines

13

Characters to type

340

Tokens

88

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 70 seconds.

Type this snippet

Step 1 of 4 in Names and state, step 5 of 15 in Accessible HTML.

← Previous Next →