Técnica Técnicas generales WCAG 2.2
G149Usar controles estándar que el navegador resalta al recibir el foco
Nombre oficial en el W3C: Usar componentes de interfaz de usuario que el agente de usuario resalta al recibir el foco
En pocas palabras
Cuando se navega con el teclado, el elemento activo (el que tiene el foco) debe verse. Los navegadores ya lo marcan en enlaces, botones y campos estándar, con un contorno o un cursor parpadeante. Usar esos controles y no quitar esa marca basta para cumplir.
Por qué es importante
Muchas personas navegan con el teclado: personas con movilidad reducida, usuarios de lector de pantalla con algo de visión o quien prefiere no usar el ratón.
Sin una marca visible, no saben dónde están. Es como escribir sin ver el cursor: pulsan Intro sin saber qué enlace o botón van a activar.
Cómo se hace
- Use elementos HTML estándar:
aconhref,button,input,select. - No elimine el contorno de foco con
outline: noneooutline: 0sin poner otro estilo visible en su lugar. - Si crea controles propios con
divospan, el navegador puede no marcarlos bien. En ese caso, añada un estilo de foco con:focus-visible. - Revise que el fondo o los colores de la web no hagan invisible el contorno del navegador.
Cómo comprobarlo
- Recorra la página con la tecla Tab (y Mayús + Tab para volver).
- Compruebe que cada enlace, botón y campo muestra alguna marca visible al recibir el foco.
- En los campos de texto, compruebe que aparece el cursor parpadeante.
- Busque en el CSS reglas con
outline: noney confirme que hay un estilo alternativo.
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 G149 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 con resaltado del foco proporcionado por el agente de usuario.
Descripción
El objetivo de esta técnica es asegurar que el usuario pueda identificar visualmente el componente que tiene el foco apoyándose en la compatibilidad del agente de usuario. Es habitual que los agentes de usuario resalten de alguna manera los controles estándar cuando reciben el foco. Los agentes de usuario conformes con las UAAG lo hacen cuando satisfacen el punto de verificación 10.2, «Highlight selection, content focus, enabled elements, visited links» (resaltar la selección, el foco del contenido, los elementos habilitados y los enlaces visitados). Cuando los autores utilizan controles estándar para los que el agente de usuario ofrece esta compatibilidad, los usuarios conocen la ubicación del foco de una forma estándar y predecible.
Ejemplos
- Cuando los campos de entrada de texto de HTML reciben el foco, los navegadores muestran una barra vertical parpadeante en el punto de inserción del campo de texto.
- Cuando los enlaces de HTML reciben el foco, quedan rodeados por un rectángulo de puntos que resalta el foco.
Pruebas
Procedimiento
Para cada componente enfocable de la página web:
- Situar el foco en el control
- Comprobar si el agente de usuario ha resaltado el control de alguna manera
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
- User Agent Accessibility Guidelines 10.2: Highlight selection, content focus, enabled elements, visited links (Pautas de accesibilidad para agentes de usuario, punto 10.2: resaltar la selección, el foco del contenido, los elementos habilitados y los enlaces visitados)
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.
Basado en la técnica G149 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.