Ejemplo de vídeo accesible

El siguiente vídeo es accesible porque:

• Posee subtítulos para personas con problemas de audición.
• Posee audiodescripción para las personas con problemas de visión.

Dos problemas típicos

Hace unos días estuve en comunicación con una persona responsable del Foro Histórico de las Telecomunicaciones, una iniciativa muy interesante.

Le comenté dos errores típicos que afectan a la accesibilidad de una página web:

Uso de colores con poco contraste

Hay texto con un color gris claro que es difícil de leer para usuarios con problemas de contraste.

En la siguiente imagen se muestra una página tal como la ve una persona sin problemas de visión. El texto principal está en gris, tiene un tamaño pequeño y un grosor fino, eso dificulta la lectura a personas con algunos tipos de problemas de visión. Incluso una persona sin problemas de visión tendrá dificultades para ver la página si usa un teléfono móvil a plena luz del día.

En la siguiente imagen  se muestra una simulación de visión de bajo contraste. El texto principal ahora es más difícil de leer.

Para calcular si dos colores tienen un contraste suficiente se puede usar alguna de las herramientas online que calcula el contraste entre dos colores. Yo suelo utilizar Color Contrast Checker, pero hay otras igual de válidas.

Enlaces no destacados cuando reciben el foco

Algunos enlaces no se destacan cuando reciben el foco con el teclado, eso impide su uso por los usuarios que no utilicen un ratón o dispositivo táctil.

En la siguiente imagen, el enlace "Multimedia" de la barra de navegación principal está destacado, correcto, eso ayuda a los usuarios a no "sentirse perdidos". Pero no se destacan los enlaces cuando reciben el foco por el teclado. En esta captura, yo me he situado en el enlace "Museo", se puede saber porque en la parte inferior de la captura se visualiza la URL del enlace. Sin embargo, el propio enlace no aparece destacado.

La página de la universidad en la que trabajo no es un ejemplo de excelencia, el error de enlaces no destacados existe. Pero en el caso de la barra de navegación principal sí que se destacan los enlaces, aparece una línea debajo del enlace cuando el usuario se desplaza. En este ejemplo, el enlace "La universidad" aparece destacado, ya que es el enlace sobre el que me he situado.

Estudios integrales sobre la accesibilidad de la Ley General de derechos de las personas con discapacidad y de su inclusión social

Hace justo dos años se aprobó la Ley General de derechos de las personas con discapacidad y de su inclusión social. En esa ley, el artículo 24 decía:

En el plazo de dos años desde la entrada en vigor de esta ley, el Gobierno deberá realizar los estudios integrales sobre la accesibilidad a dichos bienes o servicios que se consideren más relevantes desde el punto de vista de la no discriminación y accesibilidad universal.

¿Dónde está ese informe?

Accesibilidad en Moodle

Accessibility es un "bloque", un plugin para Moodle que mejora su accesibilidad. La descripción de este plugin dice:

The block allows users to customise Moodle to their visual needs.  It supports changing of text sizes and colour schemes.  Customisations save to the user's session, allowing them to persist between pages, and can also be saved to the database allowing them to apply permanently.

The block also integrates ATBar from Southampton University ECS. This provides extra tools and customisation options, including dictionary lookup and Text-to-speech.  Visual customisations performed with ATBar don't currently persist, and can be used as well as or instead of the block's own customisations.

El scroll infinito

El scroll infinito es una técnica que se puede encontrar en muchos sitios web en los que una búsqueda produce un "resultado infinito". Por ejemplo, la búsqueda de imágenes en Google o en flickr emplean esta técnica en vez de la paginación tradicional.

En Infinite Scrolling and Accessibility (It’s Usually Bad) se explica que es una mala práctica, tanto desde el punto de vista de la usabilidad como de la accesibilidad.

Uso del atributo aria-owns

En el artículo Using the aria-owns attribute se explica el uso del atributo aria-owns. Este atributo es útil para indicar una relación de dependencia padre/hijo que puede ser clara en la presentación visual, pero que puede no existir realmente en la estructura de la página, es decir, que no existe en el DOM.

Por ejemplo, puede ser útil para definir relaciones de dependencias en listas anidadas.

Asegura un alto contraste para el texto sobre las imágenes

En el artículo Ensure High Contrast for Text Over Images se explica que hay que asegurar que el texto que se muestre sobre las imágenes presente el suficiente contraste. Esto es complicado, ya que una imagen no suele tener un color uniforme, así que lo mejor es evitarlo.

Siete cosas que un diseñador debe saber sobre accesibilidad web

El artículo 7 Things Every Designer Needs to Know about Accessibility recoge siete cosas que un diseñador debe saber sobre accesibilidad web:

1. Accessibility is not a barrier to innovation.
2. Don’t use color as the only visual means of conveying information.
3. Ensure sufficient contrast between text and its background.
4. Provide visual focus indication for keyboard focus.
5. Be careful with forms.
6. Avoid component identity crises.
7. Don’t make people hover to find things.

Ejemplo de sitio web con características para mejorar la accesibilidad

OER Commons es un sitio web que posee un conjunto de opciones que mejoran la accesibilidad web.

Signo dólar leído como peso argentino

Hace unos días recibí esta consulta:

Hola Sergio,
Hace rato que te sigo como referente y aprendo con todo lo que compartís y con lo que respecta a la accesibilidad.

Hace ya unos años que estoy enfocado en experiencia de usuario y, por supuesto eso no deja de lado la accesibilidad.

Estoy trabajando en una empresa que desarrolla un software bancario y formamos un equipo exclusivo para trabajar en accesibilidad. Al trabajar en el rubro bancarío se me presenta el siguiente problema y quería pedirte ayuda a ver si me puedes dar alguna punta para solucionarlo.

El tema sobre el cual quiero consultarte es que en Argentina se utiliza el siguiente signo $, que representa a nuestra moneda que es peso argentino. Lo que sucede es que el símbolo es leído como dólar por el lector de pantallas.

La solución que encontramos es que se exprese la frase Pesos argentinos / dolares estadounidenses, etc.

Tu conocerás alguna forma de que se pueda aclarar el significado de los símbolos independientemente de los ya definidos en los lectores?

Desde ya muchas gracias y felicitaciones por tus aportes a la accesibilidad: :)

Muy buena pregunta...

En primer lugar, el símbolo del dólar "$"no sólo representa el dólar, es un símbolo monetario utilizado por ($ en la Wikipedia):

• el peso, ya sea el argentino, mexicano, chileno, colombiano, dominicano, uruguayo, etc.;
• el dólar, ya sea el estadounidense (US$), australiano (A$), canadiense (C$), etc.;
• el córdoba nicaragüense, C$;
• el pa'anga o dólar tongano, T$.

Nunca he leído nada sobre ello, así que no conozco ninguna respuesta formal. Lo único que puedo es sugerir algunas opciones que se me ocurren.

1. En vez de utilizar el carácter del símbolo de dólar, utilizar una imagen del símbolo del dólar y en el texto alternativo indicar "peso argentino".

Esta solución funciona, pero no es práctica: dificulta la redacción de los textos y además, algunos navegadores indican que existe una imagen con el aviso "gráfico".

2. Utilizar la etiqueta abbr para indicar que el símbolo del dólar es una abreviatura, e indicar con el atributo title su significado.

Esta solución es mejor que la anterior, pero tiene dos problemas importantes. Por un lado, la mayoría de los editores online de contenido web, como TinyMCE, no suelen tener un botón para etiquetar las abreviaturas. Pero si el texto es generado por una aplicación web entonces sí que es posible etiquetarlo correctamente. Por otro lado, hay lectores de pantalla que no interpretan la etiqueta abbr.

3. Añadir un texto oculto que indique que la moneda es "peso argentino".

Creo que es la que sugieren en la pregunta que me hicieron cuando dicen "la solución que encontramos es que se exprese la frase Pesos argentinos / dolares estadounidenses". Si en la página aparece el símbolo del dólar es imposible lograr que el lector de pantalla no lo lea, pero sí que es posible utilizar CSS para añadir un texto oculto que sólo lo lea el lector de pantalla. No es una buena solución.

Por tanto, no conozco una solución óptima. ¿Alguna persona que conozca una buena solución puede dejar un comentario?

Tableta con pantalla en Braille

En microsiervos he leído el artículo Un tablet con pantalla en Braille para personas con discapacidad visual:

Un equipo de investigadores de la Universidad de Michigan trabaja en el desarrollo de un tipo nuevo de pantalla en Braille que permita a personas con discapacidad visual acceder a la información de forma mucho más asequible y cómoda de lo que la tecnología les permite actualmente.

