¿Cómo se usa el atributo tabindex para controlar la navegación por teclado?

El atributo tabindex es un atributo global de HTML que te permite controlar si un elemento puede recibir el foco del teclado y cómo participa en la navegación secuencial por teclado (generalmente utilizando la tecla Tab para avanzar y Shift+Tab para retroceder). Es una herramienta fundamental para mejorar la accesibilidad de tu sitio web, especialmente para usuarios que no utilizan un ratón.

¿Cómo funciona y qué valores puede tener tabindex?

El comportamiento del atributo tabindex varía significativamente según el valor numérico que le asignes:

1. tabindex="0"
   • Propósito: Permite que un elemento que normalmente no sería enfocable con el teclado (como un <div>, <span>, <p>) pueda recibir el foco.
   • Comportamiento: El elemento se incluye en el orden de navegación por tabulación natural de la página, de acuerdo con su posición en el código fuente HTML. Esto significa que el usuario podrá llegar a él usando la tecla Tab.
   • Cuándo usarlo: Es muy útil cuando creas componentes interactivos personalizados con JavaScript que no están basados en elementos nativamente enfocables (por ejemplo, un botón personalizado hecho con un <div>, un menú desplegable, etc.). Al añadir tabindex="0", los haces accesibles mediante el teclado. HTML<div role="button" tabindex="0" onclick="miAccion()" onkeypress="miAccion()"> Haz clic o pulsa Enter </div>
2. tabindex="-1"
   • Propósito: Permite que un elemento reciba el foco mediante programación (usando JavaScript, por ejemplo, elemento.focus()), pero lo excluye de la secuencia de navegación por tabulación natural.
   • Comportamiento: El usuario no podrá alcanzar este elemento usando la tecla Tab directamente.
   • Cuándo usarlo:
     • Para elementos que no deben ser parte del flujo de tabulación normal pero necesitan ser enfocados en ciertas situaciones (por ejemplo, un cuadro de diálogo modal al abrirse, un mensaje de error que requiere atención, o para gestionar el foco dentro de un widget complejo).
     • Para quitar del orden de tabulación elementos que son enfocables por defecto pero que están temporalmente inactivos o son decorativos en cierto contexto.
     HTML<div id="notificacionError" tabindex="-1" role="alert">Error: El campo es obligatorio.</div> <button onclick="document.getElementById('notificacionError').focus()">Mostrar y enfocar error</button>
3. tabindex con un valor positivo (ej. tabindex="1", tabindex="5", tabindex="10")
   • Propósito: Define un orden de navegación por tabulación explícito y personalizado, diferente al orden del código fuente.
   • Comportamiento: Los elementos con un tabindex positivo recibirán el foco antes que cualquier elemento con tabindex="0" o elementos enfocables por defecto. El orden entre ellos será de menor a mayor valor de tabindex (primero los tabindex="1", luego los tabindex="2", etc.).
   • ¡Práctica generalmente desaconsejada! El uso de valores positivos para tabindex puede crear una experiencia de navegación por teclado muy confusa y poco intuitiva para los usuarios, ya que el orden del foco puede no coincidir con el orden visual de los elementos en la página. Esto es un anti-patrón de accesibilidad. Es mucho mejor estructurar tu HTML de forma lógica para que el orden natural de tabulación sea el correcto y usar tabindex="0" y tabindex="-1" solo cuando sea estrictamente necesario.

Elementos nativamente enfocables

Recuerda que muchos elementos HTML son enfocables por defecto y se incluyen automáticamente en el orden de tabulación sin necesidad de tabindex. Estos incluyen:

• Enlaces (<a> con atributo href)
• Botones (<button>)
• Campos de formulario (<input>, <select>, <textarea>)
• Elementos con el atributo contenteditable establecido en true.

Buenas prácticas de accesibilidad

• Prioriza un orden de código fuente lógico: La forma más robusta de asegurar una buena navegación por teclado es que el orden de los elementos en tu HTML siga el flujo visual y lógico de la página.
• Usa tabindex="0" con moderación: Solo para elementos personalizados que realmente necesitan ser interactivos y no tienen una alternativa nativa. Asegúrate de que también respondan a eventos de teclado como Enter o Espacio si actúan como botones.
• Usa tabindex="-1" estratégicamente: Para la gestión del foco mediante JavaScript en componentes dinámicos.
• Evita tabindex con valores positivos (> 0) en la medida de lo posible.

Dominar el uso de tabindex es un aspecto importante para crear sitios web que sean accesibles para todos los usuarios, independientemente de cómo interactúen con la web.