Técnica CSS WCAG 2.2
C15Usar CSS para cambiar la presentación de un componente de la interfaz de usuario cuando recibe el foco
En resumen
Esta técnica explica cómo usar las pseudoclases :focus y :hover de CSS para que los enlaces, botones y campos cambien de aspecto (por ejemplo, de color de fondo) cuando reciben el foco del teclado o cuando el puntero pasa sobre ellos. Así quienes navegan con teclado saben en todo momento dónde están y qué elementos son interactivos. Úsela en cualquier página con elementos que puedan recibir el foco.
Aplicabilidad
CSS, HTML
Descripción
El objetivo de esta técnica es mostrar cómo puede mejorarse la apariencia visual mediante hojas de estilo para proporcionar una respuesta visual cuando un elemento interactivo tiene el foco o cuando el usuario pasa sobre él con un dispositivo apuntador. Resaltar el elemento que tiene el foco o sobre el que se pasa el puntero puede aportar información, como el hecho de que el elemento es interactivo o cuál es la extensión del elemento interactivo.
La respuesta visual puede proporcionarse mediante más de un modo. Normalmente se consigue pasando el ratón sobre el elemento o llegando a él con la tecla de tabulación del teclado.
Ejemplos
Elementos de enlace
En este ejemplo se han aplicado indicadores del foco del ratón y del teclado a los elementos de enlace. Se ha usado CSS para aplicar un color de fondo cuando los elementos de enlace reciben el foco.
Este es el contenido que se va a mostrar:
<nav id="main-nav">
<ul>
<li>Home</li>
<li><a href="/services">Services</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/demos">Demos</a></li>
<li><a href="/about-us">About us</a></li>
<li><a href="/contact-us">Contact us</a></li>
<li><a href="/links">Links</a></li>
</ul>
<nav>Este es el CSS que cambia el color de fondo de los elementos anteriores cuando reciben el foco del ratón o del teclado:
#main-nav a:hover, #main-nav a:active, #main-nav a:focus-visible {
background-color: #DCFFFF;
color:#000066;
}Resaltar los elementos que reciben el foco
En este ejemplo, la pseudoclase :focus se usa para cambiar el estilo aplicado a los campos de entrada cuando reciben el foco, modificando el color de fondo.
<!doctype html>
<html lang="en">
<head>
<style>
input[type=text]:focus-visible {
outline:2px solid #0054AE;
outline-offset:2px;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color:#1E2EB8;
color:#FFF;
}
</style>
</head>
<body>
<form>
<div>
<label for="fname">Name: </label>
<input autocomplete="name" type="text" name="fname" id="fname">
</div>
<div>
<input type="radio" name="sex" value="male" id="sm">
<label for="sm">Male</label>
</div>
<div>
<input type="radio" name="sex" value="female" id="sf">
<label for="sf">Female</label>
</div>
</form>
</body>
</html>Ejemplo funcional de este código: Ejemplo de resaltado de los elementos que reciben el foco.
Pruebas
Procedimiento
Para cada elemento que pueda recibir el foco:
- Con el teclado, llegar al componente mediante la tecla de tabulación.
- Comprobar que el indicador del foco cambia de color.
- Comprobar que el indicador del foco desaparece cuando el componente pierde el foco.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Recursos
- CSS Selectors Level 3: 6.6.1 Dynamic pseudo-classes (pseudoclases dinámicas)
- CSS Selectors Level 3: 8.3.1. Next-sibling combinator (combinador de hermano siguiente)
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 C15 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.
