Técnica CSS WCAG 2.2
C15Cambiar con CSS el aspecto de enlaces y controles cuando reciben el foco
Nombre oficial en el W3C: Usar CSS para cambiar la presentación de un componente de la interfaz de usuario cuando recibe el foco
En pocas palabras
Quien navega con el teclado necesita ver en todo momento dónde está. Esta técnica usa CSS para resaltar el enlace, botón o campo que tiene el foco, con un cambio de fondo, un borde o un contorno. El mismo resalte puede aplicarse al pasar el ratón por encima.
Por qué es importante
El foco es la marca que indica qué elemento recibirá lo que se teclee. Muchas personas usan solo el teclado: por una discapacidad motora, porque no ven bien el puntero o por comodidad.
Si el foco no se ve, la persona no sabe en qué campo del formulario de cita previa está escribiendo. Tampoco sabe qué opción del menú se abrirá al pulsar Intro.
Cómo se hace
- Defina estilos para
:focuso:focus-visibleen enlaces, botones y campos. - Use un cambio claro: contorno grueso, fondo distinto o borde. Si cambia el color, añada otra pista, como un subrayado o un borde, para quien no distingue bien los colores.
- No quite el contorno del navegador con
outline: nonesi no pone otro indicador a cambio. - Aplique el mismo resalte con
:hover, para que el ratón y el teclado den la misma pista. - Cuide que el indicador tenga buen contraste con el fondo.
Cómo comprobarlo
- Recorra la página con la tecla Tab, sin usar el ratón.
- Compruebe que cada enlace, botón y campo cambia de aspecto de forma clara al recibir el foco.
- Compruebe que el resalte desaparece al salir del elemento. Así solo hay uno marcado a la vez.
- Repita la prueba en fondos claros y oscuros de la página.
Ejemplo
Estilos de foco para los enlaces y campos de un formulario.
a:focus-visible,
a:hover {
background-color: #ffe066;
outline: 3px solid #1a1a1a;
}
input:focus {
background-color: #fff8d6;
outline: 3px solid #0b4f9c;
}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 C15 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
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 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 C15 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.