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
- Un
<button>recibe foco, se cliquea con el teclado y se anuncia como botón. - Un div con manejador de clic no es nada de eso hasta que reconstruyes las tres cosas.
- 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.
Paso 1 de 4 en Empieza por el elemento correcto; paso 1 de 15 en HTML accesible.