Navegación con Teclado: Clave para una Web Accesible ⌨️✨

Ejemplo de botón semántico vs. no semántico:

<!-- BUENO: Botón semántico y accesible por defecto -->
<button type="submit">Enviar Formulario</button>

<!-- MALO: Div no semántico, requiere trabajo extra de accesibilidad -->
<div role="button" tabindex="0" onclick="doSomething()" onkeydown="handleKeyPress(event)">
  Hacer Algo
</div>

2. Orden de Foco Lógico (Tab Order) 🧠

El orden en que los elementos reciben el foco al presionar Tab debe ser lógico y predecible, siguiendo el flujo visual y la jerarquía de la página. Por defecto, los navegadores siguen el orden de aparición de los elementos en el DOM.

Uso de tabindex

El atributo tabindex controla si un elemento es enfocable y su posición en el orden de tabulación. Puede tomar tres tipos de valores:

• tabindex="0": El elemento es enfocable y se incluye en el orden de tabulación natural del documento (orden del DOM). Es útil para hacer elementos no interactivos enfocables (como un div que actúa como un control personalizado).
• tabindex="-1": El elemento es enfocable programáticamente (por JavaScript, por ejemplo), pero NO se incluye en el orden de tabulación natural. Es útil para gestionar el foco en elementos que solo deben ser enfocados bajo ciertas condiciones (por ejemplo, el contenido de un modal cuando se abre).
• tabindex="[número positivo]": EVITAR SIEMPRE QUE SEA POSIBLE. Los valores positivos (1, 2, 3, etc.) colocan los elementos en un orden de tabulación explícito, sobrescribiendo el orden natural del DOM. Esto puede crear una experiencia confusa y es extremadamente difícil de mantener.

Ejemplo de tabindex

<a href="#">Enlace 1</a>
<div tabindex="0" role="group" aria-label="Controles de filtro">
  <button>Filtrar por fecha</button>
  <button>Filtrar por categoría</button>
</div>
<input type="text" placeholder="Buscar...">
<a href="#">Enlace 2</a>

En este ejemplo, el div con tabindex="0" se convierte en parte del orden de tabulación natural. Los botones dentro de él serán accesibles una vez que el div tenga el foco. Después, el input y finalmente el segundo enlace.

♿ Atributos ARIA y Navegación con Teclado Avanzada

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que puedes añadir a elementos HTML para mejorar la semántica y la interacción para tecnologías de asistencia, especialmente cuando se usan componentes personalizados de UI.

1. role Atributo

Define el tipo o propósito de un elemento para tecnologías de asistencia. Por ejemplo, role="button" transforma un div en un botón semántico (aunque sigue siendo mejor usar <button>).

2. Estados y Propiedades ARIA

• aria-expanded: Indica si un elemento controlable (como un menú desplegable) está expandido o colapsado (true o false).
• aria-controls: Identifica el elemento (usando su id) que es controlado por el elemento actual. Útil para emparejar botones con su contenido desplegable.
• aria-hidden: Indica si un elemento está oculto para tecnologías de asistencia (true o false). Útil para ocultar contenido fuera de la pantalla o modales inactivos.
• aria-label / aria-labelledby: Proporcionan una etiqueta de texto accesible cuando el contenido visual no es suficiente o no está presente.
• aria-live: Se utiliza para regiones que se actualizan dinámicamente sin que la página se recargue, alertando a los usuarios de lectores de pantalla sobre estos cambios (ej. mensajes de error, actualizaciones en tiempo real).

Ejemplo: Menú Desplegable Accesible por Teclado

Aquí hay un SVG que ilustra el flujo de un menú desplegable accesible.

<nav>
  <button id="menuButton" aria-haspopup="true" aria-expanded="false" aria-controls="menuList">
    Menú <span aria-hidden="true">▼</span>
  </button>
  <ul id="menuList" role="menu" aria-labelledby="menuButton" hidden>
    <li role="none"><a role="menuitem" href="/acerca-de">Acerca de</a></li>
    <li role="none"><a role="menuitem" href="/servicios">Servicios</a></li>
    <li role="none"><a role="menuitem" href="/contacto">Contacto</a></li>
  </ul>
</nav>

