Tutorial HTML: Navegación por teclado

Importancia de la navegación por teclado

La navegación por teclado es un componente fundamental en el desarrollo de sitios web accesibles. Muchos usuarios no pueden o prefieren no utilizar un ratón para interactuar con las páginas web. Entre estos grupos se incluyen personas con discapacidades motoras, usuarios con lesiones temporales en las manos o brazos, personas con discapacidad visual que utilizan lectores de pantalla, y también usuarios avanzados que prefieren la eficiencia de los atajos de teclado.

Cuando diseñamos sitios web, tendemos a centrarnos en la experiencia del usuario que navega con ratón, pero esto puede crear barreras invisibles para quienes dependen del teclado. Un sitio web verdaderamente accesible debe permitir que todas sus funcionalidades sean utilizables mediante el teclado, sin excepciones.

Beneficiarios de la navegación por teclado

• Personas con discapacidades motoras: Usuarios que tienen dificultades para controlar un ratón con precisión o que utilizan dispositivos de entrada alternativos que emulan pulsaciones de teclado.

• Usuarios con discapacidad visual: Quienes utilizan lectores de pantalla navegan principalmente mediante el teclado, moviéndose secuencialmente por los elementos de la página.

• Usuarios con lesiones temporales: Personas con tendinitis, síndrome del túnel carpiano u otras lesiones que dificultan el uso del ratón.

• Usuarios avanzados: Muchos profesionales prefieren el teclado por su eficiencia y rapidez, especialmente en tareas repetitivas.

Principios básicos de accesibilidad por teclado

Para garantizar que un sitio web sea navegable por teclado, debemos asegurar que:

1. Todos los elementos interactivos sean accesibles mediante la tecla Tab.

2. El orden de navegación sea lógico e intuitivo.

3. Exista un indicador visual claro del elemento que tiene el foco.

4. No haya trampas de teclado (situaciones donde el usuario no puede salir de un elemento usando el teclado).

Navegación básica con teclado

Los usuarios que navegan con teclado utilizan principalmente estas teclas:

• Tab: Avanza al siguiente elemento interactivo.
• Shift+Tab: Retrocede al elemento interactivo anterior.
• Enter/Return: Activa enlaces, botones o envía formularios.
• Espaciador: Activa botones o marca/desmarca casillas de verificación.
• Flechas: Navegan entre opciones en menús desplegables, sliders o grupos de radio buttons.

<!-- Ejemplo de elementos navegables por teclado -->
<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email">
  
  <button type="submit">Send</button>
</form>

En este ejemplo, un usuario que navega con teclado podrá moverse entre los enlaces del menú y los campos del formulario utilizando la tecla Tab, y activarlos con Enter.

Problemas comunes y soluciones

1. Elementos no enfocables

Algunos elementos interactivos creados con JavaScript o CSS pueden no ser enfocables por defecto.

Problema:

<div class="custom-button" onclick="submitForm()">Send</div>

Solución:

<div class="custom-button" onclick="submitForm()" tabindex="0" role="button" onkeydown="if(event.key==='Enter')submitForm()">Send</div>

Añadimos tabindex="0" para hacerlo enfocable, role="button" para indicar su función a los lectores de pantalla, y un manejador de eventos de teclado para activarlo con Enter.

2. Contenido dinámico inaccesible

Los menús desplegables, modales y otros elementos que aparecen dinámicamente pueden ser difíciles de acceder con teclado.

Problema:

<div class="dropdown">
  <span class="dropdown-toggle">Menu</span>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
  </div>
</div>

Solución:

<div class="dropdown">
  <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">Menu</button>
  <div class="dropdown-content" role="menu">
    <a href="#" role="menuitem">Option 1</a>
    <a href="#" role="menuitem">Option 2</a>
  </div>
</div>

Utilizamos un <button> en lugar de un <span>, añadimos atributos ARIA para indicar que es un menú desplegable, y asignamos roles apropiados a los elementos del menú.

