Orden de tabulación

Definición Técnica

El orden de tabulación (tab order) es la secuencia en que los elementos interactivos de una página web reciben foco cuando el usuario navega usando la teclado Tab. Este orden debe seguir una secuencia lógica y predecible que coincida con el orden visual y de lectura del contenido.

Orden Natural

Orden por Defecto

Por defecto, el orden de tabulación sigue el orden del DOM:

<!-- Orden de tabulación: 1, 2, 3, 4 -->
<form>
  <input type="text" id="nombre">      <!-- 1 -->
  <input type="email" id="email">      <!-- 2 -->
  <button type="submit">Enviar</button> <!-- 3 -->
  <a href="/cancelar">Cancelar</a>     <!-- 4 -->
</form>

Controlar el Orden

Atributo tabindex

<!-- ✅ Correcto: tabindex para orden lógico -->
<form>
  <input type="text" tabindex="1">
  <input type="email" tabindex="2">
  <button type="submit" tabindex="3">Enviar</button>
</form>

<!-- ⚠️ Evitar: tabindex > 0 (mejor usar orden DOM natural) -->

Valores de tabindex

• tabindex="0": Incluir en orden natural
• tabindex="-1": Excluir del orden, pero enfocable programáticamente
• tabindex="1+": Orden específico (generalmente no recomendado)

Errores Comunes

❌ Orden Ilógico

<!-- ❌ Incorrecto: Orden que no coincide con visual -->
<form>
  <input type="text" tabindex="3">     <!-- Aparece primero visualmente -->
  <input type="email" tabindex="1">    <!-- Aparece segundo visualmente -->
  <button tabindex="2">Enviar</button>
</form>

❌ Elementos No Enfocables

<!-- ❌ Incorrecto: Div que debería ser botón -->
<div onclick="submit()">Enviar</div> <!-- No enfocable por teclado -->

<!-- ✅ Correcto: Botón semántico -->
<button type="submit">Enviar</button> <!-- Enfocable por teclado -->

Mejores Prácticas

1. Usar orden DOM natural: Evitar tabindex cuando sea posible
2. Coincidir con orden visual: El orden de tab debe seguir el orden visual
3. Mantener lógica: Formularios de arriba a abajo, izquierda a derecha
4. Probar con teclado: Verificar que el orden tiene sentido

Testing

Proceso

1. Activar navegación por teclado: Presionar Tab
2. Seguir el orden: Verificar que sigue lógica visual
3. Verificar todos los elementos: Asegurar que todo es accesible
4. Probar en diferentes navegadores: Comportamiento puede variar

Referencias

• WCAG 2.4.3 Focus Order
• WebAIM - Keyboard Accessibility

Términos Relacionados

• Foco
• Navegación por teclado
• Indicador de foco visible