01 · Concepto
Independencia del dispositivo
Una función es independiente del dispositivo cuando puede utilizarse sin depender exclusivamente de un mecanismo de entrada particular.
“Accesible por teclado” no significa que todas las personas utilicen un teclado físico. Muchos dispositivos alternativos generan las mismas órdenes que un teclado: pulsadores, teclados en pantalla, control por voz y otras tecnologías pueden avanzar el foco o activar un control mediante esa interfaz.
Principio esencial
La persona debe poder elegir cómo interactuar. El diseño no debe obligarla a señalar con precisión, mantener presionado un botón, arrastrar un elemento o ver la ubicación del puntero.
Dispositivo de entrada
Herramienta física o virtual que introduce órdenes: teclado, pantalla táctil, ratón, pulsador o sistema de seguimiento ocular.
Modalidad de interacción
Forma de realizar la acción: escribir, tocar, hacer clic, dictar, desplazarse por foco o seleccionar mediante barrido.
02 · Modalidades
No existe una única forma de navegar
Una misma persona puede cambiar de modalidad según su capacidad, el dispositivo o el contexto en el que se encuentre.
Teclado y equivalentes
La tecla Tab mueve el foco, las flechas recorren algunos componentes y Enter o Espacio activan controles.
Puntero y tacto
Ratón, panel táctil, lápiz o pantalla táctil requieren objetivos suficientemente grandes y acciones que no dependan de movimientos de gran precisión.
Voz
El reconocimiento de voz permite dictar y activar controles por su nombre. La etiqueta visible debe coincidir con el nombre que recibe la tecnología.
Pulsadores y barrido
Uno o varios pulsadores permiten avanzar por opciones y seleccionar la opción activa, normalmente a través de la interfaz de teclado.
Seguimiento ocular
La mirada controla el puntero y una permanencia o un gesto confirma la selección. Los objetivos pequeños o próximos aumentan los errores.
Lector de pantalla
Combina salida de voz o braille con órdenes de teclado o gestos. Necesita controles semánticos, nombres claros y estados programáticos.
03 · Personas y contextos
¿A quién beneficia?
La interacción flexible es esencial para algunas personas y útil para muchas otras. No debe asociarse a un único diagnóstico.
- Personas con movilidad o destreza reducida: pueden tener dificultad para controlar un puntero, mantenerlo presionado o alcanzar objetivos pequeños.
- Personas ciegas o con baja visión: suelen navegar mediante teclado, gestos y lectores de pantalla, sin seguir visualmente el puntero.
- Personas con temblores o movimientos involuntarios: necesitan objetivos amplios, separación suficiente y acciones que puedan cancelarse.
- Personas con lesiones temporales: una mano inmovilizada puede obligar a cambiar de ratón a teclado, voz o tacto.
- Cualquier persona en una situación limitante: una pantalla rota, un transporte en movimiento o la falta de una superficie para usar el ratón cambian la forma de interactuar.
04 · Barreras frecuentes
Señales de que el diseño depende demasiado del ratón
05 · Criterios de diseño
Qué debe comprobarse
Estos criterios convierten el principio general en decisiones observables de diseño y desarrollo.
Funcionalidad completa mediante teclado
Todas las acciones deben poder alcanzarse y ejecutarse sin utilizar un puntero. Esto incluye menús, diálogos, controles multimedia y componentes personalizados.
Relacionado: WCAG 2.1.1 · Nivel A
Salida predecible de cada componente
Si el foco entra en un componente, también debe poder salir utilizando métodos estándar. Cuando se requiere una orden especial, debe explicarse antes de entrar.
Relacionado: WCAG 2.1.2 · Nivel A
Orden y visibilidad del foco
El recorrido debe conservar el significado y la operabilidad. El indicador de foco debe verse y no quedar completamente oculto por cabeceras, paneles o contenido fijo.
Relacionado: WCAG 2.4.3, 2.4.7 y 2.4.11
Alternativa a los movimientos de arrastre
Si existe arrastrar y soltar, debe ofrecerse una alternativa de puntero simple, como botones para mover, seleccionar un destino o introducir un valor.
Relacionado: WCAG 2.5.7 · Nivel AA
Objetivos fáciles de activar
Como referencia WCAG 2.2 AA, el objetivo debe medir al menos 24 × 24 píxeles CSS o disponer de separación suficiente, considerando las excepciones del criterio. Para acciones importantes, conviene superar ese mínimo.
Relacionado: WCAG 2.5.8 · Nivel AA
06 · Ejemplo aplicado
De una tarjeta clicable a una interacción robusta
Problema
Un contenedor que solo escucha el clic
<div onclick="abrir()">
Consultar informe
</div>- No recibe foco de forma nativa.
- No comunica que ejecuta una acción.
- No responde automáticamente a Enter o Espacio.
Solución
Usar el elemento correspondiente
<button type="button">
Consultar informe
</button>- Recibe foco en el orden normal.
- Comunica su función a tecnologías de asistencia.
- Incluye el comportamiento esperado de teclado.
Decisión clave: si la acción lleva a otra ubicación, utiliza un enlace; si cambia el estado o ejecuta una operación en la página, utiliza un botón.
07 · Práctica
Comprueba lo aprendido
Las actividades son un refuerzo del contenido anterior. Puedes realizarlas con teclado o con el mecanismo de entrada que utilices habitualmente.
Actividad 1: recorre una interfaz sin ratón
Usa Tab para avanzar, Mayús + Tab para retroceder y Enter o Espacio para activar los controles.
Objetivo: visita los tres controles en orden y activa el botón final.
Pista: un enlace lleva a un lugar; un botón ejecuta una acción.
Actividad 2: elige el elemento correcto
Decide qué elemento HTML comunica mejor la intención de cada caso.
Actividad 3: ofrece una alternativa a arrastrar
Ordena el proceso con los botones “Subir” y “Bajar”. Esta operación puede realizarse sin mantener presionado ni arrastrar ningún elemento.
- Publicar la interfaz
- Probarla con teclado y tecnologías de asistencia
- Elegir controles nativos y definir la interacción
08 · Ficha rápida
Métodos de interacción en cinco preguntas
- ¿Funciona sin ratón?
- Recorre y activa toda la interfaz mediante teclado.
- ¿Se puede salir?
- Entra y abandona cada componente con métodos convencionales.
- ¿Se distingue el foco?
- Comprueba su orden, visibilidad y que no quede oculto.
- ¿Hay que arrastrar?
- Ofrece otra forma de completar la misma acción.
- ¿Es fácil acertar?
- Revisa el tamaño y la separación de los objetivos.
Resultado
Progreso de las actividades
Completa las tres actividades para terminar el tutorial.