Pruebas de navegación por teclado

Para verificar la accesibilidad por teclado de tu sitio web, realiza estas pruebas básicas:

1. Desconecta el ratón y navega por todo el sitio utilizando solo el teclado.

2. Comprueba que puedes acceder a todas las funcionalidades sin excepciones.

3. Verifica que el orden de tabulación sea lógico y siga el flujo visual de la página.

4. Asegúrate de que el foco visual sea claramente visible en todo momento.

5. Confirma que no hay trampas de teclado donde el usuario quede atrapado.

Impacto en el SEO y la experiencia de usuario

Además de mejorar la accesibilidad, una buena navegación por teclado tiene otros beneficios:

• Mejora el SEO: Los motores de búsqueda valoran positivamente los sitios accesibles.

• Amplía tu audiencia: Permite que más personas puedan utilizar tu sitio web.

• Mejora la experiencia de usuario: Incluso los usuarios que normalmente utilizan el ratón pueden beneficiarse de atajos de teclado eficientes.

• Cumplimiento normativo: Ayuda a cumplir con leyes y regulaciones de accesibilidad como WCAG, ADA o la Directiva Europea de Accesibilidad.

La navegación por teclado no es solo una característica adicional, sino un requisito fundamental para crear sitios web verdaderamente inclusivos. Al implementar una navegación por teclado efectiva, no solo cumplimos con estándares de accesibilidad, sino que mejoramos la experiencia de todos los usuarios, independientemente de sus capacidades o preferencias de navegación.

Orden de tabulación y atributo tabindex

El orden de tabulación define la secuencia en la que los elementos de una página web reciben el foco cuando un usuario navega utilizando la tecla Tab. Un orden lógico y predecible es esencial para que los usuarios que dependen del teclado puedan navegar eficientemente por el contenido.

Por defecto, HTML establece un orden de tabulación basado en la posición de los elementos en el código fuente, siguiendo un patrón de izquierda a derecha y de arriba abajo. Sin embargo, este orden natural no siempre coincide con la disposición visual o la importancia funcional de los elementos en la página.

Elementos enfocables por defecto

Algunos elementos HTML son naturalmente enfocables sin necesidad de configuración adicional:

• Enlaces (<a> con atributo href)
• Botones (<button>)
• Controles de formulario (<input>, <select>, <textarea>)
• Elementos con el atributo contenteditable="true"

<!-- Estos elementos son enfocables por defecto -->
<a href="about.html">About us</a>
<button type="button">Click me</button>
<input type="text" placeholder="Enter your name">
<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<textarea></textarea>

El atributo tabindex

El atributo tabindex permite modificar el orden de tabulación natural y hacer enfocables elementos que normalmente no lo son. Este atributo puede tomar tres tipos de valores:

• tabindex="0": Incluye el elemento en el orden de tabulación natural.
• tabindex="-1": Excluye el elemento del orden de tabulación, pero permite enfocarlo mediante JavaScript.
• tabindex="n" (donde n > 0): Coloca el elemento en una posición específica del orden de tabulación.

Haciendo enfocables elementos no estándar

Cuando creamos componentes personalizados con <div> o <span>, estos no son enfocables por defecto. Podemos hacerlos accesibles mediante teclado añadiendo tabindex="0":

<!-- Un botón personalizado hecho con un div -->
<div class="custom-button" 
     tabindex="0" 
     role="button" 
     onclick="performAction()"
     onkeydown="if(event.key==='Enter'||event.key===' ')performAction()">
  Custom Button
</div>

Este ejemplo muestra cómo hacer que un <div> funcione como un botón accesible:

1. tabindex="0" lo hace enfocable
2. role="button" comunica su propósito a tecnologías asistivas
3. El evento onkeydown permite activarlo con Enter o Espacio, como un botón nativo

Elementos que deben ser excluidos del orden de tabulación

