Cuestiones de accesibilidad relativas a CSS

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:

• Emplear CSS 2.1¹, y descartar atributos de estilo propietarios.
  • Pauta 3.2 (inglés).
  • Pauta 3.3 (inglés).
  • Pauta 11.1 (inglés).
  • Pauta 11.2 (inglés).
• Crear un estilo de presentación de los contenidos homogéneo en todo el sitio, o al menos dentro de las secciones principales, y proporcionar mecanismos de navegación y de contexto consistentes para todo el sitio.
  • Pauta 13.4 (inglés).
  • Pauta 13.5 (inglés).
  • Pauta 14.3 (inglés).
• Emplear unidades relativas para medidas de los elementos. Esta pauta puede ser discutible en el caso de los contenedores para la distribución de los contenidos del documento, como por ejemplo los anchos de las columnas —precisamente por los problemas de accesibilidad que pueden suponer, como ha indicado Alastair Campbell en Accessible layouts (inglés) y Elastic layout - wrong term? (inglés)—, pero no así para los tamaños de fuentes, que deberán definirse en ems o porcentajes, dado que es la manera de permitir al usuario de Internet Explorer 6 y anteriores que los ajuste según sus necesidades.
  • Pauta 3.4 (inglés).

• 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.

  • Pauta 2.2 (inglés).

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 este ejemplo tenemos una cabecera con una barra de herramientas, y un menú de navegación:

Una cabecera y una barra de navegación con imágenes de fondo

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:

La misma cabecera, si no se cargan las imágenes

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:

La misma cabecera, con colores de fondo

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.

Web Developer Toolbar: Desactivar imágenes

Por último, personalmente encuentro muy útil hacer pruebas adicionales con aDesigner (inglés), un programa desarrollado inicialmente por IBM y continuado por Eclipse.org 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)².

Y así concluye la parte del curso dedicada a la capa de presentación de un documento.

Notas

1. Aunque la 2.1 en este momento no es aún una recomendación, sino una candidata a tal (inglés), de facto se emplea para juzgar la adecuación a los estándares del soporte de CSS. Aunque si se sigue al pie de la letra la pauta del W3C habría que ceñirse a la especificación de CSS 2 (inglés), ésta ya ha quedado obsoleta.
2. La deuteranopia es la incapacidad para percibir el color verde.