Técnica CSS WCAG 2.2
C25Marcar las zonas con bordes y maquetación CSS sin fijar colores de texto
Nombre oficial en el W3C: Especificar bordes y maquetación en CSS para delimitar las áreas de una página web sin especificar los colores del texto ni del fondo del texto
En pocas palabras
La estructura de la página se muestra con bordes, columnas y separaciones hechas con CSS. En cambio, no se fijan los colores del texto ni de su fondo. Así cada persona ve el texto con los colores que necesita y la página conserva su organización visual.
Por qué es importante
A muchas personas con dificultades cognitivas les ayudan los bordes y las columnas. Les permiten distinguir el menú del contenido. Otras necesitan sus propios colores de texto y fondo.
Si la página fija esos colores, la persona tiene que anularlos. Algunos navegadores eliminan entonces también la maquetación. El contenido se pone en una sola columna, las líneas se alargan y los menús desplegables pueden quedar transparentes encima del texto.
Cómo se hace
- Cree columnas y zonas con CSS, por ejemplo con
display: gridoflex. - Separe las zonas con
border, por ejemplo una línea vertical entre el menú y el contenido. - No declare
colornibackground-coloren los textos ni en sus contenedores. - Deje que el navegador y el sistema operativo apliquen los colores de la persona.
Cómo comprobarlo
- Cambie en el navegador los colores predeterminados de texto y fondo.
- Vuelva a cargar la página. El texto debe mostrarse con los colores elegidos.
- Compruebe que se mantienen las columnas, los bordes y las separaciones.
- Abra los menús desplegables. Su texto debe leerse bien, sin mezclarse con el de la página.
Ejemplo
Menú lateral separado del contenido con un borde, sin colores de texto ni de fondo.
.pagina {
display: grid;
grid-template-columns: 15em 1fr;
}
nav {
border-right: 2px solid;
padding-right: 1em;
}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 C25 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
Páginas que usan CSS.
Descripción
La intención de esta técnica es especificar los bordes y la maquetación mediante CSS y dejar que los colores del texto y del fondo se representen según la configuración del navegador y/o del sistema operativo del usuario. Esto permite a los usuarios ver el texto en los colores que necesitan, manteniendo al mismo tiempo otros aspectos de la maquetación y del diseño de la página, como las columnas de texto, los bordes alrededor de las secciones o las líneas verticales entre un menú y el área de contenido principal. También evitará algunos problemas de visualización en ciertos navegadores cuando las páginas contienen ventanas emergentes de JavaScript o menús desplegables y se han anulado los colores.
Los bordes y los indicadores de maquetación ayudan a muchas personas con discapacidades cognitivas, al igual que la flexibilidad en los colores del texto y del fondo. A veces estas dos necesidades entran en conflicto cuando el usuario tiene que anular en el navegador la selección de colores de texto y fondo del autor y el navegador elimina también los bordes y la maquetación prevista. Esto puede suponer que la página se muestre en una sola columna, con un bloque de contenido debajo de otro, lo que puede dar lugar a espacios en blanco innecesarios y a líneas de texto largas. También puede suponer que las ventanas emergentes adquieran un fondo transparente, superponiendo el texto de la ventana al texto de la página, y que los menús desplegables se vuelvan transparentes o adquieran un fondo gris oscuro. Cuando quien desarrolla la web no especifica los colores de ningún texto ni fondo, pero sí especifica los colores de los bordes y la maquetación, es posible, en la mayoría de los navegadores habituales, cambiar los colores del texto y del fondo sin afectar al resto de declaraciones CSS (especificadas por el autor).
Ejemplos
Una página web está diseñada con HTML. Se usa CSS para especificar los colores de los bordes alrededor de distintas áreas de la página y para maquetar el contenido de modo que el menú flote a la izquierda del área de contenido principal. No se especifica ni el color del texto ni el del fondo. El usuario establece sus propios colores en el navegador. Puede ver la página con los colores y contrastes que mejor le funcionan sin que se altere la maquetación.
Pruebas
Procedimiento
- Abrir la página web en un navegador que permita a los usuarios cambiar los colores del contenido HTML.
-
Cambiar en la configuración del navegador los colores del texto, de los enlaces y del fondo de modo que sean distintos de los que el navegador tiene establecidos en ese momento.
Asegúrese de no seleccionar la opción que indica al navegador que ignore los colores especificados en la página.
- Volver a la página y comprobar que se muestra con los nuevos colores de texto, de enlaces y de fondo.
- Comprobar que los bordes siguen mostrándose y que se conserva la maquetación.
Resultados esperados
- Las comprobaciones n.º 3 y n.º 4 son verdaderas.
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 C25 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.