Nombres accesibles y estado en HTML

ARIA llena los huecos donde el marcado por sí solo no alcanza.

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

Cómo funciona

1. Prefiere elementos reales; recurre a ARIA solo cuando nada calza.
2. aria-label nombra un control que solo muestra un ícono.
3. aria-live anuncia cambios que el usuario no provocó.

El intento, en números

Líneas

8

Caracteres a escribir

357

Tokens

82

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

Paso 2 de 4 en Nombres y estado; paso 6 de 15 en HTML accesible.

← Anterior Siguiente →