Características de Accesibilidad de CSS

Este documento resume las características de la Recomendación de Hojas de Estilo en Cascada (CSS), nivel 2 ([CSS2]) que se sabe que afectan directamente a la accesibilidad de los documentos Web. Algunas de las características de accesibilidad descritas en este documento también estaban disponibles en CSS1 ([CSS1]). Este documento se ha escrito para que otros documentos puedan referirse de un modo consistente a las características de accesibilidad de CSS.

Estado de este documento

Este documento es una Nota del W3C, hecha pública por el W3C. Esta NOTA ha sido aprobada por el Grupo de Trabajo de Educación y Ayuda a los Necesitados (EOWG) de la Iniciativa de Accesibilidad a la Web (WAI), el Grupo de Trabajo de Protocolos y Formatos (PFWG), y el Grupo de Trabajo de Hojas de Estilo en Cascada y Propiedades de Formato.

La publicación de una Nota del W3C no implica el endoso por los miembros del W3C. Puede encontrarse una lista de los actuales informes técnicos y publicaciones del W3C, incluyendo borradores de trabajo y notas, en http://www.w3.org/TR.

Cómo las Hojas de Estilo Benefician la Accesibilidad

CSS beneficia la accesibilidad principalmente por la separación de la estructura y la presentación de un documento. Las hojas de estilo fueron diseñadas para permitir un control preciso -fuera del marcado- del espaciado de carácteres, alineación de texto, posicionamiento de objetos en la página, salidas auditivas y habladas, características de fuentes, etc. Mediante la separación del estilo y el marcado, los autores pueden simplificar y limpiar el HTML de sus documentos, haciendo al mismo tiempo más accesibles los documentos.

CSS permite un control preciso sobre el espaciado, la alineación y el posicionamiento. Los autores pueden por tanto evitar el "mal uso de las etiquetas" - la práctica de usar mal un elemento estructural por sus efectos estilísticos esperados. Por ejemplo, aunque los elementos BLOCKQUOTE y TABLE en HTML están indicados para marcar citas y datos tabulares, son usados con frecuencia para crear efectos visuales tales como indentación y alineamiento. Cuando software de navegación especializado como un sintetizador de voz encuentra elementos que están mal usados de esa forma, los resultados pueden ser ininteligibles para el usuario.

Además de prevenir el mal uso de elementos, las hojas de estilo pueden ayudar a reducir el mal uso de imágenes. Por ejemplo, a veces los autores utilizan imágenes invisibles de 1-pixel para posicionar contenido. Esto no sólo agranda los documentos, haciéndolos más lentos de descargar, sino que también puede confundir a los agentes de software buscando texto alternativo (el atributo "alt") para esas imágenes. Las propiedades de posicionamiento CSS hacen que estas imágenes invisibles ya no sean necesarias para controlar el posicionamiento.

CSS proporciona un control preciso sobre los tamaños de fuente, color y estilo. Algunos autores han usado imágenes para representar texto en una fuente en particular cuando no están seguros de su disponibilidad en la máquina del cliente. El texto en imágenes no es accesible para software especializado como lectores de pantalla, ni puede ser catalogado por robots de búsqueda. Para remediar esta situación, las poderosas WebFonts de CSS permiten a los usuarios un mayor control de la información del lado cliente. Con WebFonts, los autores pueden confiar en mecanismos de respaldo en el cliente cuando la fuente preferida por el autor no está disponible. Las fuentes pueden ser sustituidas con mayor precisión, sintetizadas por el software cliente, e incluso descargadas desde la Web, todo de acuerdo con las especificaciones del autor.

CSS permite a los usuarios sobreescribir los estilos del autor. Esto es muy importante para los usuarios que no pueden percibir una página con los colores y fuentes escogidos por el autor. CSS permite a los usuarios ver documentos con sus fuentes, colores, etc. preferidos, especificándolos en una hoja de estilo de usuario.

CSS proporciona soporte para numeración generada automáticamente, marcadores y otro contenido que puede ayudar a los usuarios a orientarse dentro de un documento. Listas largas, tablas o documentos son más fáciles de navegar cuando los números y otras pistas contextuales se ofrecen de una manera accesible.

