Diferencia entre revisiones de «Principio 2/2.1 Teclado Accesible/2.1.2-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.1_Controlar_desde_teclado
|wcag_pauta=2.1_Teclado_Accesible
|wcag_pauta_url=Principio_2/2.1_Controlar_desde_teclado
|wcag_pauta_url=Principio_2/2.1_Teclado_Accesible
|wcag_grupo=Interaccion
|wcag_grupo=Interaccion
|wcag_subgrupo=Foco_del_teclado
|wcag_subgrupo=Foco_del_teclado
Línea 41: Línea 41:
|wcag_objetivo=
|wcag_objetivo=
Evitar que los usuarios queden atrapados en un componente o sección de la página al navegar con teclado.   
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.
Permite recuperar el control y continuar el flujo de navegación.


|wcag_importancia=
|wcag_importancia=
Si el foco se bloquea, los usuarios que dependen del teclado no pueden seguir navegando, completar tareas ni salir del componente.   
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.
Esto puede provocar abandono de la página o imposibilidad total de uso.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G21: Evitar trampas de foco</li>
<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>F10: Fallos por bloquear el foco</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>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Probar navegación solo con teclado</li>
<li>Probar navegación solo con teclado</li>
Línea 60: Línea 64:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Navegar por toda la página con teclado.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Entrar en componentes interactivos (menús, pop-ups, sliders, iframes, componentes JS).</li>
Utilizar el teclado para desplazarse a lo largo de la página.
<li><span class="paso-badge">Paso 3.</span> Verificar que es posible salir usando solo el teclado (Tab, Shift+Tab, o indicación clara si requiere otra tecla).</li>
</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>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 73: Línea 81:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Una ventana modal accesible permite cerrarse con teclado (Esc o botón con foco) y devuelve el foco al elemento que la abrió.
<div class="accessibility-card">
Un iframe accesible permite entrar y salir con Tab/Shift+Tab.
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=
|wcag_otras_herramientas_evaluacion=
Prueba manual con teclado
<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 - 12:40 6 nov 2025

2.1.2-A. Sin trampas para el foco

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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

  1. Paso 1. Utilizar el teclado para desplazarse a lo largo de la página.
  2. 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

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

Comentarios

A continuación se muestran comentarios sobre el criterio 2.1.2-A. Sin trampas para el foco

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.1_Teclado_Accesible/2.1.2-A&oldid=3716»