State that ARIA has to be told in HTML

When a control changes something else on the page, the relationship has to be spelled out.

<button type="button" aria-expanded="false" aria-controls="filters">
  Filters
</button>
<div id="filters" hidden>
  <p>Nothing here yet.</p>
</div>

<button type="button" aria-pressed="true">Bold</button>

<nav aria-label="Primary">
  <a href="/tours" aria-current="page">Tours</a>
  <a href="/profile">Profile</a>
</nav>

How it works

1. aria-expanded says whether the thing this control opens is open.
2. aria-controls names the element it opens, by id.
3. aria-pressed is for a toggle that stays down; aria-current marks where you are.

The run, in numbers

Lines

13

Characters to type

314

Tokens

85

Three-star pace

75 tpm

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

Type this snippet

Step 3 of 4 in Names and state, step 7 of 15 in Accessible HTML.

← Previous Next →