Estado que a ARIA hay que contarle en HTML

Cuando un control cambia otra cosa en la página, la relación tiene que quedar explícita.

<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>

Cómo funciona

1. aria-expanded dice si lo que este control abre está abierto.
2. aria-controls nombra el elemento que abre, por id.
3. aria-pressed es para un toggle que queda presionado; aria-current marca dónde estás.

El intento, en números

Líneas

13

Caracteres a escribir

314

Tokens

85

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 68 segundos.

Escribe este fragmento

Paso 3 de 4 en Nombres y estado; paso 7 de 15 en HTML accesible.

← Anterior Siguiente →