Bueno, puede ser que sí o puede ser que no, porque más de una vez he escuchado que gracias a la digitalización y los lectores de pantalla, es posible que las próximas generaciones de personas ciegas ya no necesiten el braille. En cualquier caso, lo importante es que haya diversidad de opciones y cada persona elija lo más apropiado para sus necesidades.

Un vídeo sobre el dispositivo que se ha desarrollado:

10 pruebas de accesibilidad web para realizar en 10 minutos (parte 1)

Hace unos días se publicó el artículo 10 pruebas de accesibilidad web para realizar en 10 minutos (parte 1), mi décima contribución al Observatorio de la Accesibilidad de la Confederación Española de Personas con Discapacidad Física y Orgánica (COCEMFE).

Magnificadores de pantalla gratuitos

Un magnificador de pantalla es un software que permite visualizar la pantalla de un ordenador con un considerable aumento en su tamaño, lo que supone una ayuda para las personas con problemas de visión.

Hace unos días mantuve una conversación telefónica con una persona que busca un magnificador de pantalla para su trabajo. Tiene baja visión y en su trabajo no quieren comprarle ZoomText, el mejor magnificador que tiene un pequeño problema, cuesta $400.

En List Of Best Free Screen Magnifiers se ha recopilado una lista de magnificadores de pantalla gratuitos:

• Magnifying Glass
• DesktopZoom
• Moo0 Magnifier
• Virtual Magnifying Glass Portable
• Magnifying Glass
• Magnifixer
• OneLoupe
• Able Opus See Sharp
• 1ClickZoom
• EzMagnifier
• uToolbox Magnifier Tool
• Super Magnifier
• ZoomIt
• ClZoom
• Virtual Magnifying Glass
• Dragnifier

Compromiso de Microsoft para una web más inclusiva

En el artículo Accessibility: Towards a more inclusive web with Microsoft Edge and Windows 10, Microsoft dice que tiene el compromiso de lograr que la web sea más inclusiva y para ello están trabajando en que su nuevo navegador Edge sea más accesible que Internet Explorer:

Microsoft is committed to accessibility as a core part of software design, and today we would like to share more about how Microsoft Edge is evolving to improve support for assistive technology beyond what was possible in Internet Explorer.

Un buen ejemplo de enlaces "saltar a "

En Convention on the Rights of Persons with Disabilities se pueden ver tres enlaces "saltar a" en la parte superior de la página.

Los tres enlaces son:

• Skip link to text
• Skip link to menu
• Skip link to submenu

Complemento para simular problemas visuales

NoCoffee Vision Simulator es un excelente complemento para Google Chrome que permite simular diferentes problemas de vision.

Por ejemplo, esta es la simulación de vista borrosa:

Y esta la simulación de bajo contraste:

Curso online y gratuito "Aprende Accesibilidad Web Paso a Paso"

El curso Aprende Accesibilidad Web Paso a Paso sigue abierto en la plataforma Udemy con más de 2300 estudiantves.

Es un MOOC, y por tanto online y gratuito, para el que hemos preparado más de 9 horas de vídeo y más de 40 ejercicios tipo test para evaluar el aprendizaje.

No hay fecha de principio ni de fin, tú marcas el ritmo en un proceso de autoaprendizaje guiado. Al finalizar el curso conocerás los principales problemas de falta de accesibilidad que presentan las páginas web y serás capaz de plantear e implementar soluciones para esos problemas.

El curso se estructura de la siguiente manera:

1. Bienvenida al curso: Es una introducción y una visión general del curso donde ya veremos algunos ejemplos de problemas de accesibilidad.
2. Qué es la accesibilidad web: Repasaremos la definición de accesibilidad web; cómo esta mejora la vida de las personas con discapacidad; los mitos asociados a la accesibilidad web; sus beneficios; o de la mano de Sergio Luján Mora repasaremos cosas que deberías saber sobre la accesibilidad web y ejemplos de sitios web accesibles.
3. Las personas con discapacidad y la Web: En esta sección se repasan los principales tipos de discapacidad y cómo afectan al acceso a la web. Antonio Ferrández nos explicará a lo largo de diversos vídeos los diferentes productos de apoyo que emplean las personas con discapacidad.
   
   Un total de 21 lecciones donde por ejemplo podremos ver una entrevista con una persona sordociega.
   
   
