Nota del Traductor:
El presente documento es la traducción al castellano del documento original (en inglés) titulado «Accessibility Features of CSS».
La única versión normativa es la versión original en inglés, en los términos por ella especificados.
Esta traducción puede contener errores. Puede enviar cualquier comentario sobre esta traducción y los errores que pueda contener a la siguiente dirección de correo electrónico ferguweb@sidar.org.
Gracias.
Fernando Gutiérrez Ferrerías
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.
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.
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.
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.
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
- 'text-indent' (16.1); 'text-align' (16.2); 'word-spacing'
y 'letter-spacing' (16.4);
'font-stretch', (15.2.3);
'margin', 'margin-top', 'margin-right', 'margin-bottom',
y 'margin-left' (8.3); 'float' (9.5.1), 'position' (9.3.1);
'top', 'right', 'bottom', y 'left' (9.3.2);
'empty-cells' (17.6.1)
- Sobreescritura de estilos por el usuario
- !important (6.4.1); el valor 'inherit' (6.2.1);
fuentes de sistema (15.2.5);
colores de sistema (18.2); tipos de lista (12.6.2);
contornos dinámicos ('outline', 'outline-width', 'outline-style',
y 'outline-color') (18.4)
- Contenido generado
- pseudo-elementos :before/:after (5.12.3, 12.1);
'content' (12.2); 'cue', 'cue-before', y 'cue-after' (19.5)
- Hojas de estilo aurales
-
'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before', y
'pause-after' (19.4);
'cue', 'cue-before', 'cue-after' (19.5);
'play-during' (19.6);
'azimuth', 'elevation' (19.7);
'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress',
y 'richness' (19.8); 'speak-punctuation' y 'speak-numeral' (19.9)
- Accesso a contenido alternativo
- selectores de atributos (5.8); la función attr() (12.2)
- WebFonts
- Ver Capítulo 15 de la especificación CSS2.
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:
- 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Cada
una de estas propiedades permite a los usuarios controlar el
espaciado sin añadir espacios adicionales.
Por ejemplo, en lugar de escribir "H O L A" (que los usuarios
generalmente reconocerán como la palagra "hola" pero los
usuarios de herramientas de reconocimiento de habla oirán como
letras sueltas), los autores pueden crear el mismo efecto visual
aplicando la propiedad 'word-spacing' a "HOLA".
- 'margin', 'margin-top', 'margin-right', 'margin-bottom',
'margin-left'. Con estas propiedades, los autores pueden crear espacio
en los cuatro lados del contenido de un elemento, en lugar de añadir
espacios de no separación ( ), que son marcado no estándar,
para crear espacio alrededor de un elemento.
- 'float', 'position', 'top', 'right', 'bottom',
'left'. Con estas propiedades, el usuario puede controlar la posición
visual de casi cualquier elemento independientemente de dónde
aparezca el elemento en el documento. Los autores deberían siempre
diseñar documentos que tengan sentido sin hojas de estilo (por
ejemplo, el documento debería estar escrito en un orden "lógico")
y entonces aplicar hojas de estilo para conseguir efectos visuales.
Las propiedades de posicionamiento pueden usarse para crear notas
al margen (que pueden ser automáticamente numeradas), barras laterales,
efectos similares a los marcos, encabezados y pies sencillos, y más.
- La propiedad 'empty-cells' permite a los usuarios dejar celdas en
blanco y aún darles un borde adecuado en pantalla o en papel. Una celda
de datos que está pensada para estar vacía no debería llenarse con un
espacio en blanco o un espacio de no separación sólo para conseguir
un efecto visual.
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 compacar 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 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
}
CSS2 también incluye estas características de control del usuario:
- Colores de sistema (para 'color', 'background-color',
'border-color', y 'outline-color') y fuentes de sistema
(para 'font') significa que los usuarios pueden aplicar sus
preferencias de fuentes y colores de sistema a los documentos
Web.
- Contornos dinámicos (la propiedad 'outline') permite a los usuarios
(por ejemplo, con visión reducida) crear contornos alrededor de
contenido que no afecta al diseño pero proporciona información
destacada.
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 }
CSS2 incluye varios mecanismos que permiten que el contenido
sea generado desde las hojas de estilo:
- los pseudo-elementos :before y :after y la propiedad 'content'.
Cuando se usan juntos, permiten a los autores insertar marcadores
(por ejemplo, contadores y cadenas constantes como "Fin del ejemplo"
en los ejemplos inferiores) antes o después del contenido de un
elemento.
- las propiedades 'cue', 'cue-before', y 'cue-after'. Estas
propiedades permiten a los usuarios reproducir un sonido antes
o despues del contenido de un elemento.
- Estilos de lista, que pueden ser números, glifos, o imágenes
(usualmente asociadas con el elemento LI en HTML). CSS2 añade
estilos de lista internacionales a los estilos definidos en CSS1.
Ver las propiedades 'list-style-type' y 'content'.
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
}
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.
- 'volume' controla el volumen del texto hablado.
- 'speak' controla si el contenido será hablado y, si es así, si será
deletreado o hablado por palabras.
- 'pause', 'pause-before', y 'pause-after'
controla las pausas antes y después de que el contenido sea hablado.
Esto permite a los usuarios separar el contenido para una mejor comprensión.
- 'cue', 'cue-before', y 'cue-after' especifica un sonido para ser
reproducido antes y después del contenido, lo cual puede ser valioso
para orientación (muy parecido a un icono visual).
- 'play-during' controla los sonidos de fondo mientras un elemento
es representado (muy parecido a una imagen de fondo).
- 'azimuth' y 'elevation' proporcionan dimensión al sonido, lo cual
permite a los usuarios distinguir voces, por ejemplo.
- 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress',
y 'richness' controlan la calidad del contenido hablado. Variando estas
propiedades para diferentes elementos, los usuarios pueden afinar cómo
se presenta el contenido auralmente.
- 'speak-punctuation' y 'speak-numeral' controla cómo se dicen los
números y la puntuación, lo cual tiene efecto sobre la calidad de la
experiencia de navegación aural.
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.
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:
- selectores de atributo.
- la función attr() y la propiedad 'content'
- los pseudo-elementos :before y :after
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).
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:
- Aseguran que la tecnología de la web soporta la accesibilidad
- Desarrolla pautas de accessibilidad
- Desarrolla herramientas para facilitar la evaluación y
reparación de sitios Web
- Coordina la educación y ayuda a los necesitados
- Dirige la investigación y desarrollo
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.
Información adicional sobre la WAI está disponible en http://www.w3.org/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:
- Pautas de Accesibilidad del Contenido Web 1.0 ([WAI-WEBCONTENT])
para sitios Web accesibles.
- Pautas de Accesibilidad de los Agentes de Usuario
([WAI-USERAGENT])
para usuarios de agente accesibles (navegadores, reproductores
multimedia, y tecnologías asistivas usadas con ellos).
- Pautas de Accesibilidad de las Herramientas de Autor
([WAI-AUTOOLS]) para herramientas de
autor accesibles (editores, gestión de sitios, herramientas de
transformación y herramientas de generación).
Sobre el World Wide Web Consortium (W3C)
El W3C fue creado para conducir a la Web a su pleno potencial mediante
el desarrollo de protocolos comunes que promuevan su evolución y
aseguren su interoperatibilidad. Es un consorcio internacional de la
industria, dirigido conjuntamente por el Laboratorio para Ciencias de
la Computación (LCS) del MIT en los Estados Unidos de Norteamérica, el
Instituto Nacional para la Investigación en Ciencias de la Computación
y Control (INRIA) en Francia y la Universidad de Keio en Japón. Los
servicios proporcionados por el Consorcio incluyen: un repositorio de
información sobre la World Wide Web para desarrolladores y usuarios;
implementaciones de código de referencia para incorporar y promover
los estándares; y varios prototipos y aplicaciones de muestra para
demostrar el uso de nueva tecnología. Hasta la fecha, más de 320
organizaciones son Miembros del Consorcio. Para más información sobre
el World Wide Web Consortium, vea http://www.w3.org/
Puede encontrarse una lista de las actuales Recomendaciones del W3C
y otros documentos técnicos en http://www.w3.org/TR.
- [CSS2]
-
"Cascading Style Sheets, level 2", B. Bos, H. W. Lie, C. Lilley, and
I. Jacobs, 17 May 1998.
- [CSS1]
-
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17
December 1996. Revised 11 January 1999.
- [HTML40]
-
"HTML 4.0 Recommendation", D. Raggett, A. Le Hors, and I.
Jacobs, eds., 18 December 1997, revised 24 April 1998.
- [XML10]
-
"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M.
Sperberg-McQueen, eds., 10 February 1998.
- [WAI-AUTOOLS]
-
Latest version of
"Authoring Tool Accessibility Guidelines", J. Treviranus,
J. Richards, I. Jacobs, C. McCathieNevile, eds.
- [WAI-WEBCONTENT]
-
"Web Content Accessibility Guidelines 1.0", W. Chisholm,
G. Vanderheiden, and I. Jacobs, eds., 5 May 1999
- [WAI-USERAGENT]
-
Latest version of "User Agent Accessibility Guidelines", J. Gunderson
and I. Jacobs, eds.