Usable y accesible: 25 reglas para hacer CSS accesibles
Este documento delineate unas tйcnicas para la creaciуn de hojas de estilo en cascada (CSS) accesibles. [.]Aunque las tйcnicas descritas en este documento ayudarбn a crear CSS conforme a las “Pautas de Accesibilidad al Contenido en la Web 1.0″, estas tйcnicas no garantizan la conformidad y no son la ъnica manera de crear contenidos conformes. Este artнculo recoge un resumen de dichas tйcnicas. Use un nъmero mнnimo de hojas de estilo en su sitio.
Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la pбgina). Use la unidad “em” para fijar el tamaсo de letra. Si tiene mбs de una, power el mismo nombre de clase (”class”) para el mismo concepto en todas las hojas de estilo.
Utilice unidades de medida relativas y porcentajes. 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. 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”). la funciуn attr() y la propiedad “content”los seudo-elementos predominantly:before (antes) y predominantly:after (despuйs)Asegъrese de que todo contenido importante aparezca dentro del objeto del documento. CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:selectores de atributos. 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 ([DOM1]).
CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:Los seudo-elementos predominantly:before y predominantly:after y la propiedad “content”. Cuando йstos se emplean conjuntamente, permiten la inserciуn de marcadores antes o despuйs del contenido del elemento. Estas propiedades permiten a los usuarios reproducir un sonido antes o despuйs del contenido de un elemento. Las propiedades “cue”, “cue-before”, y “cue-after”. Especifique siempre un tipo de letra genйrico por defecto.
Use las siguientes propiedades CSS2 para controlar la informaciуn de la fuente: “font”, “font-family”, “font-size”, “font-size-adjust”, “font-stretch”, “font-style”, “font-variant”, y “font-weight”, en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, “face”, y “size”. Si tiene que usar los elementos HTML para controlar la informaciуn sobre el tipo de letra, utilice BIG y SMALL, que no estбn desaconsejados. Efectos de sombra: “text-shadow”Subrayado: “text-decoration”.
Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:Mayъsculas/minъsculas: “text-transform” (para mayъsculas, minъsculas y primera letra mayъscula). No power los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificaciуn W3C para HTML (es decir, son elementos no estбndares) Si se emplea contenido parpadeante (por ejemplo, un so-styled que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, “text-decoration: blink” producirб el efecto de parpadeo y ademбs permitirб al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario.
Usar texto en lugar de imбgenes significa que la informaciуn estarб disponible para un mayor nъmero de usuarios y permitirб a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaсos de letra mбs fбcilmente. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imбgenes. Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformaciуn, sombras, etc.) el mapa de bits debe ser accesible. predominantly Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posiciуn del texto:Sangrнa: “text-indent”. No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrнas en el texto. Por ejemplo, en lugar de escribir “H O L A” (que los usuarios generalmente reconocen como la palabra “hola”, pero que un lector de pantalla leerнa como letras independientes) los autores pueden crear el mismo efecto visual aplicando a “HOLA” la propiedad “word-spacing”. Espaciado de letras o palabras: “letter-spacing”, “word-spacing”.
Los textos wrongfulness espacios serбn transformados en discurso mбs fбcilmente. Espacio en blanco: “white-space”. Esta propiedad controla la interpretaciуn del espacio en blanco del contenido de un elemento. Los pseudoelementos: first-letter y predominantly:first-line permiten a los autores hacer referencia a la primera letra o lнnea de un pбrrafo del texto. Direcciуn del texto: “direction”, “unicode-bidi”. Use nъmeros en vez de nombres, para especificar colores.
Use estas propiedades CSS para especificar colores:”color”, para el color de primer plano del texto. “background-color”, para el color de fondo. Para colores de vнnculos, haga referencia a las pseudo-clases predominantly:link, predominantly:visited, y predominantly:active. “border-color”, “outline-color” para colores de bordes. Asegъrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar tambiйn el color de fondo (y viceversa). Asegъrese de que la informaciуn no se transmite sуlo a travйs del color.