Sombras nada más… (o ¿sombras en el texto de una web accesible?)

Estuve investigando sobre el tema de crear un efecto de sombra en un texto con CSS.

Al parecer, existe un filtro dropshadow (filter: DropShadow…) para usar en textos, cuyo uso descarto absolutamente por ser interpretado únicamente por Internet Explorer.

También hay muchos posts prometiendo que cuando los navegadores interpreten CS3, habrá un atributo text-shadow muy sencillo de usar.

El primero que me entusiasmó, probé y funcionó fue un mensaje en un foro donde se usaban dos divs  idénticos superpuestos, con unos píxeles de diferencia. El div de abajo tiene un texto de color negro que se desplaza un poco y el div de arriba un color claro. Tardé un poco en darme cuenta de cuál es el primer problema de este método: ¡los invidentes escucharían dos veces el mismo texto! Definitivamente descartado (investigué un poco cómo ocultar un texto a los lectores de pantalla pero no lo encontré…)

Un método que funciona en Mozilla Firefox y en Google Chrome pero no en Internet Explorer, es el de text.after y text.before (sobre el final de este post: Efecto de sombra con CSS)

Finalmente, encontré una solución para todos los navegadores usando Javascript: Texto con sombra compatible con todos los navegadores. ¡Y funciona! Para comprobarlo, basta con ver este ejemplo:

Texto con sombra

Otros posts de BETA Weblog sobre accesibilidad y CSS:

Más sobre CSS: Float y Clear
¿Cómo se ve mi sitio en otros sistemas?

Imágenes en CSS

Ayuda para crear hojas de estilo

Cómo saber el código de un color

Cómo saber si tu sitio es accesible

 

3 opiniones en “Sombras nada más… (o ¿sombras en el texto de una web accesible?)”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *