Relación entre la accesibilidad web y los dispositivos móviles

El 26 de febrero el W3C publicó el primer borrador de Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile. El resumen dice:

This document, “Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile” describes how the Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG20] and its principles, guidelines, and success criteria can be applied to mobile web content, mobile web apps, native apps, and hybrid apps using web components inside native apps. It provides informative guidance, but does not set requirements. It also highlights the relevance of the User Agent Accessibility Guidelines 2.0 [UAAG20] in the mobile context.

Unas personas con discapacidad que se olvidan del resto de las personas con discapacidad

Ayer tuve una agradable conversación con una de mis doctorandas. Mi doctoranda me contaba que en un congreso habían presentado un blog para personas sordas en el que la gente no escribe, sino que manda vídeos "hablando" con la lengua de signos. Por cierto, ahora mismo estoy en Ecuador y aquí usan el término "lengua de señas".

"¿No ves el problema que presenta ese blog?", le pregunté a mi doctoranda. Después de unos segundos me contestó "¿Es discriminatorio? ¿Los que no sabemos la lengua de signos no podemos utilizar ese sitio web?"

"Exacto", y en ese momento me puse en plan inquisidor y... mejor no lo cuento.

Pero lo que sí que puedo contar es un ejemplo de lo que le conté. Examinemos el sitio web de la Confederación Estatal de Personas Sordas. ¿Es accesible?

Según eXaminator, no es accesible, obtiene una calificación de 3.0:

Los errores, imágenes sin texto alternativo, enlaces con el mismo texto pero destinos diferentes y problemas con los manejadores de eventos:

Si examinamos el código fuente, descubrimos cosas como unas cuantas imágenes sin texto alternativo que son botones porque tienen definido el evento onclick:

Y en la página de contacto nos encontramos un captcha:

Y si vemos el código fuente, el formulario no está correctamente etiquetado (y además está maquetado con tablas):

Y el botón de envío es una imagen que no tiene texto alternativo:

Y de navegar correctamente por teclado ya ni hablamos... Hay más cosas, pero con esto ya es suficiente.

Bueno, ¿debería ser este sitio web accesible? Pues, por un lado deberían dar ejemplo y deberían garantizar que su sitio web es accesible para todo el mundo, no sólo para las personas sordas.

Y por otro lado, en el sitio web aparece el logo del Ministerio de Sanidad, Servicios Sociales e Igualdad, quizás porque recibe subvenciones de dicho ministerio. Si es así, la ley indica que el sitio web debería ser accesible.

Denuncia contra Scribd

Scribd, el sitio web de publicación de documentos como libros y revistas ha sido denunciado por una persona ciega en Estados Unidos porque no es accesible: Scribd Faces Setback in Lawsuit Over Accessibility. Según la noticia, parece que Scribd tiene todas las de perder, ya que el juez ha aceptado la demanda presentada en julio de 2014.

Sin embargo, yo me pregunto, ¿hasta que punto Scribd puede ser denunciado? No conozco todo el modelo de negocio de Scribd, sé que cobran por acceder a todo o parte del contenido publicado, pero también sé que parte del contenido es publicado por cualquier persona, es decir, no es contenido creado por Scribd. Por ejemplo, he buscado y he encontrado que alguien ha publicado algunos de mis libros, sin pedirme permiso, en Scribd:

• Programación en Internet: Clientes web
• Programación de servidores web
• Programación de aplicaciones web: historia, principios básicos y clientes web

¿Quién debería asegurar que esos libros son accesibles? ¿Scribd? ¿Yo, que no sabía que mis libros estaban ahí? ¿El que ha subido los libros sin decirme nada?

No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones

Las Pautas de accesibilidad para el Contenido Web 2.0 (WCAG 2.0) tienen una pauta un poco "extraña":

Pauta 2.3 Convulsiones: No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

Esta pauta tiene como objetivo evitar ataques epilépticos (epilepsia fotosensible) y otras complicaciones derivadas de la fotosensibilidad que presentan ciertas personas cuando una imagen parpadea con cierta frecuencia.

El caso más conocido fue el de la serie de dibujos animados Pokémon. En diciembre de 1997 se emitió el capítulo Dennō Senshi Porygon que causó supuestos ataques epilépticos en 12.000 niños (Pokémon contagion: photosensitive epilepsy or mass psychogenic illness?). Hay dudas de que todos fueran ataques reales, se cree que fue más producto de una "histeria colectiva", pero sí que hay varios cientos de casos que fueron reales.

