-
Técnicas CSS para Accesibilidad Parte II
Reducir el mantenimiento y aumentar la coherencia
•Cree un estilo de presentación que sea coherente en todas las páginas.
•Use un número mínimo de hojas de estilo en su sitio.
•Use hojas de estilo vinculadas en vez de estilos incrustados y evite hojas de estilo incrustadas ("inline").
•Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.
Permitir al usuario redefinir los estilos
•Evite características desaconsejadas por las tecnologías W3C. (algo que cuesta la comienzo pero el cambio es para mejor)
Para asegurar que los usuarios puedan controlar los estilos, CSS2 modifica la semántica del operador "!important" definido por CSS1. Con CSS1, el autor siempre tenía la última palabra sobre los estilos. Con CSS2, si la hoja de estilo del usuario contiene "!important", esto tiene prioridad sobre cualquier regla aplicable en la hoja de estilo del autor.
Esta es una característica importante para los usuarios que necesitan o que tienen que evitar ciertas combinaciones o contrastes de colores, usuarios que necesitan letra grande, etc. Por ejemplo, la regla siguiente especifica una letra grande para el texto de párrafo y tendría prioridad para redefinir sobre una regla de autor con el mismo peso:
Ejemplo.
P { font-size: 24pt ! important }
El valor de CSS2 "inherit" - que está disponible para cualquier propiedad - da lugar a reglas de estilo "!important" compactas que definen gran parte o todo el documento. Por ejemplo, las siguientes reglas de estilo fijan el color de fondo a blanco y el de primer plano a negro para todos los elementos.
CSS2 también incluye estas características para permitir el control por parte del usuario:
•Colores de sistema (para "color", "background-color", "border-color", y "outline-color"), y fuentes de sistema (para "font") permiten a los usuarios aplicar sus preferencias de colores y fuentes de sistema a los documentos Web.
•Los bordes dinámicos de contorno (la propiedad "outline") permiten a ciertos usuarios (por ejemplo, los usuarios con baja visión) crear bordes alrededor de los contenidos que no afecten a la maquetación pero sí destacan la información.
Por ejemplo, para dibujar una línea negra gruesa alrededor de un elemento cuando sea el foco y una línea roja gruesa cuando esté activo, se pueden emplear las siguientes reglas:
Ejemplo.
:focus { outline: thick solid black }
:active { outline: thick solid red }
Unidades de medida
•Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos del lenguaje de marcadores y en los valores de las propiedades de las hojas de estilo.
•Use la unidad "em" para fijar el tamaño de letra.
•Utilice unidades de medida relativas y porcentajes. CSS permite utilizar unidades relativas incluso en posiciones absolutas. Por tanto, puede colocar una imagen que será alejada por "3em" desde el comienzo del elemento que la contenga. Es una distancia fija, pero relativa al tamaño de letra actual, con lo cual se escalará adecuadamente.
•Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.
Ejemplo.
Utilice "em" para establecer los tamaños de letra, como en:
h1 { font-size: 2em }
mejor que:
h1 { font-size: 12pt }
Ejemplo.
Utilice unidades absolutas de longitud sólo cuando sean conocidas las características físicas del medio de salida.
/* tarjeta de visita */
.businesscard { font-size: 8pt }
Contenidos generados
•Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.
•Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
•Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content").
•Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1.
CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:
•Los seudo-elementos :before y :after y la propiedad. "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores (por ejemplo, contadores y cadenas constantes tal como "Fin Ejemplo" en los ejemplos siguientes) antes o después del contenido del elemento.
•Las propiedades "cue", "cue-before", y "cue-after". Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.
•Estilos de lista, que pueden ser números, glifos, o imágenes (normalmente asociados con el elemento LI en HTML). CSS2 añade estilos de lista internacionales a los definidos en CSS1. Véanse las propiedades "list-style-type" y "content".
El contenido generado puede servir como marcador para ayudar a los usuarios a navegar por el documento y orientarse cuando no pueden acceder a las pistas visuales tales como barras de desplazamiento proporcionales, marcos con índice de contenidos, etc.
Por ejemplo, la siguiente hoja de estilo de usuario causaría la generación de las palabras "Fin Ejemplo" después de cada ejemplo marcado con un valor de clase especial en el documento:
Ejemplo.
div.example:after {
content:
}
El usuario también puede, por ejemplo, numerar los párrafos para localizar su posición durante la lectura del documento:
Ejemplo.
p:before {
content: counter(paragraph) ". ";
counter-increment: paragraph
}
Fuente
PD: A un tengo mucho en que mejorar
•Cree un estilo de presentación que sea coherente en todas las páginas.
•Use un número mínimo de hojas de estilo en su sitio.
•Use hojas de estilo vinculadas en vez de estilos incrustados y evite hojas de estilo incrustadas ("inline").
•Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.
Permitir al usuario redefinir los estilos
•Evite características desaconsejadas por las tecnologías W3C. (algo que cuesta la comienzo pero el cambio es para mejor)
Para asegurar que los usuarios puedan controlar los estilos, CSS2 modifica la semántica del operador "!important" definido por CSS1. Con CSS1, el autor siempre tenía la última palabra sobre los estilos. Con CSS2, si la hoja de estilo del usuario contiene "!important", esto tiene prioridad sobre cualquier regla aplicable en la hoja de estilo del autor.
Esta es una característica importante para los usuarios que necesitan o que tienen que evitar ciertas combinaciones o contrastes de colores, usuarios que necesitan letra grande, etc. Por ejemplo, la regla siguiente especifica una letra grande para el texto de párrafo y tendría prioridad para redefinir sobre una regla de autor con el mismo peso:
Ejemplo.
P { font-size: 24pt ! important }
El valor de CSS2 "inherit" - que está disponible para cualquier propiedad - da lugar a reglas de estilo "!important" compactas que definen gran parte o todo el documento. Por ejemplo, las siguientes reglas de estilo fijan el color de fondo a blanco y el de primer plano a negro para todos los elementos.
CSS2 también incluye estas características para permitir el control por parte del usuario:
•Colores de sistema (para "color", "background-color", "border-color", y "outline-color"), y fuentes de sistema (para "font") permiten a los usuarios aplicar sus preferencias de colores y fuentes de sistema a los documentos Web.
•Los bordes dinámicos de contorno (la propiedad "outline") permiten a ciertos usuarios (por ejemplo, los usuarios con baja visión) crear bordes alrededor de los contenidos que no afecten a la maquetación pero sí destacan la información.
Por ejemplo, para dibujar una línea negra gruesa alrededor de un elemento cuando sea el foco y una línea roja gruesa cuando esté activo, se pueden emplear las siguientes reglas:
Ejemplo.
:focus { outline: thick solid black }
:active { outline: thick solid red }
Unidades de medida
•Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos del lenguaje de marcadores y en los valores de las propiedades de las hojas de estilo.
•Use la unidad "em" para fijar el tamaño de letra.
•Utilice unidades de medida relativas y porcentajes. CSS permite utilizar unidades relativas incluso en posiciones absolutas. Por tanto, puede colocar una imagen que será alejada por "3em" desde el comienzo del elemento que la contenga. Es una distancia fija, pero relativa al tamaño de letra actual, con lo cual se escalará adecuadamente.
•Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.
Ejemplo.
Utilice "em" para establecer los tamaños de letra, como en:
h1 { font-size: 2em }
mejor que:
h1 { font-size: 12pt }
Ejemplo.
Utilice unidades absolutas de longitud sólo cuando sean conocidas las características físicas del medio de salida.
/* tarjeta de visita */
.businesscard { font-size: 8pt }
Contenidos generados
•Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.
•Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
•Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content").
•Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1.
CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:
•Los seudo-elementos :before y :after y la propiedad. "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores (por ejemplo, contadores y cadenas constantes tal como "Fin Ejemplo" en los ejemplos siguientes) antes o después del contenido del elemento.
•Las propiedades "cue", "cue-before", y "cue-after". Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.
•Estilos de lista, que pueden ser números, glifos, o imágenes (normalmente asociados con el elemento LI en HTML). CSS2 añade estilos de lista internacionales a los definidos en CSS1. Véanse las propiedades "list-style-type" y "content".
El contenido generado puede servir como marcador para ayudar a los usuarios a navegar por el documento y orientarse cuando no pueden acceder a las pistas visuales tales como barras de desplazamiento proporcionales, marcos con índice de contenidos, etc.
Por ejemplo, la siguiente hoja de estilo de usuario causaría la generación de las palabras "Fin Ejemplo" después de cada ejemplo marcado con un valor de clase especial en el documento:
Ejemplo.
div.example:after {
content:
}
El usuario también puede, por ejemplo, numerar los párrafos para localizar su posición durante la lectura del documento:
Ejemplo.
p:before {
content: counter(paragraph) ". ";
counter-increment: paragraph
}
Fuente
PD: A un tengo mucho en que mejorar
