Serie "Guía breve para crear sitios web accesibles"

A partir de hoy voy a dedicar un comentario cada día a la Guía breve para crear sitios web accesibles del W3C. A principios de 2007 ya dediqué un comentario a esta guía. Los 10 consejos que proporcionan son:

• Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual.
• Mapas de imagen: Use el elemento map y texto para las zonas activas.
• Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
• Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite "pincha aquí".
• Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.
• Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc.
• Scripts, applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no son accesibles.
• Marcos: Use el elemento noframes y títulos con sentido.
• Tablas: Facilite la lectura línea a línea. Resuma.
• Revise su trabajo: Verifique. Use las herramientas, puntos de comprobación y pautas de http://www.w3.org/TR/WCAG.

Esta guía son únicamente consejos que ayudan cuando se tiene un "primer contacto" con la accesibilidad web, pero en ningún caso implican que su cumplimiento garantice que se alcance algún nivel de accesibilidad (A, AA o AAA).

¿RDFa mejorará la accesibilidad web?

Acabo de encontrar un nuevo término que desconocía: RDFa. Según la Wikipedia en español:

RDFa es un conjunto de extensiones de XHTML propuestas por W3C para introducir semántica en los documentos. RDFa aprovecha atributos de los elementos meta y link de XHTML y los generaliza de forma que puedan ser utilizados en otros elementos. Además se ha definido una correspondencia simple que permite extraer tripletes RDF.

Una explicación más sencilla: RDFa es un paso más hacia la web semántica, que pretende incorporar descripciones a la información contenida en una página web para que su utilización posterior sea más eficiente (por ejemplo, para facilitar las búsquedas). Con la web semántica una página web no sólo contendrá información, sino información sobre la información (los metadatos), que permitirán saber, por ejemplo, si un número representa un precio o una fecha, o si un nombre es el nombre de una persona o de un lugar.

¿Qué tiene que ver todo esto con la accesibilidad web? En el artículo RDFa - Implications for Accessibility se propone la idea de que RDFa puede ser empleado por el software que emplean las personas discapacitadas (por ejemplo, lectores de pantalla) para facilitar la navegación al aportar más información sobre el contenido de las páginas.

Por ejemplo, el siguiente fragmento de código HTML incluye información personal de contacto. El W3C tiene una propuesta (no es una recomendación aprobada) llamada Representing vCard Objects in RDF/XML para etiquetar este tipo de información. En el primer párrafo se muestra la información sin etiquetar y en el segundo ya aparece etiquetada.

Párrafo sin etiquetar:
<p class="contactinfo">Mi nombre es Sergio Luján Mora. Soy profesor titular en la <a href="http://www.ua.es/">Universidad de Alicante</a>. Puedes contactar conmigo a través del <a href="mailto:sergio.lujan@[arroba]@ua.es">correo electrónico</a>.</p>

Párrafo etiquetado:
<p class="contactinfo">Mi nombre es <span property="contact:fn">Sergio Luján Mora</span>. Soy <span property="contact:title">profesor titular</span> en la <a rel="contact:org" href="http://www.ua.es/">Universidad de Alicante</a>. Puedes contactar conmigo a través del <a rel="contact:email" href="mailto:sergio.lujan@[arroba]@ua.es"> correo electrónico</a>.</p>

Más ejemplos de diseño no accesible

He encontrado la página web Too much accessibility: Good intentions, badly implemented donde podemos encontrar una presentación sobre el mal uso de la accesibilidad en un sitio web. En esta presentación podemos encontrar ejemplos reales de un mal uso del texto alternativo (demasiado explícito o con información irrelevante), del atributo title en los enlaces, de los elementos de los formularios (texto por defecto, legend y fieldset), el enlace de "salta navegación" o "saltar al contenido" (skip to content) y otros errores muy comunes.

Ejemplos de diseño web no accesible

He encontrado la página web Examples of Accessible (and Inaccessible) Web Design. Aunque es del año 1996 y por tanto un poco antigua, ofrece ejemplos muy interesantes de diseño web que no es accesible y consejos para que sí lo sea.

Los temas que trata son:

• Every image should have good ALT text Separate block of ALT text
• Use simple ALT text for simple images
• Proper use of image maps
• Make link text descriptive but brief
• Use link text that can stand alone
• Provide good keyboard navigation
• Provide alternatives to controls and applets
• Provide alternatives to tables and frames
• Don't assume your formatting will be seen
• Don't require the use of style sheets

¿Qué navegadores usa la gente?

En la página web W3C Counter - Global Stats y W3Schools Browser Statistics se ofrecen estadísticas de uso de los navegadores, resoluciones de pantalla, sistemas operativos y otras categorías.

Respecto a los navegadores, los datos que ofrecen estos dos sitios sobre el uso de los navegadores es:

W3Counter
1 Internet Explorer 6.0 43.76%
2 Firefox 2.0 19.98%
3 Internet Explorer 7.0 18.76%
4 Firefox 1.5 6.43%
5 Safari 2.0 1.99%
6 Firefox 1.0 1.09%
7 Opera 9.2 0.81%
8 Mozilla 1.8 0.62%
9 Opera 9.0 0.52%
10 AOL 6.0 0.48%

W3Schools
1 Firefox 35.4%
2 IE6 34.9%
3 IE7 20.8%
4 Safari 1.6%
5 IE5 1.5%
6 Opera 1.5%
7 Mozilla 1.2%

Hay importantes diferencias entre las dos fuentes.

50 herramientas de accesibilidad y usabilidad

He encontrado la página 50 Online Accessibility and Usability Tools que ofrece una lista de 50 herramientas disponibles en la Web para mejorar la accesibilidad y usabilidad de las páginas web.

Las herramientas están agrupadas en las siguientes categorías:

• Color Tools
• Content Tools
• Browsers
• Other

Vídeos

He encontrado la página AssistiveWare videos on computer accessibility. Es una página que debería ver todo el mundo porque te abre los ojos y te permite descubrir cómo personas con algunas discapacidades muy severas son capaces de manejar un ordenador y utilizarlo con la misma fluidez que cualquier otra persona. El espíritu de estos vídeos se puede resumir en la frase de una de sus protagonistas: "We can because we think we can".

Libro electrónico: Accesibilidad e Internet

Gracias a Gabriel Porras y su página Libros Gratis he encontrado el libro Accesibilidad e Internet en formato PDF.

El contenido de este libro es:

• Índice
• Agradecimientos
• Prefacio
• Génesis del trabajo
• Acerca del archivo del trabajo
• Capítulo 1 - Introducción
• Capítulo 2- ¿Cuáles usuarios pueden tener problemas de accesibilidad en la Web?
• Capítulo 3 - Problemas de accesibilidad en la Web
• Capítulo 4 – Pautas, iniciativas y leyes
• Capítulo 5 - ¿Cómo se sabe si una página web es accesible?
• Capítulo 6 - Ayudas técnicas
• Capítulo 7 – Variantes accesibles en el uso de Internet
• Capítulo 8 – Preguntas más frecuentes
• Capítulo 9 – Conclusiones
• Anexo A - WAI y la Sección 508
• Anexo B - Códigos de lenguas
• Anexo C – Bibliografía y recursos en Internet
• Anexo D – Licencia de Creative Commons
• Acerca del autor

Libro electrónico: Comprendiendo la Accesibilidad

Gracias a Gabriel Porras y su página Libros Gratis he encontrado el libro Comprendiendo la Accesibilidad Una Guía para Lograr la Conformidad en Sitios Web e Intranets, que es la traducción al español del libro Understanding Accessibility. A Guide to Achieving Compliance on Web Sites and Intranets.

En la introducción del libro se describe el contenido del mismo:

INTRODUCCIÓN

Entendiendo la Accesibilidad: Una Guía para Lograr Conformidad en Sitios Web e Intranets, está diseñada para ser una completa guía para crear sitios Web, que consigan la conformidad con las normas federales de Estados Unidos para la accesibilidad del contenido Web, delineadas en el Rehabilitation Act Amendments
de 1998, Sección 508, Subsección B, §1194.22. Adicionalmente, esta guía puede ayudarte a asegurarte de que tus documentos con base en la Web, cumplen con los estándares de accesibilidad del World Wide Web, o W3C®. En este libro encontrarás:

• Exhaustiva información, sobre directrices de accesibilidad
• Consejo y guía, sobre cómo conseguir su conformidad
• Instrucciones fáciles de seguir, que te ayudarán a construir contenido Web
  accesible
• Una exhaustiva referencia en código HTML, para crear sitios accesibles
• Ejemplos de sitios Web, Dinámicos y Estáticos
• Comparaciones entre estándares del W3C y la legislación Federal de Estados
  Unidos
• Información útil, para ayudarte a seleccionar software para auditar la
  accesibilidad
