Todo tipo de información sobre accesibilidad en la Web: errores de accesibilidad, ejemplos de páginas inaccesibles, noticias, software, hardware, productos de apoyo, consejos, pautas y guías de accesibilidad, WAI, WCAG, Norma EN 301 549, legislación, etc.
Me ha sorprendido descubrir una conferencia de Stephen Hawking en TED. ¿Cómo la hizo? Parece que la hizo en directo, pero todo lo que dijo lo tenía escrito, porque tal como explica el presentador, para contestar una pregunta tardó 7 minutos en escribir la respuesta.
En las siguientes fotografías podemos ver el sistema de barrido que utiliza:
Este sistema es el antiguo, ahora utiliza otro sistema, aunque conserva la voz robótica que le identifica.
En la siguiente fotografía se puede ver la respuesta que tardó 7 minutos en escribir:
El periódico El País hace uso de las nuevas etiquetas de HTML para las imágenes. Sin embargo, comete un error porque repite el texto de la figura (ficaption) en el atributo title de la imagen y un lector de pantallas puede leer los dos textos, causando confusión en el usuario.
Hola, bienvenido al vídeo “HTML y CSS – Accesibilidad para personas con baja visión” del curso introducción al desarrollo web. Mi nombre es Cristina Ponce García y soy estudiante de Ingeniería Multimedia en la Universidad de Alicante.
En este vídeo te voy a dar algunos consejos para que tus páginas web sean accesibles a personas con baja visión.
Pero antes de empezar quiero explicarte los diferentes casos que vamos a considerar. Cuando hablamos de baja visión, normalmente pensamos en tres casos:
Miopía: personas con dificultad para ver de lejos.
Hipermetropía: personas con dificultad para ver de cerca.
Astigmatismo: personas con dificultad para enfocar.
Pero, existen otros muchos problemas de visión que son menos conocidos ya que no son tan comunes.
De todos los problemas existentes, en este vídeo nos centraremos en los casos de:
Visión periférica: como su nombre indica, son personas que solo ven por la periferia del campo visual.
Visión con reducción del campo visual: al contrario que la visión periférica, son personas que tienen su campo visual reducido por lo que no ven por la periferia.
Ahora que ya sabemos en qué consisten estos problemas, comenzaremos con los consejos.
Empezaremos por la visión general de una página e iremos poco a poco centrándonos en las cosas más específicas.
Empecemos con el caso del campo visual reducido.
Haremos una simulación de cómo vería una persona con este problema este ejemplo de página web.
Como se puede apreciar, una persona con este tipo de problema se perderá fácilmente a la hora de navegar por la página si no hay nada que le indique en ningún momento dónde se encuentra.
Añadir líneas entre las distintas partes de la página como la sección para registrarse o introducir cada imagen o noticia dentro de un recuadro puede ser una solución, pero la persona podrá seguir perdida si las secciones son muy amplias.
Si, además de las líneas, añadimos colores distintivos entre las diferentes secciones como pueden ser la cabecera, el pie de página o una sección de noticias la persona sabrá en todo momento en qué parte de la página se encuentra.
En el caso de una persona con visión periférica, el anterior ejemplo de página web se vería de la siguiente forma.
Como se puede apreciar, estas personas no tienen problema a la hora de situarse y navegar por la página web por lo que no será necesario realizar ningún tipo de cambio con respecto a la visualización general de la página.
Continuaremos hablando sobre qué tipo de fuentes y colores son mejores para estas personas.
Si buscamos en internet los tipos de letra más utilizados a la hora de desarrollar una página web obtendremos el siguiente listado.
Escogeremos las tres primeras opciones y las analizaremos.
Primero aclaremos la diferencia entre las fuentes serif y sans-serif. Como se puede apreciar, las fuentes serif son aquellas en las que sus letras tienen remates, al contrario que las sans-serif. En una página impresa la resolución de impresión es muy alta por lo que esos remates en los pies de las letras quedan muy bien definidos, pero en una pantalla de ordenador la tipografía con "serif" produce efectos en las letras que hacen dificultosa su lectura. Por ello se debe evitar su uso en los estilos de la página web que no sean para impresión.
Veamos entre las dos tipografías que quedan cuál es más apropiada.
Centrándonos en las personas con visión periférica, ya que las personas con campo visual reducido no tendrían problemas a la hora de leer una línea, como podemos observar, en los dos ejemplos la persona tiene centrada la vista en la palabra “de”, se puede apreciar que en el segundo caso, al ser las letras más gruesas y, por lo tanto, estar más separadas unas de otras, la pérdida de la percepción de letras es menor, por lo que podemos determinar que es más accesible.
En el caso de textos largos, el segundo ejemplo puede resultar pesado cuando se lleva mucho tiempo leyendo, por lo que utilizaremos el primer tipo de letra para párrafos y el segundo para títulos.
Para ayudar a las personas con baja visión a la correcta lectura de estos párrafos debemos tener en cuenta que, como hemos visto anteriormente, la percepción de las letras es difícil si estas se encuentran muy juntas, por lo que es recomendable añadir un pequeño espacio entre ellas con la propiedad para textos de letter-spacing de CSS.
Además, las personas con visión periférica, tienen problemas a la hora de cambiar de línea ya que, como no ven por el centro, es común que se salten líneas si estas están muy juntas. Por ello, es recomendable utilizar line-height en CSS para añadir un interlineado mayor a los párrafos.
En cuanto a los colores de texto y fondo, es importante que exista un alto contraste entre ambos para que el texto sea legible. También es importante tener en cuenta que hay personas sensibles a la luz, por lo que es recomendable no abusar de los fondos claros en partes de la web donde haya mucho texto, en vez de estos, se puede aplicar un fondo gris clarito que no dificulte la lectura del texto, pero que no canse la vista de estas personas.
Terminaremos hablando de los formularios.
Ya que los campos de los formularios pueden causar algunas dificultades a la hora de clicar sobre ellos, no debemos olvidar utilizar la etiqueta de HTML label para hacer más sencilla la accesibilidad a la hora de rellenar los campos. Además, es aconsejable que los botones que creemos, no sean demasiado pequeños para que las personas con dificultades puedan acceder a ellos de forma fácil.
Estos son los consejos que recomiendo que apliques en tus páginas web, no olvides nunca tener en cuenta a personas con discapacidad a la hora de crearlas.
Espero que te haya sido de ayuda este vídeo.
Muy interesante el artículo How the Web Became Unreadable. El artículo habla de los problemas que existen en los diseños de páginas web actuales en los que no se cumplen algunas reglas básicas de accesibilidad como garantizar un contraste mínimo en los colores.
El valor de la relación de contraste es 2.71:1, muy alejado del 4.5:1 necesario para cumplir con el nivel AA para el texto normal. Y para nivel AAA sería 7:1, es decir, mucho más alejado.
En los últimos días he tenido un intercambio de correos electrónicos con una estudiante de mi curso en línea iDESWEB:
CORREO ESTUDIANTE 1
Quisiera aprovechar este e-mail para destacar dos aspectos relevantes del curso: en primer lugar, al ser online tiene la ventaja de poder hacerse al ritmo de uno y desde cualquier parte del mundo. Yo lo he hecho desde Chile. En segundo lugar, agradecerle mucho la transcripción de sus clases. Ha sido de gran ayuda para poder seguir su curso, ya que, debido a una discapacidad en mis extremidades superiores, no puedo teclear el ordenador, ni siquiera escribir a mano, por lo que tomar apuntes es algo complicado. Así que la transcripción del contenido de los tutoriales me ha facilitado muchísimo las cosas. Afortunadamente, puedo controlar el computador con un programa de voz, pero hay cosas que no puedo hacer o me resultan muy complicadas.
Ojalá sigan utilizando el mismo método, para que personas con limitaciones como yo puedan también formarse y disfrutar de estos cursos.
MI RESPUESTA 1
¿Me puedes contar más cosas sobre tu situación? ¿Qué discapacidad es? ¿Usas Dragon Naturally Speaking? ¿Para qué has usado las transcripciones?
CORREO ESTUDIANTE 2
Padezco una enfermedad rara, cuya causa los médicos no conocen y, por tanto, sólo me pueden tratar los síntomas. Sufro de tendinitis crónica por una deficiencia de mi tejido conectivo y también de una atrofia muscular progresiva. Afecta a diversas partes del cuerpo, y muy especialmente a los brazos. Por esta razón no puedo hacer cosas tales como escribir, teclear el computador, coger mínimos pesos, abrir puertas, usar teléfonos o móviles… La verdad es que necesito ayuda para muchas cosas.
Uso Dragón Naturally Speaking desde hace 7 años. Gracias a él puedo navegar por Internet, escribir, trabajar y también leer. Mi trabajo me exige leer mucho, pero lamentablemente no puedo ni coger un libro, ni pasar sus páginas. Así que siempre le pido a alguien que los digitalice y, enseguida, mediante un programa de conversión de archivos, AbbyFine Reader, los paso al formato epub. Finalmente lo visualizo con Calibre. Utilizo este programa para leer, porque tengo algunos problemas de visión y éste permite aumentar el tamaño de la letra tanto como tú quieras. Considero que es importante concienciar a la gente de que no raye ni escriba en los libros públicos como los de la biblioteca, porque al digitalizarse se visualizan muy mal. También es de gran ayuda que las páginas web sean responsivas, para que se pueda aumentar el tamaño sin que se pierda la visualización íntegra de la página.
Actualmente, utilizo la versión 13 de Dragon en un Notebook LeNovo Y700-17/SK, con Pentium 7, 16 Gb RAM 2,6 Ghz. Este Dragon tiene comandos muy interesantes que agilizan el uso del computador, pero tiene graves fallas. Se bloquea a cada rato con ciertos navegadores y con Office. Con Edge sencillamente no funciona. Con Explorer funciona un poco mejor, pero no lo utilizo porque se bloquea constantemente. Con Google Chrome, en general, marcha bien pero también se congela. Es recomendable no tener muchas pestañas abiertas al mismo tiempo. En el caso de Firefox no se bloquea, pero es una lata usarlo, porque no tiene habilitado los comandos especiales de voz.
Lo que más utilizo es el programa de micrófono remoto del Dragon, que funciona con la red Wifi. Me acomoda mucho porque al no poder estar sentada mucho rato, debido a dolores musculares, tengo que levantarme y moverme constantemente, lo que me obliga a distanciarme considerablemente del ordenador. La desventaja de esta aplicación es que se desconecta frecuentemente del computador. Sospecho que esta desconexión se debe a un defecto del Windows 10, pues antes, con Windows 7 y Bonjour funcionaba sin problemas.
En general, el Dragon requiere de mucha memoria y rendimiento, por lo que te obliga a tener un equipo muy potente. Ojalá saliera algún competidor. Además, tiene la desventaja de no poder usarse en un Apple , porque no tienen versión en español.
Usted me preguntaba por el uso de las transcripciones de los videos tutoriales. La verdad es que éstas me ahorran mucho trabajo, porque es muy difícil manejar los vídeos con el Dragon (pausar, volver atrás, etc), y porque yo no puedo tomar apuntes mientras los escucho. Sinceramente, creo que sin ellas no hubiera podido realizar el curso.
Disculpe la extensión de mi correo, pero no he sabido resumir mejor los principales obstáculos a los que me enfrento. Realmente le agradezco que se dedique al área de accesibilidad web, porque, sin la tecnología, la discapacidad te acaba dominando y te conviertes en prisionero de tu propio cuerpo.
MI RESPUESTA 2
¿Has pensado en usar un sistema de eye tracking? ¿O quizás ya lo has usado y no es útil?
CORREO ESTUDIANTE 3
Olvidé decirle que la mejor experiencia que he tenido con el dragón es cuando lo utilice en su versión 12.5 con Windows 7.
Conozco de oídas el programa eye tracking. Sé que lo usan personas que no pueden hablar, y están absolutamente inmovilizadas, como los que sufren esclerosis lateral amiotrófica o síndrome de enclaustramiento. Recuerdo que hace años, en la universidad en la que trabajaba, la Católica de Chile, un profesor de teatro sufrió un grave accidente que le provocó este síndrome de enclaustramiento, y los alumnos y profesores hicieron una colecta para poder comprar el computador que usa este software. Allí tuve constancia de que era radicalmente caro.
Desconozco si ahora tiene un precio más económico y si se puede utilizar en cualquier computador o requiere de un hardware especial. ¿Usted sabe eso?
Lo ideal es que se pudieran combinar el dragón y el eye tracking. Pero lo veo complicado.
MI RESPUESTA 3
Los sistemas de eye tracking son bastante caros. Los más conocidos son de la compañía Tobii: http://www.tobii.com/
Inicialmente, esta compañía sólo los vendía como producto para la investigación de la usabilidad de productos como las páginas web. Pero parece que se ha dado cuenta de que también hay mercado para venderlo como producto de apoyo y tiene algunos productos destinados a ese segmento con precios inferiores.
También hay otras empresas que intentan competir con Tobii y ofrecen precios menores.
En tu caso, una combinación de ambos sistemas quizás podría ser una buena opción: el sistema de eye tracking sería el sustituto del ratón y el sistema de reconocimiento de voz el teclado. Pero habría dos problemas importantes: el precio y la compatibilidad de tener los dos sistemas en funcionamiento.
Los problemas que tiene Dragon son extraños. Y también es más extraño que tenga unos altos requisitos de memoria y de velocidad: Dragon debe tener al menos más de 15 años de vida, los ordenadores de hace 15 años tenían considerablemente menos potencia que los ordenadores actuales, no debería existir ningún problema para trabajar con Dragon en cualquier ordenador actual.
How can technology help improve our quality of life? How can we navigate the world without using the sense of vision? Inventor and IBM Fellow Chieko Asakawa, who's been blind since the age of fourteen, is working on answering these questions. In a charming demo, she shows off some new technology that's helping blind people explore the world ever more independently ... because, she suggests, when we design for greater accessibility, everyone benefits.
Months after he was born, in 1948, Ron McCallum became blind. In this charming, moving talk, he shows how he is able to read — and celebrates the progression of clever tools and adaptive computer technologies that make it possible. With their help, and that of generous volunteers, he's become a lawyer, an academic, and, most of all, a voracious reader. Welcome to the blind reading revolution.
Provide captions for video and audio
Captions for audio and video don’t just help the hearing impaired. For example if your first language isn’t the one being spoken or the presenter has a strong regional accent, captions can help.
You could even be in a situation where the device you are using doesn’t have any working speakers or you are in a location where the speaker isn’t loud enough to be heard over the background noise. Content distinguishable between the foreground and background
Having a high contrast between the text and background will help make it easier for low vision users to read the copy on your website. High contrast also helps users trying to view a website on a screen in bright sunlight, or when a user has battery saver mode on or basically any scenario where the screen isn’t being viewed in the best conditions.
Make all functionality available from a keyboard
The mouse or trackpad is utterly useless if you are blind and use a screen reader to navigate your way around the web. Being solely able to navigate the web using just the keyboard is essential.
If you don’t require a screen reader being able to navigate the web with the keyboard is still really useful. Some users prefer to tab up and down content with the keyboard instead of taking their hand away to use the mouse. But it really helps when you are using a wireless mouse and the batteries fail. It means you can still carry on using the web with just the keyboard (albeit a little slower).
Make text content readable and understandable
Any effort to make your site technically accessible will be wasted unless your content is written as clearly and simply as possible.
People with disabilities experience text in many different ways but so does everyone else. The steps you should follow to create accessible copy will help everyone.
What would a city designed for the blind be like? Chris Downey is an architect who went suddenly blind in 2008; he contrasts life in his beloved San Francisco before and after — and shows how the thoughtful designs that enhance his life now might actually make everyone's life better, sighted or not.
Writing HTML with accessibility in mind explica varias cosas que se deben escribir HTML para mejorar la accesibilidad de las páginas web. Todos estos consejos no garantizan que la página sea totalmente accesible, pero sí que solucionan la mayoría de los problemas:
It’s important to define the natural language of your document
You can hide content using the hidden attribute
Sometimes it’s better to add a blank alt attribute to an <img> element
If you need a button, use the <button> element
Structuring your markup correctly with headings is important
Using landmarks helps people navigate your site
The main page content, header, and footer are also landmarks
Fieldsets are great for grouping form elements and giving them more context
