Orden de foco y tabindex en HTML

Hay tres valores de tabindex y solo dos son buena idea.

<!-- Enfocable por script, para que un diálogo mueva el foco aquí -->
<h2 id="dialog-title" tabindex="-1">Delete this branch?</h2>

<!-- Una región desplazable debe poder alcanzarse con el teclado -->
<div class="log" tabindex="0" role="region" aria-label="Build log">
  <pre>compiling typestar v0.4.1</pre>
</div>

<!-- No hagas esto: va antes que cualquier otro control de la página -->
<input type="text" tabindex="3" name="never">

Cómo funciona

tabindex="0" mete un elemento no interactivo en el orden natural.
tabindex="-1" lo hace enfocable solo por script, para mover el foco ahí.
Un tabindex positivo se salta la fila y rompe el orden para todos.

El intento, en números

Líneas: 10
Caracteres a escribir: 432
Tokens: 56
Ritmo de tres estrellas: 75 tpm

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

Escribe este fragmento

Paso 1 de 4 en Foco y visibilidad; paso 9 de 15 en HTML accesible.

← Anterior Siguiente →