A diferencia de la cantidad de pautas que afectan al marcado del documento, sólo unas pocas de las WCAG 1.0 se refieren especficamente a la aplicación de CSS. Como en el caso del código, incluyo aquí no las pautas, sino técnicas concretas para satisfacer los puntos de sus prioridades:
Asegurar que el contraste entre el color de los textos y sus respectivos fondos, y de los elementos de primer plano y de fondo de las imágenes especialmente creadas para el sitio —léase iconos y barras de navegación— sea suficiente. Por suficiente se entiende que la diferencia de brillo sea superior a 125, y la diferencia de color superior a 500, según el algoritmo desarrollado por el W3C para herramientas de análisis de contraste de colores (inglés).
Herramientas para comprobar el contraste en la web hay muchas —yo mismo he programado una—, pero reconozco que es mucho más cómodo utilizar una herramienta de escritorio como el Contrast Analyser 2.0 del WAT-C.
Además, me gustaría llamar la atención sobre un fallo muy extendido a la hora de trabajar con estilos, y que consiste en olvidar indicar un color de fondo para un elemento cuando se le ha asignado una imagen de fondo. En éste ejemplo tenemos una cabecera con una barra de herramientas, y un menú de navegación:
A primera vista, no hay problema alguno, puesto que con las imágenes los vínculos son perfectamente visibles. ¿Pero qué ocurre si por cualquier motivo las imágenes no se cargan? Esto:
El color de las opciones del menú y demás vínculos contaban con un contraste suficiente gracias a las imágenes de fondo, pero si ellas resultan ilegibles.
Solventar este problema es tan sencillo como especificar para los elementos a los que se han aplicado esas imágenes un color de fondo, que será visible en caso de que las imágenes no se carguen:
Para comprobar rápidamente si se ha olvidado definir algún color de fondo importante, recomiendo emplear la Web Developer Toolbar de Chris Pederick, una extensión de Firefox que, entre otras muchas cosas, permite desactivar rápidamente las imágenes de una página (Images → Disable Images). Aquí dejo el ejemplo anterior corregido, por si alguien quiere probarlo.
Por último, personalmente encuentro muy útil hacer pruebas adicionales con aDesigner (inglés), un programa desarrollado por IBM que permite visualizar una página emulando distintos problemas de visión, desde visión reducida a dificultades para discriminar colores, entre otras muchas cosas. Por ejemplo, éste es el informe que genera para la portada de Amazon.com simulando deuteranopia (archivo .zip, 1.2 Mb)3.
Y así concluye la parte del curso dedicada a la capa de presentación de un documento.
Notas