• Información sobre el manejo de test de accesibilidad
• Guía para la adquisición de software, basado en requerimientos para software
  accesible.

Este libro es para Autores Web, Gerentes de Proyectos y básicamente cualquier individuo o equipo que se enfrente con el desafío de crear un sitio Web accesible, o modificar un sitio Web, para hacerlo accesible. Si la accesibilidad es algo nuevo para ti te sugerimos que comiences por el principio y leas el libro entero. Si estás atareado reparando sitios que no son accesibles, este libro te servirá como referencia y guía. Si revisas sitios para ver si son accesibles, este libro te ayudará a seleccionar herramientas y a entender los requerimientos de accesibilidad.

¿QUÉ HAY EN ESTE LIBRO?

Este libro te introduce en los preliminares de la accesibilidad y sus desafíos. Proporciona una completa referencia sobre reparación de la accesibilidad. A continuación, se detalla cada una de las secciones:

Capítulo Uno: Familiarizándose con el problema de la Accesibilidad y sus desafíos En esta sección, aprenderás sobre las principales organizaciones que desarrollan estándares de accesibilidad y sobre las leyes del gobierno de Estados Unidos, y también, aprenderás sobre los tipos de discapacidad tenidos en cuenta por los requerimientos. El capítulo Uno, también te guía hacia diversos recursos que pueden proporcionarle ayuda a tu organización y pueden proporcionarte la justificación de, por qué debe construir su sitio Web de forma accesible.

Capítulo dos: Los puntos de control y su significadoEn esta sección, aprenderás qué es cada uno de los puntos de control, cuál es el objetivo de los puntos de control, e información sobre cómo observar su cumplimiento satisfactoriamente.

Capítulo Tres: Introducción a la revisión de la AccesibilidadEsta sección, te introducirá en la tarea de revisar la accesibilidad de páginas Web y de sitios
Web enteros. Además, te introducirá en el conocimiento de herramientas de revisión, reparación y seguimiento. Discutiremos brevemente sobre los sistemas de gestión de contenido y arquitecturas de revisión existentes.

Capítulo Cuatro: Desarrollando una estrategia para la conformidad con la Accesibilidad En esta sección, aprenderás cómo definir requisitos de formación, como parte de una valoración inicial de la accesibilidad de un sitio.

Capítulo Cinco: Accesibilidad y Contenido DinámicoEsta sección, te introducirá en la relación entre el contenido dinámico y el trabajo para hacerlo accesible. Esta sección incluirá, también, dos ejemplos para demostrar problemas de accesibilidad con el contenido dinámico.

Capítulo Seis: El significado inadvertidoEste capítulo, cubre tres métodos distintos para proveer un sitio más útil, para aquellos que tienen una limitación tecnológica, o una discapacidad que les impide ver el componente visual de su sitio Web.

• Metadatos para la accesibilidad: En esta sección, aprenderás cómo usar metadatos para incrementar la accesibilidad de tu sitio Web.
• Escribiendo textos alternativos: En esta sección, aprenderás las mejores y peores prácticas, para crear textos alternativos para los objetos gráficos en tu página Web.
• Imágenes y accesibilidad: En esta sección, aprenderás cómo asignar con propiedad textos alternativos a las imágenes y por qué. Además, expondremos algunas prácticas comunes, pero defectuosas, para asignar texto alternativo a las imágenes.

Capítulo Siete: Tutorial: Corrigiendo Errores de AccesibilidadEsta sección, consiste en una extensa guía y tutorial. Este capítulo, contiene completos ejemplos y una serie de archivos de demostración, que serán inestimables ayudándote a comprender el marcado de la accesibilidad.

Capítulo Ocho: Uso de soluciones accesiblesEn esta sección, aprenderás sobre los requerimientos de accesibilidad para el software, de acuerdo con las normas de accesibilidad de Estados Unidos. También, te introducirá en el uso de la “Voluntary Product Accessibility Template, (“VPAT”)”.

Capítulo Nueve: Recursos de Accesibilidad y otras lecturas Esta sección, te proporciona información adicional y recursos.

Libro electrónico: Just Ask

Gracias a Gabriel Porras y su entrada Libros gratis he localizado un libro gratuito en versión electrónica llamado Just Ask: Integrating Accessibility Throughout Design.

Este libro describre como integrar la accesibilidad en un proceso de diseño centrado en el usuario. El libro posee un apartado muy práctico sobre cómo realizar pruebas con usuarios para evaluar la accesibilidad y usabilidad de un sitio web.

