Uso de Hojas de Estilo en Cascada en la revisión

Introducción

El uso de hojas de estilo en cascada facilita a los autores Web la revisión de la accesibilidad y usabilidad del sitio que están creando.

Los autores Web pueden ser desde una persona que tiene su página personal, hasta el miembro de un equipo de una multinacional que se ocupa del desarrollo de una parte de un sitio Web para, por ejemplo, la Administración Pública de su país.

Por ello la Fundación Sidar, ha desarrollado HERA: Hojas de Estilo para la Revisión de la Accesibilidad, una utilidad Web que ayuda a hacer una correcta revisión manual de la accesibilidad y usabilidad de las páginas Web.

HERA requiere el uso del navegador Opera para su óptimo rendimiento pues, por el momento, es el único navegador que interpreta apropiadamente algunas propiedades de la especificación de CSS. Por tanto, si por cualquier razón le es imposible usar ese navegador, a continuación exponemos los principios del uso de las hojas de estilo en cascada para la revisión, ofrecemos algunos ejemplos e instrucciones para que usted pueda crear sus propias hojas de estilo para la revisión y le explicamos cómo configurar cualquier navegador para usarlas.

Características especiales de las CSS para revisión

Lo que hace que un estilo se sobreponga al definido en una página Web, es la definición de "important!" en un elemento.

Hay que tener en cuenta que, desgraciadamente, no todos los navegadores han integrado de la misma manera el estándar de las Hojas de Estilo en Cascada y, por ello, algunos estilos no tienen el efecto deseado en según qué navegador.

Por ello el autor o Webmaster deberá hacer las modificaciones que sean necesarias, a los ejemplos que aquí presentamos, para que funcionen como él desea, en su navegador.

Para saber qué propiedas son correctamente interpretadas por cada navegador existen dos buenos recursos, en inglés:

• Cuadro maestro de compatibilidad. Creado pro Eric Meyer.
• Historia del soporte de las CSS. Creado por Brian Wilson.

Configuración del navegador para usar la/las CSS

Quizás el autor o Webmastes desconozca cómo conseguir que su navegador habitual aplique una hoja de estilos personal. Por ello, he redactado una explicación de cómo conseguirlo con los navegadores más usados. La explicación se encuentra en la sección de "Personalización" del sitio de la Fundación Sidar, que ofrece un Editor de Hojas de Estilo para que los usuarios puedan crear su propia CSS, modificando así la manera en que se le presentarán los contenidos de todas las páginas Web que visite; y en esa sección se explica también cómo configurar el navegador.

Los autores Web siempre deben ser conscientes de que el usuario puede utilizar una hoja de estilos propia cuando entra en el sitio que ellos han desarrollado y, también, de que el usuario puede hacer que no se aplique ninguna hoja de estilos en absoluto. Por tanto, les será útil usar EDIPO, el editor de hojas de estilo personales.

Ejemplos de CSS o de código a incluir en la/las CSS

A continuación se ofrecen algunos ejemplos de hojas de estilo, que el autor puede descargar y aplicar en su navegador, útiles para diversos tipos de revisiones. Los autores pueden tener una serie de hojas de estilo que aplican de una en una en la revisión de sus sitios o, pueden también combinar el código de varias de las que aquí se presentan para obtener una única hoja de estilos que les permita revisar varias cosas a la vez.

• Para detectar los <font>

  Útil para quien esté actualizando un sitio en el que se utilizaba este elemento, hoy en día obsoleto, y que causa múltiples problemas de accesibilidad.

• ¿Cómo se ve mi página en 640x480?

  Para no tener que cambiar la configuración de nuestro ordenador cada vez que queramos revisar cómo se verá nuestro sitio en distintas resoluciones, podemos crear diversas CSS como esta.

• Para detectar la falta de textos alternativos

  Esta hoja de estilos esconde las imágenes y objetos gráficos que tienen su correspondiente texto alternativo y deja ver aquellas que no lo tienen.

• Estructura de las tablas

  Marca con una línea roja el borde de las tablas y con una azul las filas y columnas.

• Combinada

  Esta hoja de estilos creada por Jim Wilkinson permite revisar varios elementos de una sola vez.

Estos y otros interesantes ejemplos pueden encontrarse (en inglés) en el artículo de Eric Meyer: Using CSS as diagnostic tool