<script>
  const menuButton = document.getElementById('menuButton');
  const menuList = document.getElementById('menuList');

  menuButton.addEventListener('click', () => {
    const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
    menuButton.setAttribute('aria-expanded', !isExpanded);
    if (!isExpanded) {
      menuList.removeAttribute('hidden');
      menuList.children[0].firstElementChild.focus(); // Enfocar el primer elemento del menú
    } else {
      menuList.setAttribute('hidden', '');
    }
  });

  // Manejo de teclado para el menú
  menuList.addEventListener('keydown', (e) => {
    const items = Array.from(menuList.querySelectorAll('[role="menuitem"]'));
    let currentIndex = items.indexOf(document.activeElement);

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        currentIndex = (currentIndex + 1) % items.length;
        items[currentIndex].focus();
        break;
      case 'ArrowUp':
        e.preventDefault();
        currentIndex = (currentIndex - 1 + items.length) % items.length;
        items[currentIndex].focus();
        break;
      case 'Escape':
        menuButton.click(); // Cierra el menú
        menuButton.focus(); // Vuelve el foco al botón del menú
        break;
      case 'Tab':
        // Permitir que Tab salga del menú, pero Shift+Tab lo cierra si está en el primer elemento
        if (e.shiftKey && currentIndex === 0) {
          menuButton.click();
          menuButton.focus();
          e.preventDefault();
        } else if (!e.shiftKey && currentIndex === items.length - 1) {
          menuButton.setAttribute('aria-expanded', 'false');
          menuList.setAttribute('hidden', '');
          // Permitir que Tab continúe a otros elementos después del menú
        }
        break;
    }
  });
</script>

Este ejemplo demuestra cómo aria-expanded y aria-controls informan a los lectores de pantalla sobre el estado del menú, y cómo el JavaScript gestiona el foco y la interacción con las teclas de flecha y Esc.

3. Modales y Superposiciones (Overlays) 팝업

Los modales son un desafío particular para la navegación con teclado. Cuando un modal se abre, el foco debe ser atrapado dentro del modal para evitar que el usuario se Tabule fuera de él y pierda el contexto. Al cerrar el modal, el foco debe regresar al elemento que lo abrió.

✅ Buenas Prácticas y Consejos Adicionales

Aquí tienes una lista de buenas prácticas para asegurar una navegación con teclado robusta:

1. Pruebas Rigurosas con Teclado Únicamente

La forma más efectiva de validar tu implementación es dejar el ratón a un lado y navegar por todo tu sitio web usando solo el teclado. Intenta completar todas las tareas críticas: formularios, navegación principal y secundaria, interacciones con componentes de UI, etc.

2. Contenido Oculto Accesible

Si tienes contenido que se muestra/oculta (como pestañas, acordeones, modales), asegúrate de que sea accesible:

• Usa display: none; o visibility: hidden; para ocultar contenido visual y del árbol de accesibilidad.
• Alternativamente, usa aria-hidden="true" para ocultar elementos de las tecnologías de asistencia, pero mantenlos visibles si es necesario (con opacity: 0; y pointer-events: none; para hacerlos inactivos al ratón).
• Al mostrar el contenido, elimina hidden o actualiza aria-hidden a false.

3. Saltar al Contenido Principal (Skip Links) ⏭️

Los skip links son enlaces ocultos que se hacen visibles al enfocarlos (típicamente al presionar Tab por primera vez) y permiten a los usuarios de teclado saltar directamente al contenido principal de la página, evitando bloques de navegación repetitivos.

<body>
  <a href="#main-content" class="skip-link">Saltar al contenido principal</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main-content">
    <!-- Contenido principal de la página -->
  </main>
</body>

/* CSS para ocultar el skip link y mostrarlo al enfocar */
.skip-link {
  position: absolute;
  left: -9999px; /* Moverlo fuera de la pantalla */
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999; /* Asegurar que no interfiera con otros elementos */
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 10px;
  background-color: #ffd93d;
  color: #333;
  text-decoration: underline;
  z-index: 999; /* Asegurar que sea visible */
  left: 0;
  top: 0;
}

4. Gestores de Eventos de Teclado Personalizados

Cuando crees componentes interactivos personalizados con JavaScript (que no sean elementos HTML semánticos), asegúrate de manejar los eventos de teclado relevantes (keydown, keyup, keypress) para emular el comportamiento de elementos nativos.

Este enfoque es un **último recurso**. Siempre prefiere elementos HTML semánticos.
</details>

### 5. Controles de Formulario Accesibles

*   Usa `<label>` asociados correctamente con `<input>` (`for` y `id`).
*   Proporciona mensajes de error claros y accesibles, idealmente vinculados al campo (`aria-describedby`).
*   Valida la entrada del usuario de manera accesible, informando sobre los errores a los lectores de pantalla.

<div class="callout tip">💡 <strong>Consejo:</strong> Utiliza el atributo `required` en los campos de formulario, los navegadores nativamente añaden mensajes de validación accesibles.</div>

### 6. Contenido Dinámico y `aria-live`

Para actualizaciones de contenido que aparecen o cambian sin una recarga de página (ej. resultados de búsqueda autocompletados, mensajes de éxito/error), usa `aria-live` para alertar a los lectores de pantalla.

```html
<div id="statusMessage" role="status" aria-live="polite"></div>