Técnica Scripts de cliente WCAG 2.2
SCR31Usar scripts para cambiar el color de fondo o el borde del elemento que tiene el foco
En resumen
Quien navega con teclado necesita ver en todo momento qué elemento tiene el foco. Esta técnica usa JavaScript para aplicar estilos CSS (por ejemplo, un fondo amarillo o un borde destacado) cuando un elemento recibe el foco y restaurarlos cuando lo pierde. Resulta útil para reforzar el indicador del foco en cualquier navegador con scripts y CSS, aunque no admita la pseudoclase :focus.
Aplicabilidad
HTML, CSS, scripts
Descripción
El propósito de esta técnica es permitir que el autor utilice JavaScript para aplicar CSS, con el fin de hacer el indicador del foco más visible de lo que sería normalmente. Cuando un elemento recibe el foco, se cambia su color de fondo o su borde para distinguirlo visualmente. Cuando el elemento pierde el foco, recupera su estilo habitual. Esta técnica puede usarse en cualquier agente de usuario HTML compatible con scripts y CSS, independientemente de que admita o no la pseudoclase :focus.
Ejemplos
En este ejemplo, cuando el enlace recibe el foco, su fondo se vuelve amarillo. Cuando pierde el foco, se elimina el amarillo. Tenga en cuenta que, si el enlace tuviera un color de fondo de partida, en el script se usaría ese color en lugar de "".
<script>function toggleFocus(el) {
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
</script>
...
<a href="example.html"
onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...Pruebas
Procedimiento
- Recorrer con la tecla de tabulación cada elemento de la página.
- Comprobar que el indicador del foco es visible.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR31 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