Algunos elementos interactivos pueden necesitar ser excluidos temporalmente del orden de tabulación, por ejemplo, contenido en pestañas inactivas o elementos en un diálogo modal cerrado:

<!-- Contenido en pestañas -->
<div role="tablist">
  <button role="tab" aria-selected="true" id="tab1">Tab 1</button>
  <button role="tab" aria-selected="false" id="tab2" tabindex="-1">Tab 2</button>
</div>

<div role="tabpanel" aria-labelledby="tab1">
  <p>Content for tab 1...</p>
</div>

<div role="tabpanel" aria-labelledby="tab2" hidden>
  <p>Content for tab 2...</p>
</div>

En este ejemplo, la segunda pestaña tiene tabindex="-1" porque no está activa. Cuando el usuario la active, se debería cambiar dinámicamente el tabindex y el atributo aria-selected.

Problemas con valores positivos de tabindex

Aunque es posible asignar valores positivos a tabindex (1, 2, 3...), esta práctica no es recomendada por varias razones:

1. Los elementos con tabindex positivo reciben el foco antes que cualquier elemento con tabindex="0", independientemente de su posición en el DOM.

2. Crear y mantener un orden de tabulación manual es propenso a errores, especialmente cuando se añaden o eliminan elementos.

3. Si varios desarrolladores asignan valores diferentes, pueden surgir conflictos difíciles de depurar.

<!-- Ejemplo de uso problemático de tabindex -->
<div>
  <button tabindex="3">Third</button>
  <button tabindex="1">First</button>
  <button tabindex="2">Second</button>
  <a href="#">Fourth (tabindex="0" implícito)</a>
</div>

En este ejemplo, el orden de tabulación será: "First", "Second", "Third" y finalmente "Fourth", independientemente del orden visual o estructural.

Mejores prácticas para el orden de tabulación

Para crear una experiencia de navegación por teclado óptima:

• Estructura el HTML lógicamente: Organiza el código para que el orden natural de tabulación coincida con el flujo visual de la página.

• Usa tabindex="0" para elementos personalizados: Haz enfocables los elementos interactivos no estándar, pero mantenlos en el flujo natural.

• Usa tabindex="-1" selectivamente: Para elementos que deben ser enfocables programáticamente pero no mediante tabulación normal.

• Evita valores positivos de tabindex: En lugar de asignar números, reorganiza el HTML.

• Prueba con teclado: Verifica regularmente que el orden de tabulación sea intuitivo navegando sin ratón.

<!-- Estructura HTML organizada para un orden de tabulación lógico -->
<header>
  <nav>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <a href="/">Home</a>
    <a href="/products">Products</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main id="main-content">
  <h1>Welcome to our website</h1>
  
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email">
    
    <button type="submit">Submit</button>
  </form>
</main>

<footer>
  <a href="/privacy">Privacy Policy</a>
  <a href="/terms">Terms of Service</a>
</footer>

En este ejemplo, el orden de tabulación seguirá naturalmente el flujo de la página: primero los enlaces de navegación, luego el contenido principal con el formulario, y finalmente los enlaces del pie de página.

Casos especiales: Componentes complejos

Para componentes interactivos complejos como carruseles, menús desplegables o diálogos modales, es importante gestionar cuidadosamente el orden de tabulación:

<!-- Modal dialog with managed focus -->
<div role="dialog" aria-labelledby="dialog-title" aria-modal="true">
  <h2 id="dialog-title">Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  
  <div class="dialog-buttons">
    <button id="cancel-btn">Cancel</button>
    <button id="confirm-btn" autofocus>Confirm</button>
  </div>
</div>

<script>
  // Cuando se abre el diálogo:
  function openDialog() {
    // Guardar el elemento que tenía el foco antes de abrir
    lastFocus = document.activeElement;
    
    // Mostrar el diálogo y enfocar el botón principal
    dialog.hidden = false;
    document.getElementById('confirm-btn').focus();
    
    // Crear una "trampa de foco" para mantener el foco dentro del diálogo
    // (Código para gestionar eventos de teclado y mantener el foco dentro)
  }
  
  // Cuando se cierra el diálogo:
  function closeDialog() {
    dialog.hidden = true;
    // Devolver el foco al elemento que lo tenía antes
    lastFocus.focus();
  }
