El Atributo TABINDEX

Permite controlar el orden de enfoque y la accesibilidad de los elementos HTML cuando un usuario navega con el teclado (usando la tecla Tab).

El atributo tabindex permite controlar el orden de enfoque y la accesibilidad de los elementos HTML cuando un usuario navega con el teclado (usando la tecla Tab). Aquí te explicamos cómo usarlo correctamente para mejorar la experiencia de usuarios y cumplir con estándares de accesibilidad.

1. ¿Qué es tabindex?

  • Propósito:
    Determinar si un elemento puede recibir enfoque y definir su posición en el orden de navegación secuencial.

  • Valores aceptados:

    • tabindex="-1": El elemento no es accesible mediante Tab, pero puede enfocarse programáticamente (con JavaScript).

    • tabindex="0": El elemento se agrega al orden natural de Tab (según su posición en el DOM).

    • tabindex="≥1" (no recomendado): Define un orden manual (prioriza elementos con valores más altos).

2. Sintaxis y Comportamiento

Aplica tabindex a cualquier elemento HTML:

html
Copy
<elemento tabindex="valor">...</elemento>
 
Run HTML

Ejemplo 1: Elemento no enfocable por defecto

html
Copy
<div tabindex="0">Este div ahora es enfocable con Tab</div>
 
Run HTML

Ejemplo 2: Priorizar un botón

html
Copy
<button tabindex="1">Primero en el orden</button>
<button tabindex="2">Segundo en el orden</button>
 
Run HTML

⚠️ Advertencia: Usar valores mayores a 0 crea órdenes confusos. Evítalo en la mayoría de casos.

3. Casos de Uso y Ejemplos

3.1. Enfocar elementos no interactivos

Haz que un <div> o <span> sea enfocable para usarlo en widgets personalizados (ej.: modales):

html
Copy
<div 
  tabindex="0" 
  role="button" 
  onclick="abrirModal()"
>
  Abrir modal
</div>
 
Run HTML

3.2. Excluir elementos del flujo de Tab

Evita que elementos innecesarios interrumpan la navegación:

html
Copy
<img src="decoracion.jpg" alt="" tabindex="-1">
 
Run HTML

3.3. Componentes dinámicos

Enfocar programáticamente un elemento oculto (ej.: mensaje de error):

javascript
Copy
document.getElementById("error").focus();
html
Copy
<div id="error" tabindex="-1" style="display: none;">
  Campo obligatorio.
</div>
 
Run HTML

4. Mejores Prácticas

  1. Usa elementos semánticos:
    Prefiere <button>, <a>, <input>, etc., que son enfocables por defecto.

  2. Evita tabindex="≥1":
    Rompe el orden natural del DOM y confunde a usuarios.

  3. Accesibilidad:

    • Si usas tabindex="0" en elementos no interactivos, agrega roles ARIA (ej.: role="button") y maneja eventos de teclado (como Enter).

    • Nunca elimines el outline CSS de elementos enfocables sin ofrecer una alternativa visual.

  4. Orden lógico:
    El orden de Tab debe seguir la estructura visual y semántica de la página.

5. Errores Comunes

  • Abusar de tabindex="0":
    Enfocar elementos no interactivos sin una razón clara (ej.: <div> decorativos).

  • Desordenar el flujo con valores positivos:

    html
    Copy
    <!-- ❌ Evitar -->
<input tabindex="2">
<input tabindex="1">
     
  • Run HTML

  • Omitir teclado en widgets personalizados:
    Si creas un menú desplegable con <div>, asegúrate de manejar las teclas ↑, ↓, Enter, etc.

6. Pruebas de Accesibilidad

  1. Navega solo con Tab:
    Verifica que el orden sea lógico y todos los elementos interactivos sean accesibles.

  2. Usa herramientas:

    • Lighthouse: Audita accesibilidad.

    • Screen Readers (NVDA, VoiceOver): Comprueba cómo se anuncia el contenido.

7. Ejemplo Integrado

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de tabindex</title>
  <style>
    .custom-button {
      padding: 10px;
      background: #007bff;
      color: white;
      cursor: pointer;
    }
    .custom-button:focus {
      outline: 3px solid orange;
    }
  </style>
</head>
<body>
  <!-- Orden natural -->
  <input type="text" placeholder="Nombre">
  <input type="email" placeholder="Correo">

  <!-- Widget personalizado -->
  <div 
    class="custom-button" 
    tabindex="0" 
    role="button" 
    onclick="alert('¡Haz clic!')"
    onkeydown="if (event.key === 'Enter') alert('¡Enter presionado!')"
  >
    Botón personalizado (usa Tab + Enter)
  </div>

  <!-- Elemento excluido -->
  <img src="deco.jpg" alt="" tabindex="-1">
</body>
</html>
 
Run HTML

Conclusión

El atributo tabindex es esencial para:

  • Mejorar la accesibilidad de usuarios que dependen del teclado.

  • Controlar el enfoque en componentes interactivos complejos.

  • Evitar errores de navegación en interfaces personalizadas.

Recuerda:

  • Prioriza el orden natural del DOM.

  • Valida siempre con herramientas de accesibilidad.

  • ¡Un sitio accesible es un sitio usable para todos! ????️♿

Con este tutorial, podrás implementar una navegación coherente y accesible en tus proyectos web.