C25Especificar 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

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

Pruebas

Técnicas relacionadas

• G17: Garantizar una relación de contraste de al menos 7:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto
• G18: Garantizar una relación de contraste de al menos 4.5:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto
• G145: Garantizar una relación de contraste de al menos 3:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto
• G148: No especificar el color del texto ni el color de fondo y no usar características tecnológicas que cambien esos valores predeterminados
• G156: Usar una tecnología con agentes de usuario comunes que permitan cambiar el color de primer plano y de fondo de los bloques de texto
• C23: Especificar los colores del texto y del fondo del contenido secundario, como barras de navegación, menús o tabla de contenidos, y dejar sin especificar los colores del contenido principal