Diferencia entre revisiones de «Principio 2/2.1 Teclado Accesible/2.1.2-A»
De WCAG Wiki
Página creada con «== '''2.1.2 A-El foco del teclado no debe quedar bloqueado en ningún elemento de la página.''' == '''A) EJEMPLO ACCESIBLE:''' '''B) EJEMPLO NO ACCESIBLE:'''» |
Sin resumen de edición |
||
| (No se muestran 7 ediciones intermedias de otro usuario) | |||
| Línea 1: | Línea 1: | ||
== | {{ActividadWCAG | ||
|id_criterio=2.1.1 - Teclado (Nivel: A) | |||
|id_subcriterio=2.1.1-A | |||
|id_universidad=UdL | |||
|curso_academico=2025-26 | |||
|enlace=https://wikiwcag.udl.cat/Principio_2/2.1_Teclado_Accesible/2.1.1-A | |||
|noa_barrera_evidencia_img=2025 26 UdL 2.1.1-A NOA2.jpg | |||
|noa_barrera_explicacion=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. | |||
|noa_barrera_usuarios=Personas con visibilidad reducida | |||
|acc_barrera_evidencia_img=2025 26 UdL 2.1.1-A ACC2.jpg | |||
|acc_barrera_explicacion=Se pueden ver todos los elementos sin problema cuidando que los elementos no se superpongan. | |||
}} | |||
{{CriterioWCAG | |||
|id_wcag_criterio=2.1.2 | |||
|id_wcag_subcriterio=2.1.2-A | |||
|wcag_titulo_criterio=2.1.2-A. Sin trampas para el foco | |||
|wcag_nivel=A | |||
|wcag_version=2.0 | |||
|wcag_principio=2_Operable | |||
|wcag_principio_url=Principio_2 | |||
|wcag_pauta=2.1_Teclado_Accesible | |||
|wcag_pauta_url=Principio_2/2.1_Teclado_Accesible | |||
|wcag_grupo=Interaccion | |||
|wcag_subgrupo=Foco_del_teclado | |||
''' | |wcag_discapacidades= | ||
<li class="discapacidad-item"> | |||
[[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> – | |||
<span class="gravedad gravedad-grave">Barrera grave</span> | |||
</li> | |||
<li class="discapacidad-item"> | |||
[[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | |||
<span class="gravedad gravedad-grave">Barrera grave</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad motriz]] | |||
[[Categoría:Discapacidad visual total]] | |||
|wcag_texto_criterioOAW= | |||
El foco del teclado no debe quedar bloqueado en ningún elemento de la página. | |||
|wcag_descripcion_resumida= | |||
Este criterio garantiza que el foco de teclado no quede atrapado en ningún elemento. | |||
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. | |||
|wcag_objetivo= | |||
Evitar que los usuarios queden atrapados en un componente o sección de la página al navegar con teclado. | |||
Permite recuperar el control y continuar el flujo de navegación. | |||
|wcag_importancia= | |||
Si el foco se bloquea, los usuarios que dependen del teclado no pueden seguir navegando, completar tareas ni salir del componente. | |||
Esto puede provocar abandono de la página o imposibilidad total de uso. | |||
|wcag_referencias= | |||
<ul> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G21 G21: Ensuring that users are not trapped in content]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F10 F10: Failure due to combining multiple content formats in a way that traps users inside one format type]</span></li> | |||
</ul> | |||
|wcag_recursos= | |||
<strong> Consejos </strong> | |||
<ul> | |||
<li>Probar navegación solo con teclado</li> | |||
<li>Asegurar que menús, diálogos y elementos interactivos permiten salir con Tab/Shift+Tab</li> | |||
<li>Informar si se necesita otra tecla para salir (por ejemplo, Escape)</li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Manual | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Utilizar el teclado para desplazarse a lo largo de la página. | |||
</li> | |||
<li><span class="paso-badge">Paso 2.</span> | |||
Verificar que el foco pasa de un elemento al siguiente utilizando solamente el teclado y que no se bloquea. | |||
</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
El foco del teclado puede entrar y salir de cualquier componente sin quedar atrapado. | |||
|wcag_ejemplo_evaluacion= | |||
<div class="accessibility-card"> | |||
El usuario puede tabular libremente por todos los elementos y continuar su recorrido sin quedar atrapado. | |||
<pre class="wcag-codigo-html"> | |||
<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> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>'''Navegación por teclado''': recorrer la página con <kbd>Tab</kbd> y <kbd>Shift + Tab</kbd> para confirmar que el foco puede entrar y salir de todos los componentes sin quedar atrapado.</li> | |||
<li>'''Pruebas en componentes interactivos''': comprobar especialmente menús, modales, carruseles, iframes, widgets y elementos personalizados para asegurar que el foco se puede mover libremente.</li> | |||
<li>'''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.</li> | |||
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) navegar secuencialmente y confirmar que no se producen ciclos de foco ni zonas inaccesibles con teclado.</li> | |||
</ul> | |||
}} | |||
Revisión actual - 22:29 19 feb 2026
Edición de la página como formulario
1. Información básica
Id del criterio: 2.1.1 - Teclado (Nivel: A)
Título del subcriterio: 2.1.1-A
Universidad participante: UdL
Curso académico: 2025-26
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:
<thead><th scope="col" id="c_A2"...
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:
No se ha proporcionado código.
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
Este criterio garantiza que el foco de teclado no quede atrapado en ningún elemento.
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
Evitar que los usuarios queden atrapados en un componente o sección de la página al navegar con teclado.
Permite recuperar el control y continuar el flujo de navegación.
Importancia de cumplir el criterio
Si el foco se bloquea, los usuarios que dependen del teclado no pueden seguir navegando, completar tareas ni salir del componente.
Esto puede provocar abandono de la página o imposibilidad total de uso.
Referencias WCAG
Recursos de apoyo
Consejos
- 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
Evaluación Manual
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
El foco del teclado puede entrar y salir de cualquier componente sin quedar atrapado.
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
Loading comments...
