Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G21Evitar que el foco del teclado quede atrapado en una parte de la página

Nombre oficial en el W3C: Garantizar que los usuarios no quedan atrapados en el contenido

En pocas palabras

Quien navega con el teclado debe poder entrar y salir de cualquier componente de la página. Si el foco entra en un reproductor, un mapa o un editor y no puede salir con el teclado, la persona queda atrapada. La solución es que el tabulador siga adelante o que haya una tecla de salida explicada.

Por qué es importante

Muchas personas no usan ratón: personas ciegas con lector de pantalla, personas con temblor o movilidad reducida, o quien usa un pulsador. Se mueven por la página con la tecla Tab.

El foco es la marca que indica dónde actúa el teclado. Si entra en un componente y no sale, la persona ya no puede usar el resto de la página. Pasa a menudo con vídeos incrustados, mapas, editores de texto y contenidos en iframe.

Cómo se hace

  1. Lo ideal: al llegar al último elemento del componente, Tab lleva al siguiente elemento de la página. Mayús + Tab debe permitir volver atrás.
  2. Si el componente usa Tab para otra cosa, ofrezca otra tecla para salir, como Esc. Por ejemplo, un editor que usa Tab para sangrar el texto.
  3. Explique esa tecla de forma accesible, antes de entrar o dentro del componente: «Pulse Esc para salir del editor».
  4. Una ventana modal puede retener el foco mientras está abierta. Pero debe cerrarse con Esc o con un botón «Cerrar» alcanzable con el teclado.
  5. Si un complemento o un servicio de terceros atrapa el foco y no se puede arreglar, sustitúyalo por otro.

Cómo comprobarlo

  1. Recorra toda la página solo con Tab y Mayús + Tab, sin tocar el ratón.
  2. Entre en cada componente incrustado: vídeos, mapas, chats, editores, calendarios y ventanas modales.
  3. Compruebe que puede salir de cada uno y seguir hacia delante y hacia atrás.
  4. Si la salida usa otra tecla, compruebe que funciona y que está explicada en la página.
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G21 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Todas las tecnologías que admitan un funcionamiento interactivo.

Descripción

El objetivo de esta técnica es garantizar que los usuarios de teclado no quedan atrapados en un subconjunto del contenido del que solo se puede salir con un ratón o un dispositivo apuntador. Un ejemplo habitual es el contenido presentado mediante complementos (plug-ins). Los complementos son agentes de usuario que presentan contenido dentro de la ventana del agente de usuario anfitrión y responden a todas las acciones del usuario que se producen mientras el complemento tiene el foco. Si el complemento no proporciona un mecanismo de teclado para devolver el foco a la ventana principal, los usuarios que necesitan utilizar el teclado pueden quedar atrapados en el contenido del complemento.

Este problema puede evitarse utilizando uno de los siguientes mecanismos para ofrecer a los usuarios una forma de salir del subconjunto del contenido:

  • Garantizar que la función de teclado para avanzar el foco dentro del contenido (habitualmente la tecla Tab) sale del subconjunto del contenido una vez que alcanza la última posición de navegación.
  • Proporcionar una función de teclado para sacar el foco del subconjunto del contenido. Asegúrese de documentar esta función de forma accesible dentro del propio subconjunto.
  • Si la tecnología utilizada en el subconjunto del contenido proporciona de forma nativa una orden de teclado del tipo «volver al elemento padre», documentar dicha orden antes de que el usuario entre en el complemento, de modo que sepa cómo salir de nuevo.

Si el autor utiliza una tecnología que permite a los usuarios entrar en el subcontenido con el teclado pero que, de forma predeterminada, no les permite salir de él con el teclado (es decir, no es una función de la tecnología de contenido web ni de sus agentes de usuario), entonces, para aplicar esta técnica, el autor tendría que incorporar esa capacidad en su contenido o bien no utilizar dicha tecnología.

Ejemplos

  • Una vez que el usuario entra con la tecla Tab en un applet, las siguientes pulsaciones de Tab las gestiona el applet, lo que impide a la persona salir tabulando. Sin embargo, el applet está diseñado de modo que devuelve el foco del teclado a la ventana principal cuando la persona termina de recorrer con Tab la secuencia de tabulación del applet.
  • Una página que incluye contenido no compatible con la accesibilidad contiene instrucciones sobre cómo devolver el foco con el teclado al contenido compatible con la accesibilidad. Las instrucciones preceden al contenido no compatible con la accesibilidad.
  • La información de ayuda disponible desde el contenido no compatible con la accesibilidad documenta cómo devolver el foco con el teclado al contenido compatible con la accesibilidad, y se puede acceder a dicha información de ayuda mediante el teclado.
  • La información de ayuda disponible para la página web documenta cómo mover el foco con el teclado desde el contenido no compatible con la accesibilidad hasta el contenido compatible con la accesibilidad, y se puede acceder a dicha información de ayuda mediante el teclado.

Pruebas

Procedimiento

  1. Recorrer el contenido con la tecla Tab de principio a fin.
  2. Comprobar que el foco del teclado no queda atrapado en ninguna parte del contenido.
  3. Si el foco del teclado parece quedar atrapado en alguna parte del contenido, comprobar que hay disponible información de ayuda que explique cómo salir de ese contenido y que se puede acceder a ella mediante el teclado.

Resultados esperados

  • La comprobación n.º 2 es falsa.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G21 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.