Libro electrónico: Buiding Accesible Websites

Acabo de encontrar la versión web del libro Building Accesible Websites de Joe Clark. Aunque sea del año 2002, es un libro de lectura imprescindible.

Siete errores de accesibilidad que no se deben cometer

Acabo de encontrar el artículo Seven accessibility mistakes you don’t want to make. Son consejos muy generales, más bien destinados a un jefe de proyectos que a un programador que se tenga que pelear con el HTML para que una página sea accesible, pero puede venir bien leerlo.

Los siete errores que se citan son:

1. Believing in products without putting them to the test (creer en los productos sin probarlos).
2. Taking too much responsibility (asumir demasiada responsabilidad).
3. Planning only for the worst-case scenario (planificar únicamente para el peor caso).
4. Sharing problems with the visitor (compartir los problemas con el visitante).
5. Trying to solve problems outside our area of experience (intentar resolver los problemas que están fuera del área de experiencia).
6. Hiding or overriding accessibility/usability enhancements (esconder o pasar por alto las mejoras de accesibilidad/usabilidad).
7. Catering to your client–not their clients (abastecer a tu cliente, no a sus clientes).

Mejores blogs sobre accesibilidad y usabilidad web en español

He encontrado una entrada en el blog Accesibilidad, Usabilidad y Estandares Web titulada Mejores blogs sobre accesibilidad y usabilidad web en español. El propósito del autor era recopilar una lista con los 100 mejores blogs sobre accesibilidad en español. Inicialmente tenía 60 direcciones, pero ya va por 105.

Desde aquí le agradezco al autor de este blog que me haya incluido en su lista :-)

Accesibilidad de los productos de IBM

He encontrado la página web Accessibility and ergonomic comfort features of IBM personal computers and accessories donde se explican las características para mejorar la accesibilidad que incorporan algunos de los productos de IBM.

SMIL y la accesibilidad web

He recibido un correo electrónico en el que me preguntan si conozco algún editor de SMIL que permita realizar subtitulado y utilizar el lenguaje de signos. He tenido que contestar que lo desconozco. Pero... ¿qué es SMIL?

SMIL es el acrónimo de Synchronized Multimedia Integration Language, una recomendación del W3C que se emplea para describir presentaciones multimedia, es decir, presentaciones donde podemos combinar texto (con formato), imágenes, audio y vídeo. SMIL es un lenguaje de marcado basado en XML.

Como de costumbre, Microsoft tiene una tecnología con un propósito similar llamada SAMI (Synchronized Accessible Media Interchange).

Para trabajar con cualquiera de las dos tecnologías necesitamos una herramienta de autor para crear el contenido y un reproductor compatible para poderlo visualizar.

En el caso de SMIL, algunos reproductores compatibles son Apple QuickTime, RealPlayer o Microsoft Windows Media Player. En el caso de SAMI, Microsoft Windows Media Player es compatible con esta tecnología.

Ambas tecnologías se pueden emplear para proporcionar subtítulos y transcripciones de la pista sonora de algún elemento multimedia de nuestras páginas web como los vídeos. Con esta tecnología podemos sincronizar los subtítulos y cualquier otro elemento con el vídeo.

En la página Webcasting Samples se pueden encontrar varios ejemplos para diferentes reproductores multimedia. A continuación incluyo dos ejemplos con dos estilos diferentes, uno integrado en la propia página web y otro que hace uso de forma externa del reproductos Microsoft Windows Media Player:

Otra certificación de la accesibilidad web

He encontrado otra certificación de la accesibilidad web: Etiqueta Europea (Accesibilidad Web): Euracert. Según dice en la propia web, "La etiqueta Euracert no es otra etiqueta sobre Accesibilidad Web. De hecho, un sitio web obtiene la etiqueta Euracert como añadido a una etiqueta local otorgada en un país europeo por una de las organizaciones existentes [...]". Esta certificación permite un reconocimiento mutuo entre organizaciones de distintos países que trabajan sobre las pautas y recomendaciones internacionales de accesibilidad.

Hace unos meses comenté en la entrada Certificación Accesibilidad Web otro tipo de certificación que existe y que está respaldada por el European Software Institute (ESI) y la Fundación CTIC.

¿Tiene un sentido tantas certificaciones? ¿Habra una certificación para las certificaciones?

El lenguaje de signos reconocido como lengua natural de las personas sordas