Parece que la peor combinación es el rojo con el cyan, justo la que apareció en ese capítulo de Pokémon: A study of the effect of color photostimulation from a cathode-ray tube (CRT) display on photosensitive patients: the effect of alternating red-cyan flicker stimulation.

Por cierto, este fue el fragmento culpable:

Si no funciona el anterior, quizás funcione este:

Cómo mostrar el atributo longdesc en Internet Explorer

Mozilla Firefox incluye una opción en el menú contextual de las imágenes para acceder a longdesc desde la versión 25.

En Google Chrome se puede instalar un complemento como Long Descriptions in Context Menu.

¿Y en Internet Explorer? Es el más divertido, el usuario lo puede programar, tal como explican en Configuring Internet Explorer to handle longdesc.

Una nueva denuncia por falta de accesibilidad en Estados Unidos

En Harvard and M.I.T. Are Sued Over Lack of Closed Captions podemos leer que la National Association of the Deaf (NAD) ha presentado una demanda porque los vídeos de los cursos online de Harvard y el MIT no tiene subtítulos o los subtítulos son incorrectos.

En la web de NAD podemos encontrar más información sobre el tema: NAD Sues Harvard and MIT for Discrimination in Public Online Content. Y este vídeo en el que el presidente de NAD lo explica:



Está muy bien denunciar lo que está mal, pero... he revisado rápidamente la web de NAD y he encontrado:

• Un objeto Flash que seguramente no es accesible.
• Varios enlaces "Read more" que no son significativos fuera de contexto.
• Una imagen en un enlace con un texto alternativo no significativo.
• Los enlaces no se destacan cuando reciben el foco.
• Y nada de enlaces estilo "saltar a".

Y en esta página explican más cosas sobre este tema: Could Your Company’s Videos Get You Sued for ADA Noncompliance?

Guía para elaborar documentación digital accesible

Guía para elaborar documentación digital accesible es una guía gratuita elaborada por CENTAC. El resumen dice:

En la llamada era de la información y del conocimiento se ha producido poco a poco un fenómeno que hoy aceptamos como algo cotidiano: las personas creamos cada vez más contenido en nuestro trabajo diario. Informes, propuestas, ofertas, presentaciones, presupuestos, análisis y otros tipos de contenido son producidos de forma rutinaria en grandes cantidades, gracias a disponer de ordenadores personales potentes y baratos, así como herramientas específicas muy sofisticadas. Entre ellas, destaca el conjunto de aplicaciones lanzada por Microsoft con el nombre de Office. Se ha convertido en una herramienta tan común que con frecuencia se incluye su conocimiento en los diferentes recorridos formativos y se cita como un elemento imprescindible en un currículo.

La accesibilidad de esa enorme cantidad de contenido producido, tan esencial para la integración en el mundo laboral, es una gran asignatura aún pendiente. Las herramientas que componen Office han evolucionado y permiten ya la creación de contenido accesible, pero sus miles de usuarios lo ignoran. Esta guía quiere ayudar a mejorar el conocimiento de lo que pueden hacer las herramientas de Office en cuanto a la accesibilidad  y permitir que los documentos que producimos puedan ser empleados por personas con muy diferentes capacidades.

Análisis de la accesibilidad de la página principal del sitio web de Renfe

Este es un tema recurrente del que he escrito varias veces:

• Errores web: Renfe y los encabezados (10/7/2012)
• La accesibilidad de la web de Renfe (1) (6/6/2013)
• La accesibilidad de la web de Renfe (2) (7/6/2013)

Y también tengo un par de vídeos sobre cómo se navega por la página web de Renfe con un lector de pantallas:

• Accesibilidad de la web de Renfe: NVDA (14/6/2013)
• Accesibilidad de la web de Renfe: JAWS (14/6/2013)

Pues bien, ya han pasado casi 2 años desde el último análisis y casi todo sigue igual, los problemas de accesibilidad siguen ahí.

Recientemente he publicado un par de análisis sobre la accesibilidad de la página principal de Renfe:

• Análisis de la accesibilidad de las distintas versiones de la página principal del sitio web de Renfe
• Análisis de la accesibilidad de la página principal del sitio web de Renfe

En el primer análisis, de forma muy somera, la accesibilidad de la página principal a lo largo de sus diferentes versiones desde la creación del sitio web.