</script>

Este ejemplo muestra cómo gestionar el foco en un diálogo modal:

1. Se guarda el elemento que tenía el foco antes de abrir el diálogo
2. Se enfoca automáticamente un elemento dentro del diálogo (generalmente el botón principal)
3. Al cerrar, se devuelve el foco al elemento original

Herramientas para verificar el orden de tabulación

Para evaluar y mejorar el orden de tabulación de tu sitio web, puedes utilizar:

• Navegación manual con teclado: La forma más básica pero efectiva de probar.
• Extensiones de navegador: Como "Tab Order Checker" para Chrome.
• Herramientas de auditoría: Lighthouse incluye pruebas de accesibilidad por teclado.
• Lectores de pantalla: NVDA o VoiceOver pueden revelar problemas adicionales.

Un orden de tabulación bien implementado es un componente esencial de la accesibilidad web, beneficiando no solo a usuarios con discapacidades sino a todos los que prefieren o necesitan navegar mediante teclado. Combinado con indicadores visuales de foco claros y atajos de teclado intuitivos, crea una experiencia de navegación fluida y accesible para todos.

Indicadores visuales de foco

Los indicadores visuales de foco son señales gráficas que muestran claramente qué elemento de la página tiene actualmente el foco del teclado. Estos indicadores son fundamentales para que los usuarios que navegan con teclado puedan orientarse en la página y entender con qué elemento están interactuando en cada momento.

Por defecto, los navegadores aplican un contorno (outline) a los elementos enfocados, generalmente en forma de un borde punteado o continuo de color azul. Sin embargo, este indicador predeterminado a menudo es eliminado por razones estéticas en muchos sitios web, lo que crea una barrera significativa para la accesibilidad.

Importancia de los indicadores de foco visibles

Un indicador de foco claro y visible:

• Proporciona orientación espacial a los usuarios que navegan con teclado
• Reduce la carga cognitiva al mostrar claramente la posición actual
• Facilita la interacción eficiente con la interfaz
• Es un requisito obligatorio según las pautas WCAG (criterio 2.4.7)

Problemas comunes con los indicadores de foco

El error más frecuente es eliminar completamente el contorno de foco mediante CSS:

/* ❌ Práctica incorrecta: eliminar el indicador de foco */
:focus {
  outline: none;
}

Este código elimina cualquier indicación visual de qué elemento tiene el foco, dejando a los usuarios de teclado sin referencia para navegar. Otro problema común es que el indicador de foco tenga un contraste insuficiente con el fondo, haciéndolo difícil de percibir.

Mejorando los indicadores visuales de foco

En lugar de eliminar el contorno, podemos mejorarlo para que sea más visible y se integre mejor con el diseño:

/* ✅ Práctica correcta: mejorar el indicador de foco */
:focus {
  outline: 3px solid #4d90fe;  /* Borde azul sólido */
  outline-offset: 2px;         /* Espacio entre el borde y el elemento */
  box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.5);  /* Efecto de resplandor */
}

Este ejemplo crea un indicador de foco más prominente y atractivo, con un borde azul sólido y un ligero resplandor que mejora la visibilidad sin comprometer el diseño.

Estilos de foco específicos para diferentes elementos

Podemos personalizar los indicadores de foco según el tipo de elemento para mejorar tanto la accesibilidad como la estética:

/* Estilo de foco para botones */
button:focus {
  outline: 2px solid #0066cc;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.3);
  border-radius: 4px;
}

/* Estilo de foco para enlaces */
a:focus {
  outline: 2px dotted #0066cc;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Estilo de foco para campos de formulario */
input:focus, textarea:focus, select:focus {
  outline: 2px solid #0066cc;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

Estos estilos proporcionan indicadores claros y consistentes que se adaptan a diferentes tipos de elementos interactivos.

Uso de :focus-visible para indicadores de foco inteligentes

CSS moderno ofrece la pseudo-clase :focus-visible, que muestra el indicador de foco solo cuando el usuario navega con teclado, no cuando hace clic con el ratón:

/* Eliminar el contorno al hacer clic con el ratón */
:focus:not(:focus-visible) {
  outline: none;
}

/* Mostrar un contorno prominente al navegar con teclado */
:focus-visible {
  outline: 3px solid #4d90fe;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.5);
}

Este enfoque ofrece lo mejor de ambos mundos: mantiene la estética deseada para usuarios de ratón mientras proporciona indicadores claros para usuarios de teclado.

Implementación en componentes personalizados

Para componentes interactivos personalizados, debemos asegurarnos de que también muestren indicadores de foco adecuados:

<div class="custom-dropdown" tabindex="0" role="combobox">
  <span class="dropdown-label">Select an option</span>
  <ul class="dropdown-options">
    <li tabindex="-1">Option 1</li>
    <li tabindex="-1">Option 2</li>
    <li tabindex="-1">Option 3</li>
  </ul>
</div>

<style>
  .custom-dropdown:focus {
    outline: 2px solid #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
  }
  
  .dropdown-options li:focus {
    background-color: #e6f0ff;
    outline: 1px solid #0066cc;
  }
</style>

Este ejemplo muestra cómo aplicar indicadores de foco a un componente de menú desplegable personalizado.

Animaciones y transiciones para el foco

Las animaciones sutiles pueden hacer que los indicadores de foco sean más perceptibles sin resultar molestos:

a:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px #4d90fe;
  transition: box-shadow 0.2s ease-in-out;
}

button:focus {
  outline: none;
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}

Estas transiciones suaves hacen que el cambio de estado sea más evidente, ayudando a los usuarios a percibir cuándo un elemento recibe el foco.

Consideraciones de contraste para indicadores de foco

Es crucial asegurar que los indicadores de foco tengan suficiente contraste con el fondo y el elemento enfocado:

/* Indicador de foco adaptable según el fondo */
:focus {
  outline: 3px solid currentColor;  /* Usa el color del texto */
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);  /* Halo blanco semitransparente */
}

/* Para fondos claros */
.light-background :focus {
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);  /* Halo oscuro semitransparente */
}

Este enfoque garantiza que el indicador de foco sea visible independientemente del color de fondo.

Pruebas de indicadores visuales de foco

Para verificar la efectividad de tus indicadores de foco:

1. Desconecta el ratón y navega por tu sitio usando solo Tab, Shift+Tab y las teclas de flecha.
2. Comprueba que siempre puedes ver claramente qué elemento tiene el foco.
3. Verifica que el indicador de foco tenga suficiente contraste en todos los contextos.
4. Asegúrate de que el indicador sea visible en todos los tamaños de pantalla.

<!-- Ejemplo de estructura para probar la navegación por teclado -->
<header>
  <nav>
    <a href="#home">Home</a>
    <a href="#products">Products</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email">
    
    <button type="submit">Submit</button>
  </form>
</main>

Al navegar por esta estructura con Tab, cada elemento debería mostrar un indicador de foco claro y distintivo.

Compatibilidad con modos de alto contraste

Algunos usuarios utilizan modos de alto contraste en sus sistemas operativos, que pueden anular los estilos CSS. Para estos casos, es recomendable usar propiedades que se respeten en estos modos:

:focus {
  outline: 3px solid;  /* Sin especificar color */
  outline-offset: 2px;
  /* Evitar depender solo de box-shadow o background-color */
}

Este enfoque garantiza que los indicadores de foco sigan siendo visibles incluso en modos de alto contraste.

Implementación progresiva

Para sitios existentes, podemos implementar mejores indicadores de foco de forma progresiva:

1. Primero, asegúrate de no eliminar los indicadores predeterminados del navegador.
2. Luego, mejora los indicadores para elementos críticos como navegación y formularios.
3. Finalmente, implementa un sistema coherente de indicadores de foco para todo el sitio.

Los indicadores visuales de foco son un componente esencial de la accesibilidad web que beneficia a todos los usuarios. Al diseñarlos cuidadosamente, no solo mejoramos la accesibilidad sino también la usabilidad general del sitio, creando una experiencia más intuitiva y agradable para la navegación por teclado.

Atajos de teclado y accesskey

Los atajos de teclado permiten a los usuarios ejecutar acciones específicas rápidamente sin necesidad de navegar por toda la interfaz. Estos atajos son especialmente útiles para usuarios que dependen del teclado y para quienes buscan mayor eficiencia en su interacción con sitios web. HTML ofrece una forma nativa de implementar atajos de teclado mediante el atributo accesskey.

El atributo accesskey

El atributo accesskey permite asignar una tecla específica a un elemento HTML, creando un atajo de teclado que activa o enfoca dicho elemento. Este atributo puede aplicarse a cualquier elemento interactivo como enlaces, botones o controles de formulario.

<button accesskey="s">Save Document</button>
<a href="index.html" accesskey="h">Home</a>
<input type="text" id="search" accesskey="f" placeholder="Search...">

En este ejemplo, dependiendo del navegador y sistema operativo, el usuario podría presionar una combinación de teclas (como Alt+S en Windows) para activar el botón de guardar, Alt+H para ir a la página principal, o Alt+F para enfocar el campo de búsqueda.

Combinaciones de teclas por navegador y sistema operativo

La combinación de teclas para activar un accesskey varía según el navegador y sistema operativo:

• Windows:

• Chrome, Edge, Firefox: Alt + accesskey

• Internet Explorer: Alt + accesskey, luego Enter

• macOS:

• Chrome: Control + Option + accesskey

• Firefox: Control + Option + accesskey

• Safari: Control + Option + accesskey

• Linux:

• Chrome, Firefox: Alt + accesskey

Esta variabilidad representa uno de los principales desafíos al implementar atajos con accesskey, ya que los usuarios deben conocer la combinación específica para su navegador.

Mejores prácticas para implementar accesskey

Para implementar atajos de teclado efectivos mediante accesskey:

• Usa caracteres sencillos: Preferiblemente letras o números que sean fáciles de recordar y relacionados con la acción (como "s" para guardar).

• Evita conflictos: No uses teclas que ya estén asignadas a funciones del navegador (como F5 para recargar).

• Sé consistente: Mantén los mismos atajos en todo el sitio web.

• Documenta los atajos: Proporciona una página de ayuda o información sobre los atajos disponibles.

• Considera la internacionalización: Ten en cuenta que los usuarios pueden tener diferentes distribuciones de teclado.

<nav aria-label="Main navigation">
  <a href="/" accesskey="1">Home</a>
  <a href="/products" accesskey="2">Products</a>
  <a href="/services" accesskey="3">Services</a>
  <a href="/about" accesskey="4">About</a>
  <a href="/contact" accesskey="5">Contact</a>
</nav>

<div class="help-tooltip" tabindex="0">
  <span class="icon">?</span>
  <div class="tooltip-content">
    <h3>Keyboard Shortcuts</h3>
    <ul>
      <li><kbd>Alt+1</kbd>: Home page</li>
      <li><kbd>Alt+2</kbd>: Products</li>
      <li><kbd>Alt+3</kbd>: Services</li>
      <li><kbd>Alt+4</kbd>: About us</li>
      <li><kbd>Alt+5</kbd>: Contact</li>
    </ul>
  </div>
</div>

Este ejemplo muestra una navegación principal con atajos numéricos y un panel de ayuda que informa a los usuarios sobre los atajos disponibles.

Indicando visualmente los atajos de teclado

Es importante comunicar a los usuarios qué atajos de teclado están disponibles. Esto puede hacerse de varias formas:

• Subrayado de la letra: Subrayar la letra correspondiente al accesskey en el texto del elemento.
• Tooltips: Mostrar la combinación de teclas al pasar el cursor sobre el elemento.
• Etiqueta visual: Incluir la tecla en la interfaz junto al elemento.

<button accesskey="n">
  <span class="accesskey-hint">N</span>ew Document
</button>

<style>
  .accesskey-hint {
    text-decoration: underline;
    font-weight: bold;
  }
</style>

Alternativamente, podemos usar atributos title o tooltips personalizados:

<a href="/settings" accesskey="s" title="Settings (Alt+S)">
  Settings
</a>

<button accesskey="p" class="with-tooltip">
  Print
  <span class="tooltip">Shortcut: Alt+P</span>
</button>

Limitaciones del atributo accesskey

A pesar de su utilidad, el atributo accesskey tiene varias limitaciones importantes:

• Inconsistencia entre navegadores: Como vimos anteriormente, la combinación de teclas varía según el navegador y sistema operativo.

• Conflictos potenciales: Puede entrar en conflicto con atajos del navegador, extensiones o lectores de pantalla.

• Limitado a un solo carácter: Solo permite asignar una tecla por elemento, lo que limita las posibilidades.

• Descubribilidad: Los usuarios pueden no saber qué atajos están disponibles si no se comunican adecuadamente.

• Internacionalización: Algunos caracteres pueden no estar disponibles en todos los teclados.

Alternativas y complementos a accesskey

Debido a las limitaciones de accesskey, muchas aplicaciones web modernas implementan sistemas de atajos de teclado más avanzados mediante JavaScript:

<div id="editor" tabindex="0">
  <!-- Editor content -->
</div>

<script>
  const editor = document.getElementById('editor');
  
  editor.addEventListener('keydown', (event) => {
    // Ctrl+S para guardar
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      saveDocument();
    }
    
    // Ctrl+B para negrita
    if (event.ctrlKey && event.key === 'b') {
      event.preventDefault();
      applyBoldFormatting();
    }
    
    // Escape para salir del modo edición
    if (event.key === 'Escape') {
      exitEditMode();
    }
  });
  
  function saveDocument() {
    // Lógica para guardar el documento
    console.log('Document saved');
  }
  
  function applyBoldFormatting() {
    // Lógica para aplicar formato de negrita
    console.log('Bold formatting applied');
  }
  
  function exitEditMode() {
    // Lógica para salir del modo edición
    console.log('Edit mode exited');
  }
</script>

Este enfoque ofrece mayor flexibilidad y control sobre los atajos de teclado, permitiendo:

• Combinaciones de múltiples teclas (como Ctrl+Shift+S)
• Personalización por parte del usuario
• Manejo de conflictos
• Atajos contextuales que cambian según el estado de la aplicación

Implementando un sistema de atajos de teclado accesible

Para crear un sistema de atajos de teclado verdaderamente accesible:

• Proporciona múltiples métodos: Combina accesskey para funciones básicas con atajos JavaScript más avanzados.

• Permite personalización: Cuando sea posible, deja que los usuarios configuren sus propios atajos.

• Documenta claramente: Crea una página de ayuda o modal con todos los atajos disponibles.

• Evita conflictos: Verifica posibles conflictos con atajos comunes del navegador y tecnologías asistivas.

• Proporciona retroalimentación: Informa al usuario cuando un atajo ha sido activado.

<button id="keyboard-shortcuts-help" aria-label="Keyboard shortcuts help">
  <span class="icon">⌨️</span>
</button>