He encontrado esta noticia en el periódico El País: El orgullo sordo. Según cuenta la noticia, el Senado español acaba de reconocer el lenguaje de signos como lengua natural de las personas sordas.

Esta noticia me ha recordado una entrada titulada Simplificar los textos que escribí hace unos meses. En esta entrada explicaba que la redacción de los textos de una página web se tiene que simplificar para facilitar su lectura a las personas sordas ya que para ellas su lengua natural es el lenguaje de signos.

Como medio para mejorar la accesibilidad de un sitio web para las personas sordas se pueden incorporar vídeos con explicaciones en el lenguaje de signos. En aquella entrada ponía como ejemplo la web del banco Bankinter.

He encontrado un ejemplo más de uso del lenguaje de signos en una página web: Movistar. En este sitio web podemos encontrar varios vídeos que explican los servicios que ofrece Movistar mediante el lenguaje de signos.

Por otro lado, existe el documento Directrices para el uso del Lenguaje de Signos en la Red donde se explica cómo incorporar el lenguaje de signos a la web. En esta página se proporcionan consejos para grabar un vídeo e incluirlo en una página web.

aDesigner

Los creadores de IBM Home Page Reader han creado una nueva herramienta para evaluar la accesibilidad de un sitio web: aDesigner. Y es gratuita.

Además de evaluar la accesibilidad según las pautas del W3C o Section 508, esta herramienta realiza dos análisis y simulaciones muy interesantes: cómo ve la página web una persona completamente ciega que utilice un lector de pantallas o cómo ve una página web con una visión reducida (por la edad o por alguna enfermedad).

En el caso de las personas ciegas, esta herramienta muestra el tiempo necesario (en segundos y con un código de colores) para llegar a distintos puntos de la página cuando se accede a ella con un lector de pantalla. Cuando una página contiene muchas zonas oscuras significa que se tarda mucho tiempo en llegar a ellas; este problema se puede resolver con enlaces intradocumentales del tipo salta contenido (skip content).

En el caso de las personas con una visión reducida, esta herramienta permite simular distintas situaciones, como falta de agudeza visual o problemas de ceguera a algunos colores (daltonismo).

aDesigner también permite evaluar la accesibilidad de documentos ODF, de contenido Flash y de entornos gráficos de usuario.

Por último, esta herramienta se integra con Internet Explorer, ya que al instalarse añade al menú Herramientas la opción "Open with aDesigner".

Más sobre compatibilidad con distintos navegadores

Lograr que una misma página web sea compatible (funcione correctamente) con múltiples navegadores es una cuestión bastante compleja hoy en día. La mejor forma de lograrlo es:

1. Emplear los estándares.
2. Visualizar la página web en distintos navegadores para comprobar que es compatible.

Para visualizar una página web en distintos navegadores se podría pensar que haría falta tener un ordenador para cada navegador. Pero esa no es la única solución y, evidentemente, la mejor solución.

Hace ya unos meses escribí la entrada Como se ve mi página en distintos navegadores y Cómo instalar varias versiones de Internet Explorer en un mismo ordenador.

Ahora he encontrado el artículo Browser Tests, Services and Compatibility Test Suites que explica con detalle tres escenarios: como instalar varias versiones de Internet Explorer, como instalar varias versiones de Safari (el navegador más utilizado en Mac OS) y como instalar o utilizar varios navegadores en Linux.

Además, el artículo incluye una lista de herramientas disponibles a través de Internet que se pueden emplear para ver una página web en distintos navegadores.

En la página How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking) se puede leer otra explicación de este problema.

(Actualización 07/10/2007) Me han informado de la existencia de la página Prueba tu página con diferentes navegadores donde también se comenta la necesidad de verificar la correcta visualización de una página web con diferentes navegadores. En esta página se incide en la necesidad de emplear navegadores alternativos y se ofrecen enlaces a algunos de ellos.

Un mini navegador muy potente

Acabo de encontrar una página web donde se puede probar Opera Mini, el navegador de Opera que se incluye en algunos móviles.

El simulador es muy bueno y el navegador es bastante asombroso, ya que muestra las páginas no con su aspecto original, sino modificadas, pero parece que es bastante "inteligente", ya que las modificaciones que introduce son muy acertadas (por ejemplo, adaptación de una página cuando se emplean tablas para maquetar el contenido).

Esta herramienta puede ser muy últil para evaluar la accesibilidad de una página web desde distintos dispositivos.

A continuación he incluido algunas capturas de visualización de la página web de la Universidad de Alicante con este navegador: