typestar

Accessible names and state in HTML

ARIA fills the gaps where the markup alone cannot say enough.

<button type="button" aria-label="Restart test" aria-keyshortcuts="Tab">
  <svg width="16" height="16" aria-hidden="true" viewBox="0 0 16 16">
    <path d="M2 8a6 6 0 1 0 6-6"></path>
  </svg>
</button>
<div role="status" aria-live="polite">Saved your result.</div>
<input type="text" aria-describedby="hint" name="handle">
<p id="hint">Letters and digits only.</p>

How it works

  1. Prefer real elements; reach for ARIA only when nothing fits.
  2. aria-label names a control that shows only an icon.
  3. aria-live announces changes the user did not trigger.

The run, in numbers

Lines
8
Characters to type
357
Tokens
82
Three-star pace
75 tpm

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

Type this snippet

Step 2 of 4 in Names and state, step 6 of 15 in Accessible HTML.

← Previous Next →