<dialog id="shortcuts-dialog">
  <h2>Keyboard Shortcuts</h2>
  
  <table>
    <thead>
      <tr>
        <th>Action</th>
        <th>Shortcut</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Save document</td>
        <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
      </tr>
      <tr>
        <td>Print</td>
        <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
      </tr>
      <tr>
        <td>Find in page</td>
        <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
      </tr>
      <!-- Más atajos -->
    </tbody>
  </table>
  
  <button id="close-dialog">Close</button>
</dialog>

<script>
  const helpButton = document.getElementById('keyboard-shortcuts-help');
  const dialog = document.getElementById('shortcuts-dialog');
  const closeButton = document.getElementById('close-dialog');
  
  helpButton.addEventListener('click', () => {
    dialog.showModal();
  });
  
  closeButton.addEventListener('click', () => {
    dialog.close();
  });
  
  // Atajo para mostrar la ayuda de atajos
  document.addEventListener('keydown', (event) => {
    if (event.key === '?' && event.shiftKey) {
      event.preventDefault();
      dialog.showModal();
    }
  });
</script>

Este ejemplo implementa un botón de ayuda que muestra un diálogo con los atajos de teclado disponibles, que también puede activarse presionando Shift+?.

Atajos de teclado para componentes específicos

Diferentes tipos de componentes pueden beneficiarse de atajos de teclado específicos:

• Editores de texto:

• Ctrl+B para negrita

• Ctrl+I para cursiva

• Ctrl+Z para deshacer

• Galerías de imágenes:

• Flechas izquierda/derecha para navegar

• Escape para cerrar la vista ampliada

• Aplicaciones de correo:

• C para componer nuevo mensaje

• R para responder

• F para reenviar

<div class="image-gallery" tabindex="0">
  <img src="image1.jpg" alt="Mountain landscape">
  <img src="image2.jpg" alt="Ocean sunset">
  <img src="image3.jpg" alt="Forest path">
  
  <div class="gallery-controls">
    <button class="prev-button" aria-label="Previous image">◀</button>
    <button class="next-button" aria-label="Next image">▶</button>
  </div>
</div>

<script>
  const gallery = document.querySelector('.image-gallery');
  let currentIndex = 0;
  
  gallery.addEventListener('keydown', (event) => {
    switch(event.key) {
      case 'ArrowLeft':
        event.preventDefault();
        showPreviousImage();
        break;
      case 'ArrowRight':
        event.preventDefault();
        showNextImage();
        break;
      case 'Escape':
        event.preventDefault();
        closeGallery();
        break;
    }
  });
  
  function showPreviousImage() {
    // Lógica para mostrar la imagen anterior
    console.log('Previous image');
  }
  
  function showNextImage() {
    // Lógica para mostrar la siguiente imagen
    console.log('Next image');
  }
  
  function closeGallery() {
    // Lógica para cerrar la galería
    console.log('Gallery closed');
  }
</script>

Consideraciones de accesibilidad para atajos de teclado

Al implementar atajos de teclado, es importante considerar:

• Usuarios con discapacidades motoras: Algunos usuarios pueden tener dificultades para presionar combinaciones de teclas complejas.

• Compatibilidad con lectores de pantalla: Evita conflictos con atajos comunes de tecnologías asistivas.

• Usuarios de teclados alternativos: Considera dispositivos de entrada especializados que pueden tener limitaciones.

• Usuarios de dispositivos móviles: Los atajos de teclado tradicionales pueden no ser aplicables en dispositivos táctiles.

Para abordar estas consideraciones:

• Ofrece múltiples formas de realizar las mismas acciones
• Permite desactivar o personalizar los atajos
• Asegúrate de que todas las funciones sean accesibles sin atajos
• Proporciona retroalimentación clara cuando se activa un atajo

Los atajos de teclado bien implementados mejoran significativamente la experiencia de usuario, especialmente para quienes dependen del teclado para navegar. Aunque el atributo accesskey tiene limitaciones, sigue siendo una herramienta útil cuando se combina con soluciones JavaScript más avanzadas y se implementa siguiendo las mejores prácticas de accesibilidad.