Principio 2/2.1 Teclado Accesible/2.1.2-A
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.1_Teclado_Accesible/2.1.1-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
Explicación del problema detectado:
Este principio respeta el foco que se visualiza o que el usuario sitúa en pantalla mientras usa el tabuladorque se ve afectado por elementos que lo tapan lo que hace que sea complicado verlo.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con visibilidad reducida
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
Explicación de la solución aplicada:
Se pueden ver todos los elementos sin problema cuidando que los elementos no se superpongan.
2.1.2-A. Sin trampas para el foco
- Nivel: A
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.1_Teclado_Accesible
- Grupo: Interaccion
- Subgrupo: Foco_del_teclado
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Motriz –
Barrera grave
-
Visual total –
Barrera grave
Enunciado del criterio (Observatorio de Accesibilidad Web)
- El foco del teclado no debe quedar bloqueado en ningún elemento de la página.
Comprensión del criterio
Descripción resumida
El usuario debe poder entrar y salir de cualquier componente interactivo usando solo el teclado, sin necesidad de ratón.
Si un control requiere otra acción para salir, debe estar indicada.Objetivo
Importancia de cumplir el criterio
Referencias WCAG
Recursos de apoyo
- Probar navegación solo con teclado
- Asegurar que menús, diálogos y elementos interactivos permiten salir con Tab/Shift+Tab
- Informar si se necesita otra tecla para salir (por ejemplo, Escape)
Evaluación del criterio
Tipo de evaluación
Procedimiento de evaluación
- Paso 1. Utilizar el teclado para desplazarse a lo largo de la página.
- Paso 2. Verificar que el foco pasa de un elemento al siguiente utilizando solamente el teclado y que no se bloquea.
Resultado esperado
Ejemplo ilustrativo
El usuario puede tabular libremente por todos los elementos y continuar su recorrido sin quedar atrapado.
<article>
<H1>Titulo informativo sobre el contenido</H1>
<section aria-label="Información adicional">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Se muestra un <a href="#">enlace a una página</a>.</p>
</section>
</article>
Otras herramientas de evaluación
- Navegación por teclado: recorrer la página con Tab y Shift + Tab para confirmar que el foco puede entrar y salir de todos los componentes sin quedar atrapado.
- Pruebas en componentes interactivos: comprobar especialmente menús, modales, carruseles, iframes, widgets y elementos personalizados para asegurar que el foco se puede mover libremente.
- Inspección del navegador: verificar que los scripts no bloquean el foco ni lo fuerzan a permanecer en un elemento sin opción de salida.
- Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar secuencialmente y confirmar que no se producen ciclos de foco ni zonas inaccesibles con teclado.
Ejemplos accesibles y no accesibles creados por alumnos
| 1 de enero de 2026 | 1 de octubre de 2025 |
|---|
| Última modificación | |
|---|---|
| 2526UdL2.1.2- A-001 | 17 febrero 2026 18:11:44 |
| 2526UPSA2.1.2-A-001 | 19 diciembre 2025 18:51:12 |
| 2526UFV2.1.2-A-000 | 19 diciembre 2025 10:13:43 |
Comentarios
A continuación se muestran comentarios sobre el criterio 2.1.2-A. Sin trampas para el foco