CSS soporta hojas de estilo aurales, que especifican cómo sonará un documento cuando sea representado en forma hablada. Las hojas de estilo aurales (abreviado "ACSS") permiten a autores y usuarios especificar el volumen del contenido hablado, sonidos de fondo, propiedades espaciales del sonido, y un conjunto de otras propiedades que pueden añadir efectos a la narración sintetizada, en forma análoga a los efectos que se consiguen con los estilos de fuente para salidas visuales.

CSS proporciona un control más preciso sobre la presentación de contenido alternativo que HTML solo. Los selectores CSS2 dan accesso a valores de atributos, a menudo usados para proporcionar contenido alternativo. En CSS2, los valores de los atributos pueden ser representados en un documento junto con el contenido de un elemento principal.

Implementaciones de CSS

A la publicación de esta NOTA, los navegadores más ampliamente implantados no implementan CSS de forma consistente. Sin embargo, la última generación de navegadores de un número de fabricantes demuestra sólidas implementaciones de la mayoría de CSS1 y buena parte de CSS2, y las implementaciones continuan mejorando.

Obviamente, los beneficios de las características descritas en este documento no se percibirán sin adecuadas implementaciones de CSS1 y CSS2. Parte del diseño de un documento accesible con CSS implica asegurarse de que el documento permanece accesible cuando las hojas de estilo son desactivadas o no se soportan.

Hasta que la mayoría de navegadores soporten CSS de forma consistente, los desarrolladores de contenido pueden todavía crear documentos accesibles que combinen características de CSS soportadas con algunas características de presentación de HTML. Los documentos que utilizen características de presentación de HTML en lugar de CSS deben transformarse graciosamente. Por ejemplo, las tablas usadas para disposición deben tener sentido cuando se muestren serializadas.

Características de accessibilidad en CSS2

Lo siguiente es una lista de características de CSS2 que afectan a la accesibilidad (y las secciones donde están definidas en la especificación de CSS2). Las secciones que siguen a la lista desarrollan cómo estas características afectan a la accesibilidad.

Nota. Los nombres de propiedades se indican con comillas sencillas, la convención utilizada en las especificaciones de CSS1 y CSS2.

Espaciado, alineación y posicionamiento

CSS2 permite a los autores controlar la colocación visual de contenido en la página a través de indentación, márgenes, flotaciones, y posicionamiento absoluto y relativo. Usando propiedades CSS para conseguir efectos visuales, los autores pueden escribir un HTML más sencillo y eliminar imágenes y espacios de no separación ( ) usados para posicionamiento.

Las siguientes propiedades proporcionan control sobre el espaciado, la alineación y el posicionamiento:

Sobreescritura de estilos por el usuario

Para asegurar que los usuarios pueden controlar los estilos, CSS2 cambia el significado del operador "!important" definido en CSS1. En CSS1, los autores siempre tenían la última palabra sobre los estilos. En CSS2, si una hoja de estilo de usuario contiene "!important", toma precedencia sobre cualquier otra regla aplicable en una hoja de estilo del autor. Esta es una cuestión importante para usuarios que requieren o deben evitar ciertas combinaciones de colores o contrastes, usuarios que necesitan fuentes grandes, etc. Por ejemplo, la siguiente regla especifica un tamaño de fuente grande para párrafos de texto y sobreescribiría una regla del autor de igual importancia:

P { font-size: 24pt ! important }

El valor CSS2 'inherit' - disponible para cualquier propiedad - conduce a compactar las reglas de estilo "!important" que gobiernan la mayor parte o todo un documento. Por ejemplo, las siguientes reglas de estilo fuerzan a todos los colores de fondo a ser blancos y todos los colores de primer plano a ser negros:

/* Establece el color del texto en negro y el color de fondo en blanco para el cuerpo del documento. */

BODY {

color: black ! important ;

background: white ! important

}

