typestar

Usa el elemento que ya lo hace en HTML

Cada atributo ARIA que agregas es uno que el navegador te habría dado gratis.

<!-- Todo esto, para llegar adonde ya está un botón -->
<div role="button" tabindex="0" onclick="save()" onkeydown="onKey(event)">
  Save
</div>

<!-- Lo mismo, con el comportamiento de teclado incorporado -->
<button type="button" onclick="save()">Save</button>

<!-- Un enlace va a algún lado; un botón hace algo -->
<a href="/settings">Settings</a>
<button type="button" onclick="openDialog()">Preferences</button>

Cómo funciona

  1. Un <button> recibe foco, se cliquea con el teclado y se anuncia como botón.
  2. Un div con manejador de clic no es nada de eso hasta que reconstruyes las tres cosas.
  3. La primera regla de ARIA es no usar ARIA cuando HTML tiene el elemento.

El intento, en números

Líneas
11
Caracteres a escribir
415
Tokens
62
Ritmo de tres estrellas
70 tpm

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

Escribe este fragmento

Paso 1 de 4 en Empieza por el elemento correcto; paso 1 de 15 en HTML accesible.

Siguiente →