4. Pautas y leyes: En esta sección Olga Carreras presenta una introducción a las WCAG 2.0 y Sergio Luján Mora repasa a través de diferentes lecciones y vídeos la legislación española sobre accesibilidad web y recursos para consultar la legislación existente en otros países.
   
5. Contenido accesible: En esta sección repasaremos a lo largo de 23 lecciones, la mayoría en vídeo, cómo lograr que el contenido de una página web sea accesible y comprensible.
   
   Hablaremos de la accesibilidad de las imágenes, del audio y del vídeo; Sergio Luján Mora tratará temas como los subtítulos para el contenido multimedia o los captcha; o Ester Serna nos hablará, entre otras cosas, de la accesibilidad en relación con los encabezados, el idioma o las tablas de las páginas web. Olga Carreras explicará la accesibilidad del contenido multimedia.
   
   
6. Navegación accesible:
En esta sección aprenderemos en 13 lecciones, 12 de ellas en vídeo, a lograr que la navegación dentro de una página web y entre las páginas de un sitio web sea accesible. Por ejemplo Sergio Luján Mora nos hablará del título de la página, los enlaces "saltar a" o de las barras de navegación como listas de enlace. Olga Carreras hablará de los enlaces accesibles, de la navegación por teclado y de las múltiples vías, ubicación y consistencia.

7. Diseño accesible: En esta sección aprenderemos a lograr que la presentación de una página web sea accesible. Entre otras cosas, Sergio Luján Mora nos hablará del color, del contraste o de la tipografía.
   Olga Carreras enseñaré las buenas y malas prácticas así como los errores comunes de accesibilidad en los sitios Responsive Design.
   
8. Interacción accesible: En esta sección aprenderemos a lograr que la interacción de un usuario con una página web sea accesible.
   Olga Carreras hablará de Javascript y accesibilidad y de WAI-ARIA.
   
9. Accesibilidad y posicionamiento: En esta sección Olga Carreras presenta una introducción al posicionamiento orgánico en buscadores y su relación con la accesibilidad web.
   
10. Análisis y evaluación de la accesibilidad: En esta lección Olga Carreras presentará la metodología de evaluación WCAG-EM y las principales herramientas de evaluación automática. Ester Serna enseñará a utilizar la herramienta TAW y barras de herramientas como Wave o Web Developer Toolbar.
    
11. Conclusiones

100 lecciones, más de 9 horas de vídeo subtitulados y con transcripción accesible. Todos los profesores del curso esperamos que aprendáis mucho sobre cómo mejorar la accesibilidad web de vuestras páginas.

Curso online y gratuito en la plataforma Udemy: Aprende Accesibilidad Web paso a paso

Comparación del nivel de accesibilidad en Europa

Monitoring eAccessibility es un proyecto que lideró Technosite en los años 2010 y 2011. Como resultado del proyecto se desarrollaron varios informes sobre el estado de accesibilidad en Europa.

Por ejemplo, en el informe del año 2010 encontramos este gráfico el estado de las tecnologías asociadas a la accesibilidad electrónica por países:

Según este gráfico España estaba bien situado, por encima de la media de los países europeos.

Y en la siguiente tabla se muestra el estado de accesibilidad de los sitios web gubernamentales:

Ejemplo de sitio web con características para mejorar la accesibilidad

Digital Accessibility Centre es una organización del Reino Unida dedicada a mejorar la accesibilidad digital.

Su sitio web incluye varias características interesantes que mejoran la accesibilidad web:

• Enlace "saltar a"
• Diferentes combinaciones de colores para mejorar el contraste
• Navegación por teclado
• Controles para parar el carrusel de imágenes

Un guante traduce la lengua de signos en habla

En el artículo This glove translates sign language into speech se explica que en la Universidad de Londres han desarrollado un guante que traduce en tiempo real la lengua de señas en habla:

The glove has five sensors, each placed on one finger, to track hand movements. The sensors detect the bends and curvatures made by the fingers and reports the values to a serial monitor. An accelerometer is also attached to the glove to detect the orientation of the hand.
All of the values collected are run through a program that determines which letters to display on an LED matrix display. Ayoub recently added a chip that can convert the hand gestures into spoken word.

Y un vídeo: