Ir directamente al contenido de esta página

codexexempla.org

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:

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)2.

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. Volver
  2. La deuteranopia es la incapacidad para percibir el color verde. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA