Ir al contenido | Versión móvil

jueves, 9 de julio de 2009

25 reglas para hacer CSS accesibles

o "25 Normas de accesibilidad relativas a las CSS".

"Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.0" del W3C:


Este documento describe 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.

[Cita literal de dicho documento]


Este artículo recoge un resumen de las técnicas descritas. Se puede consultar el original para profundizar en cada punto.



  1. Use un número mínimo de hojas de estilo en su sitio.

  2. 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).

  3. Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.

  4. Use la unidad "em" para fijar el tamaño de letra.

  5. 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.

  6. 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").

  7. 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.

    • la función attr() y la propiedad "content"

    • los seudo-elementos :before (antes) y :after (después)


  8. 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 ([DOM1]).

    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 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.


  9. Especifique siempre un tipo de letra genérico por defecto.

  10. 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".

  11. 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.

  12. 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).

    • Efectos de sombra: "text-shadow"

    • Subrayado: "text-decoration".


  13. No use 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 titular 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.

  14. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. 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.

    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.

  15. 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.

    • Espaciado de letras o palabras: "letter-spacing", "word-spacing". 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". Los textos sin 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.

    • Dirección del texto: "direction", "unicode-bidi".

    • Los pseudoelementos: first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto.


  16. 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.

    • "border-color", "outline-color" para colores de bordes.

    • Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.


  17. 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).

  18. Asegúrese de que la información no se transmite sólo a través del color.

  19. Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.(1)

  20. Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. (Ver ejemplo en el documento original)

  21. Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas:

    • Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER.

    • Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación ( ).

    • Con las propiedades "float", "position", "top", "right", "bottom" y "left", el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.

    • La propiedad "empty-cells" permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía no debería ser llenada con un espacio en blanco o un espacio "non-breaking" sólo para lograr un efecto visual.


  22. Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt="" para ellas.

  23. Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.

    Utilice las propiedades CSS para especificar los estilos de los bordes:

    • "border", "border-width", "border-style", "border-color".

    • Para las tablas, "border-spacing" y "border-collapse".

    • Para contornos dinámicos, "outline", "outline-color", "outline-style" y "outline-width".


  24. Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilo. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales.

  25. Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual.

    Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2.

    • "volume" controla el volumen del texto hablado.

    • "speak" determina si el contenido se pronunciará y, en caso afirmativo, si se debe deletrear o leer como palabras.

    • "pause", "pause-before", y "pause-after" controla las pausas antes y después de anunciar el contenido. Permite a los usuarios separar los contenidos para mejorar la comprensión.

    • "cue", "cue-before", y "cue-after" especifican un sonido que se reproducirá antes y después del contenido, lo que puede ser valioso para la orientación (parecido a una imágen visual).

    • "play-during" controla los sonidos de fondo durante la presentación del elemento (parecido a un imagen de fondo).

    • "azimuth" and "elevation" proporcionan una dimensión al sonido, lo que permite a los usuarios distinguir las voces, por ejemplo.

    • "speech-rate", "voice-family", "pitch", "pitch-range", "stress", y "richness" controlan las cualidades de los contenidos hablados. Cambiando estas propiedades para diferentes elementos, los usuarios pueden ajustar con detalle la presentación sonora-auditiva de los contenidos.

    • "speak-punctuation" y "speak-numeral" controlan la forma de decir los números y la puntuación, lo que afecta la calidad de la experiencia para la navegación por voz.

    • la propiedad "speak-header" describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla.


  26. Cree distintas hojas de estilo para adaptar la presentación del documento a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY, pantalla, móvil, etc.) mediante los "tipos de medios" de CSS2 (empleados con las reglas @media) Las reglas "@media" también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas.



Notas
(1) La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como "1", "1.1", "1.1.1", etc.

Ejemplo.

<style type="text/css">
ul, ol { counter-reset: item }
li { display: block }
li:before {
content: counters(item, ".");
counter-increment: item;
}
</style>

miércoles, 8 de julio de 2009

Imprescindibles (16)

Estos son los artículos que han llamado mi atención últimamente (no tienen porque ser recientes):

Diseño y maquetación





Usabilidad





Accesibilidad




Móvil




Navegadores





Serie "Imprescindibles" (recopilación de artículos de interés)

martes, 7 de julio de 2009

Documentos que recomiendo conocer(6)

Serie "Documentos que recomiendo conocer"

Guías e informes




Cursos, revistas y libros online




Otros



  • Proyecto MUPA-UOC. Metodología de usabilidad para aplicaciones de la Universitat Oberta de Catalunya

  • "Research Paper - Real or Imaginary: The effectiveness of using personas in product design" de Frank Long [Vía Human-Computer.net]

    El objetivo del estudio era averiguar si el uso de personajes aseguraba efectivamente un producto más centrado en el usuario. El estudio demuestra con pruebas objetivas la eficacia de la utilización de personajes especialmente en las primeras etapas del proyecto:

    • El uso de personajes fortalece el enfoque en las necesidades de los usuarios finales y, por tanto, la toma de decisiones se centra más en esas necesidades.

    • El uso de personajes puede mejorar la comunicación entre los equipos y facilitar una discusión más constructiva basada en el diseño centrado en el usuario.

    • El uso de ilustraciones en lugar de fotografías disminuye su eficacia: puede conducir a un examen selectivo de las características de la persona, un menor nivel de empatía hacia la persona ilustrada y una menor capacidad para recordar los detalles de la persona después de un tiempo.

    • El escenario en forma de storyboard fue más eficaz que la versión más detallada.

    • Su eficacia disminuye cuando no se invierte el suficiente tiempo o recursos en esta técnica y entonces puede causar más daño que bien. Si la investigación y el análisis no son exhaustivos, la confianza en los personajes se verá menoscabada. Si el personaje y sus objetivos no son correctos entonces la dirección del diseño será inapropiada.



    Artículo relacionado: "La usabilidad como metodología para el desarrollo de una aplicación"

lunes, 6 de julio de 2009

Noticias... (20)

Estas son las noticias que han llamado últimamente mi atención:

Los que se apuntan a la accesibilidad



  • "Aenor certifica la accesibilidad de la web de Caja España. Con un nivel de cumplimiento de AA" en SolidaridadDigital. Es importante matizar que la certificación la obtiene la web del banco, no la banca online.

  • "CajaSur ofrece un portal de banca electrónica accesible para discapacitados" en SolidaridadDigital. Tiene la certificación Euracert (AA) de Technosite. Han optado por hacer dos versiones: la "versión clásica" y la "versión accesible".

  • "La web del Museo Thyssen-Bornemisza se presenta totalmente renovada" en adn.es.

    El Museo Thyssen-Bornemisza estrena 'MuseoThyseen.org', una versión renovada de su página web que incluye mayor accesibilidad a sus colecciones, blogs, vídeos y enlaces a Facebook, Twitter, Flickr o Youtube, entre otras cosas.

  • "La web de Moncloa se renueva para ser más accesible", en prcomunicación. Certificada AA por Technosite.

    Debido al gran volumen de información publicado en este portal, a la extensión de sus documentos y la frecuencia de actualización, la adaptación de las páginas a los estándares de accesibilidad para documentos anteriores al 1 de enero de 2006 se realizará previa petición por parte del usuario a través del buzon de La Moncloa indicando el documento objeto de la adaptación, teniendo en cuenta que esta labor es lenta debido a que los distintos documentos están maquetados según los estilos del momento en que fueron publicados por lo que es necesario dotarles de una nueva estructura de documento para este fin.

  • "La nueva página web de la DPT prima la accesibilidad y la rapidez" en abc.es.

    El presidente de la Diputación de Teruel, Antonio Arrufat, ha presentado hoy la nueva página "www.dpteruel.es" de la Corporación provincial en la que se prima la accesibilidad, la rapidez y la eficacia de cara a los usuarios y prepara el proceso de adaptación a la futura administración electrónica.

    El nuevo portal alcanza la calificación de AA en el test de accesibilidad web (TAW), que mide la facilidad de uso y la adaptación a personas que no están habituados a trabajar en internet o que sufren cualquier tipo de discapacidad, informan fuentes de la DPT en una nota de prensa.


    Es curioso porque en la web no hay un apartado de accesibilidad, sólo el logo WAI-A sin enlace. No parece muy afortunada la referencia al TAW más aun cuando las páginas sí presentan errores de prioridad 2.



Los que suspenden en accesibilidad





Otras



  • "Safari 4 encandila a 11 millones de usuarios en 3 días" en imatica.org

    Esta ha sido la cantidad de descargas dada a conocer por Apple para un browser que se ha consolidado en la tercera posición del ránking de este tipo de programas, tras Internet Explorer y Firefox, y a mucha distancia del cuarto clasificado, Google Chrome. Seis de los 11 millones de descargas corresponden a la versión de este programa para sistemas Windows.


  • "Inicia sus trabajos el observatorio de la discapacidad" en Discapnet. La dirección del portal del Observatorio Estatal de la Discapacidad es: http://www.observatoriodeladiscapacidad.es/

  • "ING Direct es el portal de banca más eficaz para la búsqueda de información online" en Baquía.

    Un estudio de Xperience Consulting analiza la búsqueda de un depósito bancario en Internet y la calidad de las webs de 6 de los principales bancos y cajas de España. La facilidad para encontrar información relevante y el conocimiento de marca son los factores más relevantes al decidirse por un depósito.
    [...]
    Este estudio analiza la búsqueda de un depósito bancario en Internet y la calidad de las webs de 6 de los principales bancos y cajas de España: ING Direct, La Caixa, BBVA, Banco de Santander, Cajamadrid y Banesto.

    Otra de las principales conclusiones del estudio es que el 68% de los usuarios prefiere contratar el depósito online y que cerca del 30% de los participantes no tiene claro qué es un depósito bancario


    Es importante no quedarse con el título de la noticia: es el mejor de los seis analizados. Personalmente creo que hay bancos con webs de mucha más calidad que algunos de los seis analizados, como Bankinter o Caixa Penedès.

domingo, 5 de julio de 2009

Enlaces en los que perderse (4)

Accesibilidad




Diseño




Usabilidad




Generales





Artículos relacionados: