2.1.1 Teclado
Criterio de éxito oficial
Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir tiempos específicos para pulsaciones de teclas individuales, excepto cuando la función subyacente requiere una entrada que depende de la trayectoria del movimiento del usuario y no solo de los puntos finales.
Nota 1: La excepción se refiere a la función subyacente, no a la técnica de entrada. Si se usa escritura a mano para introducir texto, la función subyacente (entrada de texto) no depende de la trayectoria — por lo que debe tener alternativa de teclado.
Nota 2: Esto no prohíbe ni desalienta el uso de ratón. El requisito es que exista un equivalente de teclado.
¿Qué es?
La mayoría de las funciones de una página web deben poder usarse solo con el teclado. Si alguien puede realizar una acción con ratón, tacto o gesto, también debería poder hacerla con el teclado. Esto incluye navegar a todo el contenido, activar botones y enlaces, completar formularios, usar controles como sliders o menús desplegables, y reproducir vídeos.
Cuando el contenido es operable desde el teclado, es accesible para personas invidentes, personas con temblores en las manos, y quienes usan dispositivos alternativos como software de entrada de voz, dispositivos de «soplar y aspirar», teclados en pantalla o software de escaneo — todos emulan una interfaz de teclado.
Navegar adelante
Mueve el foco al siguiente elemento interactivo. Shift+Tab retrocede.
Activar
Activa enlaces, botones y envía formularios. Equivale al clic del ratón.
Seleccionar
Activa botones, marca casillas y activa/desactiva controles.
Navegar dentro
Se mueve entre opciones de menús, pestañas, radios y sliders.
Orden de tabulación en una página web
Excepción: entrada por trayectoria
La única excepción es cuando la función subyacente requiere una entrada que depende de la trayectoria del movimiento del usuario (no solo de los puntos de inicio y fin). Esto se refiere a funciones como el dibujo a mano alzada o la pintura, donde la ruta del movimiento es parte esencial de la acción.
¿Requiere teclado o está exceptuada?
Solo puntos finales
La función depende del destino, no de la ruta.
- Hacer clic en botones/enlaces
- Arrastrar y soltar objetos
- Redimensionar ventanas
- Entrada de texto a mano
Depende de la trayectoria
La ruta del movimiento es esencial para la función.
- Dibujo a mano alzada
- Pintura con acuarela
- Simulador de vuelo en tiempo real
Importante
El uso de MouseKeys (control del cursor con teclado numérico) no satisface este criterio — es un emulador de ratón, no un equivalente de teclado para la aplicación.
¿Por qué es importante?
Algunos usuarios no pueden usar un ratón. Pueden utilizar un teclado convencional o diferentes tecnologías de asistencia — software de entrada de voz, dispositivos de sorber y soplar, teclados en pantalla o software de escaneo — que emulan una interfaz de teclado.
Si toda la funcionalidad de una página está disponible por teclado, todos pueden interactuar con el contenido. De lo contrario, algunas personas no podrán completar formularios, reproducir vídeos ni realizar tareas básicas. La accesibilidad del teclado es uno de los pilares fundamentales de la accesibilidad web.
¿Quién se ve afectado?
Personas ciegas: No pueden usar dispositivos que requieren coordinación ojo-mano. Dependen completamente del teclado y lectores de pantalla.
Personas con temblores: Les resulta muy difícil usar un ratón con precisión. Un teclado (o teclado alternativo) es mucho más manejable.
Usuarios de dispositivos alternativos: Software de voz, dispositivos de sorber y soplar, y software de escaneo emulan un teclado. Si el contenido no es accesible por teclado, estos dispositivos no funcionan.
Cómo implementar 2.1.1
Prueba todo con el teclado
Comienza probando cada parte de tu sitio solo con el teclado: Tab para avanzar a través de los elementos interactivos, Shift+Tab para moverse hacia atrás, Enter o Espacio para activar enlaces y botones, y las teclas de flecha para navegar menús, sliders o pestañas. Si no puedes alcanzar u operar algo con el teclado, necesita reparación.
Usa HTML semántico
La forma más sencilla y fiable es usar elementos HTML semánticos nativos. Los elementos como <a href="...">, <button>, <input>, <select> y <textarea> son accesibles por teclado de forma predeterminada.
<!-- Estos elementos son accesibles por teclado automáticamente -->
<a href="/productos">Ver productos</a>
<button type="submit">Enviar formulario</button>
<input type="text" name="email" />
<select name="pais">
<option>España</option>
</select>Componentes personalizados con ARIA
Si creas componentes interactivos personalizados y no puedes usar elementos nativos, añade manualmente la compatibilidad con teclado: usa tabindex="0" para que elementos no enfocables reciban foco, gestiona el foco con JavaScript y soporta eventos de teclado (Enter, Espacio, flechas).
<!-- Solo cuando no puedes usar <button> nativo -->
<div role="button"
tabindex="0"
aria-pressed="false">
Activar notificaciones
</div>Práctica recomendada
Siempre prefiere controles HTML nativos. Los componentes personalizados con ARIA son una alternativa, no la primera opción.
Ejemplos prácticos
Ejemplo 1 Programa de dibujo con teclado
Un programa de dibujo permite crear, dimensionar, posicionar y rotar objetos desde el teclado. Aunque soporta ratón, todas las funciones de manipulación de objetos tienen equivalente de teclado.
Ejemplo 2 Arrastrar y soltar con alternativa
Una aplicación que utiliza arrastrar y soltar también admite «cortar» y «pegar» o controles de formulario para mover objetos, permitiendo que los usuarios de teclado realicen la misma función sin ratón.
Excepción Pintura con acuarela
Un programa de pintura con acuarela es una excepción legítima porque las pinceladas varían según la velocidad y duración de los movimientos — la trayectoria es parte esencial de la función subyacente.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G202 | Garantizar el control del teclado para todas las funciones | Suficiente |
| H91 | Uso de controles y enlaces de formularios HTML nativos | Suficiente |
| G90 | Proporcionar controladores de eventos activados por teclado | Suficiente |
| SCR20 | Uso del teclado y otras funciones específicas del dispositivo | Suficiente |
| SCR35 | Hacer acciones accesibles por teclado mediante onclick de anclas y botones | Suficiente |
| SCR2 | Uso de controladores de eventos de teclado y mouse redundantes | Suficiente |
Errores comunes
Criterios de éxito relacionados
- 2.1.2 Sin trampa de teclado — Garantiza que el foco nunca quede atrapado dentro de un componente.
- 2.4.3 Orden de enfoque — El orden de tabulación debe ser lógico e intuitivo.
- 2.4.7 Foco visible — El indicador de foco del teclado debe ser visible.