De dónde sale un nombre accesible en HTML

Cuatro fuentes, y se pisan entre sí en un orden fijo.

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

Cómo funciona

1. aria-labelledby gana, luego aria-label, luego el label visible, luego title.
2. Un botón de solo ícono no tiene texto, así que necesita una de las dos primeras.
3. Si hay texto visible, el nombre accesible debería contenerlo.

El intento, en números

Líneas

13

Caracteres a escribir

340

Tokens

88

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

Paso 1 de 4 en Nombres y estado; paso 5 de 15 en HTML accesible.

← Anterior Siguiente →