En el segundo análisis reviso la accesibilidad de la página actual desde el punto de vista de un usuario ciego que utilice un lector de pantallas. Por tanto, no es un análisis completo de la accesibilidad.

La accesibilidad web de los supermercados

Hace unos días, en Las personas con discapacidad y la compra online de productos, comentaba que la compra de productos online a través de la Web puede mejorar enormemente la calidad de vida de las personas con discapacidad porque les permite comprar los productos sin ayuda de nadie.

Conozco dos sitios web de supermercados que son accesibles, o al menos se declaran como accesibles.

Uno es Mercadona:

El otro es Alcampo:

Los dos incluyen certificado de Technosite:

De Carrefour no he encontrado ninguna referencia a si es accesible en su página principal. Sí que he encontrado esta noticia, RSC.- La web de Carrefour incorpora los criterios de accesibilidad de la WAI para llegar a las personas con discapacidad, del año 2007. Pero he revisado la web actual y en 5 minutos he podido encontrar imágenes dentro de enlaces sin un texto alternativo coherente y enlaces repetidos con el mismo texto ("Comprar"), dos de los errores típicos de una web no accesible.

¿Alguien conoce otras cadenas de supermercados que sus sitios web sean accesibles?

Las personas con discapacidad y la compra online de productos

En el reportaje Cuando navegar de oídas es una odisea: la internet española no es para ciegos que se publicó hace unos días, Lourdes González comenta:

El comercio electrónico es más importante para las personas invidentes que para los que no sufren ningún tipo de discapacidad: es la forma de que puedan realizar esta tarea autónomamente. "Hay muchas quejas en cuanto a las compras 'online', pese a que para las personas ciegas es nuestra única alternativa", afirma Lourdes González. "Para ir a un supermercado tengo dos opciones: o ir allí y pedir ayuda o ir con un familiar. Por eso para mí la opción óptima es la compra 'online'", nos cuenta. Mercadona o Alcampo son dos ejemplos de páginas web accesibles.

Este es justo uno de los ejemplos que suelo poner en mis cursos para explicar cómo la Web puede mejorar enormemente la vida de las personas con discapacidad. En enero publiqué un artículo sobre este tema en el Observatorio de la Accesibilidad, Cómo puede mejorar la Web la calidad de vida de las personas con discapacidad, pero ahí no incluí este ejemplo por limitaciones de espacio. Sin embargo, sí que está en el siguiente vídeo en el que muestro tres ejemplos de cómo la Web mejora la vida de las personas con discapacidad; uno de los ejemplos es justo la compra online de productos básicos para la vida como alimentos, productos de higiene personal o productos de limpieza:

HTML5 Image Description Extension ya es una recomendación

El pasado 26 de febrero se publicó HTML5 Image Description Extension (longdesc) como recomendación. En esta especificación se recupera el atributo longdesc que se había eliminado de HTML5: El atributo longdesc ha vuelto.

Entrevista para el artículo "Cuando navegar de oídas es una odisea: la internet española no es para ciegos"

Ayer se publicó el artículo Cuando navegar de oídas es una odisea: la internet española no es para ciegos. Hace unos días me entrevistaron para incluir mis comentarios en ese artículo:

Entras en Renfe.com. Buscas origen y destino y llenas tu carrito virtual. Acabas de adquirir cómodamente tus billetes para una escapada de fin de semana. Ahora, vuelve a entrar en la web con un lector de pantalla, el 'software' que utilizan las personas invidentes para navegar. Difícilmente concluirás tu proceso de compra. "En Renfe, desde que introduces las ciudades de origen y destino, ya hay una barrera a la accesibilidad", explica Sergio Luján, profesor de la Universidad de Alicante y experto en accesibilidad web, a HojadeRouter.com.

[...]

En España, 3,8 millones de personas sufren algún tipo de discapacidad. Más de 700.000 padecen alguna discapacidad de tipo visual, de las cuales 70.000 son invidentes. Sin embargo, en materia de accesibilidad web aún queda mucho camino por recorrer. "Desde el año 2004 sí ha cambiado la accesibilidad web en España: ahora hay mucho más interés, pero va lento y las personas con discapacidad necesitan que sea accesible ya", señala Luján.

[...]

Aunque las infracciones pueden ser sancionadas, en España de momento no se ha hecho. "Ha habido leyes que han impuesto que se cumplan unos criterios de accesibilidad, pero no ha habido sanciones o una repercusión que hayan obligado a que se cumplan", nos cuenta Sergio Luján. "No se obliga a las empresas a demostrar que sus sitios web son accesibles", critica este profesor.

[...]

"Cuando se pregunta a personas con discapacidad, este 'captcha' es uno de los mayores problemas, aunque hay otras opciones para no utilizarlo", cuenta Luján. 

[...]

"La accesibilidad se ha de tener en cuenta desde el principio: es como si construyes una vivienda y el cliente, cuando ya está construida, decide poner una ventana en una pared. Hubiera salido más barato hacerlo accesible desde el principio. El error, en muchas ocasiones, es que se intenta hacer accesible después y eso es mucho más costoso", nos cuenta Sergio Luján.

[...]

"Hay que enseñar a las personas que crean los sitios web a que los hagan accesibles, y eso es más difícil, a veces no se toma conciencia de ello porque mucha gente ni siquiera sabe qué es el atributo 'alt' de una web", señala Luján, que añade que la accesibilidad es útil no solo para las personas con discapacidad, sino para todos los usuarios de la web.

¿Cuándo una página web es accesible?

Ayer se publicó el artículo ¿Cuándo una página web es accesible?, mi tercera contribución al Observatorio de la Accesibilidad de la Confederación Española de Personas con Discapacidad Física y Orgánica (COCEMFE).

Usos del atributo lang

En On Use of the Lang Attribute se explican los usos y las ventajas que proporciona el atributo lang. Básicamente, es un atributo importante para los lectores de pantalla.

Pero también es importante para que funcione la propiedad hyphens de CSS3, que permite definir la forma de dividir las palabras mediante guiones.

Denuncia por falta de accesibilidad en una web en Australia

En este caso se ha llegado a un acuerdo entre las partes. No se indica si ha habido algún tipo de compensación económica: Coles web accessibility case settled.

El anuncio realizado por las partes:

Joint statement from Coles and Gisele Mesnage

Coles and Ms Mesnage, who is represented by the Public Interest Advocacy Centre, are delighted to have reached a very amicable settlement.

The settlement follows the mutual agreement of the parties to make further improvements to the Coles website in respect of accessibility enhancements suggested by Ms Mesnage.

Coles recognises the importance of accessibility and is committed to continuing to improve the online shopping experience for everyone.

Coles would like to thank and acknowledge Ms Mesnage for the work she has done to improve accessibility for Australians.

Curso "Experto en TIC y discapacidad"

El curso Experto en TIC y discapacidad se desarrolla en varias ciudades de Sudamérica. Su contenido es:

Las acciones formativas se estructuran en bloques temáticos. En cada uno de ellos se proponen estrategias didácticas con la participación activa de los inscritos quienes, partiendo de su realidad concreta, diseñan las actuaciones encaminadas a mejorar el rendimiento de las personas con discapacidad.
Modelos de intermediación. 1. Competencias claves para la vida. 2. Los modelos M-FREE, B-FREE y PCP-FREE. 3. Nivel Inicial de Competencia. 4. Propuesta de Competencias. 5. Correlacionar software / hardware. 6. Adaptaciones y Assistive Technology. 7. Evaluación y Plan de mejoras.

Assistive Technology (rampas digitales).  1. Un movimiento voluntario. 2.Webcam, el ojo que todo lo ve. 3.Barrido intencionado en pantalla. 4.Joystick sustituye el teclado/ratón. 5.Reconocimiento de voz. 6. Teclados multifunción. 7.Leer con los oídos. 8.Magnificar la pantalla. 9. Leer con los oídos.

Competencias claves y NEE/ discapacidad.  1. La Web 2.0., Inclusión 2.0.  2. Autonomía y desarrollo personal.  3. Comunicación Aumentativa y/o Alternativa.  4. Competencias en Comunicación Lingüísticas.  5. Competencias en Matemáticas.  6. Otras competencias

Elaborar material multimedia. 1. El nuevo rol del profesor y alumno. 1.Herramienta de autor e integración curricular. 3.Objetos de aprendizaje y Tutores On-line. 4.Evaluación y selección de software educativo. 5. Aplicación educativa de los videojuegos. 6. La revista escolar digital: experiencia de inclusión.