/* Provoca que los valores de 'color' y 'background' sean heredados por el resto de elementos, forzados a ello por el !important. Nótese que esto puede ser sobreescrito por otros estilos de usuario más específicos.

* {

color: inherit ! important ;

background: inherit ! important

}

Por ejemplo, para dibujar una fina línea negra alrededor de un elemento cuando éste recibe el foco, y una fina línea roja cuando está activo, podría usarse la siguiente regla:

:focus { outline: thick solid black } :active { outline: thick solid red }

Contenido generado

CSS2 incluye varios mecanismos que permiten que el contenido sea generado desde las hojas de estilo:

El contenido generado puede servir como marcadores para ayudar a los usuarios a navegar un documento y estar orientados cuando no pueden acceder a pistas visuales como barras de desplazamiento proporcionales, marcos con tablas de contenidos, etc.

Por ejemplo, la siguiente hoja de estilo de usuario haría que las palabras "Fin del ejemplo" fueran generadas tras cada ejemplo marcado con un valor especial de clase en el documento:

DIV.example:after { content: "Fin del ejemplo" }

Los usuarios podrían también, por ejemplo, numerar los párrafos de forma que pudieran localizar su posición actual de lectura en el documento:

P:before { content: counter(paragraph) ". " ; counter-increment: paragraph }

Hojas de Estilo en Cascada Aurales

Las propiedades aurales de CSS2 proporcionan información a usuarios invidentes y a usuarios de navegadores por voz, del mismo modo que las fuentes proveen información visual. El siguiente ejemplo muestra cómo varias cualidades de sonido (incluyendo 'voice-family', que es algo como una fuente de audio) pueden permitir a un usuario saber que el contenido hablado es un encabezado:

H1 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") }

Las siguientes propiedades son parte de las hojas de estilo en cascada de aurales de CSS2.

Además, la propiedad 'speak-header' describe cómo la información de encabezados de tabla es leída antes de una celda de la tabla.

Acceso a representaciones alternativas del contenido

CSS2 permite a los usuarios acceder a representaciones alternativas del contenido que es especificado en valores de atributos cuando todo lo siguiente se usa a la vez:

En el siguiente ejemplo, el valor del atributo "alt" para el elemento IMG es representado después de la imagen (visualmente, auralmente, etc.):

IMG:after { content: attr(alt) }

Nótese que el valor del atributo se muestra incluso aunque la imagen pueda no ser mostrada (por ejemplo, porque el usuario ha desactivado la carga de imágenes a través de la interfaz de usuario).

Tipos de medios (Media types)

Los "media types" de CSS2 (usados con reglas @media) permiten a autores y usuarios diseñar hojas de estilo que harán que los documentos se representen más apropiadamente en ciertos dispositivos objetivo. Estas hojas de estilo pueden adaptar contenido para su presentación en dispositivos braille, sintetizadores de voz, o dispositivos tty. Usar reglas "@media" puede también reducir el tiempo de descarga permitiendo a los agentes de usuario ignorar reglas que no son de aplicación.

Sobre la Iniciativa de Accesibilidad de la Web

La Iniciativa de Accesibilidad de la Web (WAI) del W3C afronta la accesibilidad de la Web a través de cinco actividades complementarias que:

La Oficina del Programa Internacional de la WAI habilita el partenariado de la industria, organizaciones de discapacitados, organizaciones de investigación sobre accesibilidad, y gobiernos interesados en crear una Web accesible. Los patrocinadores de la WAI incluyen la Fundación Nacional para la Ciencia de Estados Unidos de América y el Instituto Nacional de Discapacidad e Investigación sobre Rehabilitación del Departamento de Educación; el Programa de Telemática para Discapacitados y Personas Mayores de la DG XIII de la Comisión Europea; el Programa de Aplicaciones Telemáticas para Discapacitados y Personas Mayores del Gobierno de Canadá, la Industria de Canadá; IBM, Lotus Development Corporation, y NCR.

Sobre las Pautas de Accesibilidad Web de la WAI

Las pautas de accesibilidad de la Web son esenciales para el desarrollo de sitios Web y para el desarrollo de aplicaciones relacionadas con la Web. La WAI está en coordinación con muchas organizaciones para producir tres conjuntos de pautas:

Sobre el World Wide Web Consortium (W3C)

Referencias

Puede encontrarse una lista de las actuales Recomendaciones del W3C y otros documentos técnicos en http://www.w3.org/TR.