Discapacidad auditiva  y fonoaudiología. 1.Tecnologías para el aprovechamiento de restos auditivos. El implante coclear. 2. Tecnología de la voz en la terapia del lenguaje. 3. Aprender sistemas aumentativos y complementarios del habla. 4. Desarrollo de estrategias lingüísticas: percepción y discriminación fonemática, ortografía y competencias semánticas, corrección sintáctica y morfosintáctica y habilidades lectoras.

Discapacidad visual.1. Ayudas de la tiflotecnología. 2. Leer la información de las pantallas: lectores de pantalla, lupas digitales, síntesis de voz, impresoras y línea braille. 3. Las barreras  del software e Internet: bibliotecas virtuales, libros electrónicos.

Discapacidad motriz.1. Marco situacional: lugar y ayudas técnicas. 2. Escritura e interacción: adaptar el teclado, teclear con una sola mano, personalizar el ratón, manejar el ratón con el teclado, joystick sustituye  al ratón, reconocimiento de voz, teclado en pantalla, conmutador, control láser. 3. Control ambiental  y los robots móviles. 4. TIC y los SAAC en personas con parálisis cerebral. 5. La formación en TIC como oportunidad laboral para personas con diversidad funcional motriz. 6. Editores de textos por selección dirección.

Síndromes y discapacidades. 1. Regla de etiquetas. 2.  Síndrome de Down. 3.  Espectro autista. 4. Hiperactividad / Déficit de Atención. 5. Síndrome de Rett. 6. Síndrome de Maullido de gato. 7. Síndrome XFrágil. 8. Síndrome de Angelman. 9. Síndrome de Prader-Will. 10. Síndrome de Sotos. 11. Síndrome de Apert. 8.12. Síndrome de William 13. Síndrome de Esclerosis Tuberosa. 14. Síndrome de Cornella de Lange. 15. Parálisis cerebral.

Entrevista a Jesús Hernández, director de Accesibilidad de Fundación ONCE

Muy interesante la entrevista a Jesús Hernández, director de Accesibilidad de Fundación ONCE: La falta de accesibilidad es la forma más sutil de discriminación. En esta entrevista, Jesús Hernández habla de las tecnologías accesibles (o de la accesibilidad a la tecnología): "Tecnologías Accesibles son aquellas que pueden usarse de forma confortable y segura".

Análisis de un rediseño accesible de un sitio web

El artículo Accessibility Originates With UX: A BBC iPlayer Case Study es una fantástica explicación del rediseño del reproductor multimedia de la BBC.

Un excelente ejemplo de cómo no basta con aplicar las guías de accesibilidad al pie de la letra, hay que comprobar la experiencia de usuario para lograr un producto realmente accesible.

¿De qué color es este vestido?

La semana pasada el mundo se volvió loco por la siguiente fotografía de un vestido:

Unos lo veían azul y negro (así lo veo yo, aunque el negro en el cuello es gris o marrón porque la fotografía está sobreexpuesta), otros lo veían blanco y dorado:

• ¿De qué color es este vestido?
• El vestido: día 2

¿Cómo puede ser que la gente viese diferentes colores? El rojo es rojo, el verde es verde y el azul es azul. Pues no, el color es una percepción subjetiva. Y además, algo muy importante: lo que vemos depende de las condiciones ambientales en las que vemos las cosas: Por qué unos vemos el vestido bien y el resto no tenéis ni idea.

¿Y todo esto qué tiene que ver con la accesibilidad web? Muy sencillo, discusiones parecidas se producen todos los días en miles de gabinetes de diseño, no por el diseño de vestidos sino por el diseño de páginas web.

Alguna vez he asistido a alguna reunión sobre el diseño de páginas web y he escuchado cosas como "cambia ese color, hazlo un poco más anaranjado" o "satura ese color, no tiene fuerza". Tonterías, porque es bastante improbable que alguien llegue a ver los mismo colores que se ven cuando se diseña una página web.

La siguiente imagen aclara el problema: no todo el mundo tiene la misma pantalla de ordenador, ni la misma tableta, ni el mismo teléfono móvil, ni lo tiene ajustado con los mismos niveles de brillo y contraste, ni lo está viendo en la misma sala con la misma iluminación, ni... y muchos más factores.

Desgraciadamente, en el diseño web muchas veces se pierde el tiempo discutiendo cosas que al final poca importancia va a tener (la búsqueda de los colores "perfectos"), y sin embargo no se presta atención a otras cosas que sí que son importantes (que los colores tengan el suficiente contraste).