Siete cosas que todo diseñador debe saber sobre accesibilidad

En 7 Things Every Designer Needs to Know about Accessibility es un fantástico artículo en el que se comentan las siguientes siete cosas:

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.

Tremendo error en el periódico El País

En las galerías del periódico El País, el texto que acompaña una imagen se repite en la imagen como texto alternativo. Por tanto, un lector de pantallas lee lo mismo dos veces.

Por ejemplo, MEMENTO’, ‘BATMAN’, ‘DUNKERQUE’...: LAS PELÍCULAS DE CHRISTOPHER NOLAN, DE LA PEOR A LA MEJOR:

Al desactivar las imágenes aparece el texto alternativo.

Efectivamente, el texto alternativo es la repetición del texto que acompaña a la imagen.

Los botones deshabilitados apestan

Hace unas semanas escribí la entrada ¿Los botones deshabilitados? en la que hablaba del contraste de los botones deshabilitados. Mi consejo final fue:

Por tanto, yo creo que aquí la recomendación de WCAG 2.0 es discutible y sí que se  debería cumplir el requisito mínimo de contraste en los elementos deshabilitados.

Ahora he encontrado el artículo Disabled buttons suck:

Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.

El artículo comenta varios de los problemas que suelen ocasionar:

• They fool users into clicking.
• They are hard to see.
• They don’t give any feedback.
• They give design teams a reason to rush through error handling.
• They make users think.
• Disabled buttons disable disabled users.

[Actualización 1/8/2017]

Un comentario adicional en Disabled buttons don’t have to suck!:

Didn’t read the article? Well, this sums it up:

Disabled buttons often suck because,

• often you can’t really tell if they are disabled, or you won’t be able to read / see the button due to lack of contrast;
• when you (accidentally) click them, you don’t get any feedback, leaving you in the dark;
• assistive technologies like screen readers often won’t be able to navigate to disabled buttons, so they won’t get any feedback on why they can’t find the submit button when they think they are done;

Disabled buttons are useful

What happens when you accidentally press Enter while in a form, if the submit-button is not disabled? Right, it will submit with all kinds of unnecessary errors and messages thrown at the user. Leaving them in confusion and anger. It’s in our muscle memory to press buttons we shouldn’t press.

They also convey useful visual information to (at least some) users that the form is not yet completed or the option is not yet available.

Just make disabled buttons better already

There is no technical boundary for us to improve disabled buttons in order to convey meaning to all (inclusive design). So,

get better contrast by using bigger font and/or darker colors;

Give assistive technologies, like screen readers, some information at the end of the form (visually hidden), since they won’t read information inside the button-tag (it’s often skipped).

give users information when they tap, hover or click the disabled button. Preferably give them directions to the first field that needs input or correction;

Remove the “disabled-attribute” from the button as soon as the last field has

8º Congreso Nacional CENTAC

Los días 6 y 7 de noviembre se celebrará el 8º Congreso Nacional CENTAC (Congreso Nacional CENTAC de Tecnologías de la Accesibilidad). La presentación del evento dice:

La transformación digital es un fenómeno complejo y transversal, pero no hay que olvidar que está impulsado por personas y su objetivo final son las personas.  No hay reglas fijas, ni mapas infalibles, el resultado de la transformación digital dependerá de decisiones de múltiples personas.  Por eso, el lema del  8º Congreso Nacional CENTAC de Tecnologías de la Accesibilidad es “Los protagonistas de la transformación digital”. 

Durante dos días, el 6 y 7 de noviembre, podréis escuchar a las personas que lideran la transformación digital en las empresas, la Administración Pública y el tercer sector, y también conocer los proyectos, productos y servicios innovadores de emprendedores y PYMES. Queremos que nos cuenten que hacen, que piensan y que compartan con todos los asistentes sus experiencias. 

Como ya sabéis los que habéis asistido a anteriores ediciones, los Congresos de CENTAC buscan reunir a las personas interesadas en las TIC y su accesibilidad y fomentar el conocimiento y las relaciones. Ven al 8º Congreso y ayuda a que la transformación digital sea accesible. Depende de nosotros.

Handsfree for Web

Desde Argentina he recibido un correo electrónico de un estudiante que me anuncia el lanzamiento de Handsfree for Web:

Me presento, mi nombre es Javier Perez, vivo en Argentina y estoy a pocas semanas de recibirme de Licenciado en Sistemas. Como trabajo final de la carrera hice una chrome extension llamada Handsfree for Web. Esta permite a través de la invocación de comandos de voz, y usando la api de reconocimiento de voz que provee google chrome, ejecutar todas las acciones que una persona realiza manualmente mientras navega la web de forma oral. 

La aplicación fue lanzada hace un par de días y me gustaría mucho que se difunda ya que considero que puede ser muy util para aquellas personas que se vean impedidas de interactuar con la computadora manualmente. 

La extension por el momento soporta comandos de voz en ingles y español, y permite interactuar con todos los componentes estándares que conforman los sitios web. También soporta todo tipo de interacción con el navegador en si. (pestañas, marcadores, descargas, historial...) 

Si bien la aplicación fue recientemente lanzada, y esta en una version inicial, no es un prototipo, la misma soporta cientos de comandos que permiten realizar todo tipo de acciones en la compleja web actual sin necesidad de instalación de algún software complementario. 

Es importante mencionar que la extensión es libre y gratuita sin ningún tipo de limitación en el uso. El procesamiento de voz se realiza en la nube, concretamente en los servidores de google, por lo que ademas es super liviana, no tiene requerimientos de hardware, solo el navegador google chrome y una conexión a internet es requerido.

En su página web tiene publicado el siguiente vídeo de demostración:

Primera sentencia basada en ADA por un sitio web no accesible

Según la noticia A court verdict raises the pressure for website accessibility, parece que en Estados Unidos se ha dictado la primera sentencia condenatoria por un sitio web no accesible:

Last month, a federal judge in Florida issued a verdict in favor of a Winn-Dixie customer who had sued the grocery chain, claiming it violated the Americans With Disabilities Act because its websites were not accessible to blind and vision-impaired users. Although there have been pretrial court rulings and settlements in previous cases, this is believed to be the first trial verdict in a website ADA lawsuit.

Como dice ahí, parece que esta es la primera sentencia de verdad, los casos anteriores se resolvieron antes de que acabase el juicio.

La condena obliga al demandado a implementar las medidas necesarias para que el sitio web sea accesible:

The judge ordered Winn-Dixie to implement an accessibility policy that meets current standards, to train employees who do site development work, and to test the site regularly to ensure it remains accessible.

Conferencia Accesibilidad web (5)

Conferencia Accesibilidad web (4)

Conferencia Accesibilidad web (3)

Creación de ePubs interactivos y accesibles: mini-libros electrónicos modulares

El curso Creación de ePubs interactivos y accesibles: mini-libros electrónicos modulares organizado por la Fundación UNED tendrá lugar del 10 al 14 de julio. Se oferta tanto de forma presencial como online en directo y en diferido.

Conferencia Accesibilidad web (2)

Conferencia Accesibilidad web (1)

Muerte por el pavimento táctil

El pavimento táctil se emplea para ayudar a los usuarios ciegos a desplazarse por una ciudad o por un edificio.

El artículo Death by Tactile Paving: China's Precarious Paths for the Visually Impaired muestra algunos ejemplos muy interesantes de como un uso incorrecto del pavimento táctil puede causar la muerte de los usuarios ciegos.

En las páginas web puede ocurrir lo mismo: una mala aplicación de la accesibilidad web puede causar efectos desastrosos.

¿Hay realmente un caso de negocio para la accesibilidad web?

En Is there really a business case for website accessibility? se puede leer:

• The most recent ONS estimate of the UK population is 65.11 million in mid-2015 of whom 87.9% (46.47 million) have internet access.
• CAPGemini projected overall UK online spending to be £126 billion by the beginning of 2016 equating to an average spend per head of the UK population with internet access of £2710.
• In 2016, the Office of National Statistics (ONS) estimated there were 8.6 million internet users with a disability in the UK
• This Survey found that 71% of internet users with a disability have access needs; this translates to 6.1 million people
• Taking an average spend per head of £2710, the online spending power of 6.1 million disabled people with access needs in 2016 is £16.55 billion.
• The Survey found that 71% of the total 6.1 million disabled internet users with access needs (4.3 million people) simply click-away when confronted with a problematic website.
• These figures equate to a click-away figure of £11.75 billion lost in 2016 from those sites which are not accessible.

La accesibilidad de Endesa

En Discapacidad. el Cermi pide a sanidad que sancione a endesa por la inaccesibilidad de sus webs podemos leer:

El Comité Español de Representantes de Personas con Discapacidad (Cermi) ha presentado una denuncia ante el Ministerio de Sanidad, Servicios Sociales e Igualdad, solicitando que abra expediente sancionador contra la compañía eléctrica Endesa por el incumplimiento de las condiciones de accesibilidad de sus páginas de internet 'www.endesaclientes.com' y 'www.endesa.com'. 

"Endesa, como empresa de especial trascendencia económica, está obligada por la Ley de Servicios de Sociedad de la Información y del Comercio Electrónico a que sus páginas corporativas de Internet sean accesibles para personas con discapacidad y personas de edad avanzada, de acuerdo con los criterios generalmente aceptados en esta materia", según explica el Cermi en una nota.

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

5 Things UX and Visual Designers Can Do to Get Started with Accessibility describe cinco cosas que debe conocer un diseñador visual o de experiencia de usuario:

1. Specify Heading Levels in Your Wireframes and Style Guides
2. Write Alt Text for Images
3. Design Skip Links
4. Choose Your Fonts Wisely
5. Check Your Color Contrast

¿Los botones deshabilitados?

He recibido por correo electrónico la siguiente pregunta:

Los botones deshabilitados, normalmente están en un gris claro, ¿Estos deben tener el contraste requerido? o al estar deshabilitado no importa.

Es una pregunta muy interesante que requiere una explicación justificada.

Web Content Accessibility Guidelines (WCAG) 2.0 dice:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

La oración "Text or images of text that are part of an inactive user interface component" lo deja claro: lo que forma parte de una interfaz de usuario inactiva no necesita cumplir el requisito de contraste mínimo.

Sin embargo, los elementos deshabilitados de una interfaz proporcionan información importante sobre la propia interfaz y si no se cumple el requisito de mínimo contraste, ciertos grupos de usuarios pueden tener problemas en la interpretación de la interfaz.

Por tanto, yo creo que aquí la recomendación de WCAG 2.0 es discutible y sí que se  debería cumplir el requisito mínimo de contraste en los elementos deshabilitados.

Para saber más cosas sobre el contraste recomiendo la lectura de Color Contrast And Why You Should Rethink It.

Cómo realizar una auditoria de accesibilidad

No uses símbolos en el texto

No uses símbolos en el texto porque algunos lectores de pantalla no los van a leer, y aquellos que los leen son capaces de leer algo distinto a lo que uno espera: Why Don’t Screen Readers Always Read What’s on the Screen? Part 1: Punctuation and Typographic Symbols.

Blissymbols, un sistema de escritura ideográfico

Blissymbols es un sistema visual de escritura basada en el empleo de ideogramas. Un ideograma es "un signo esquemático no lingüístico que representa globalmente conceptos o mensajes simples".

Este sistema puede ser usado por personas que tienen problemas del habla o discapacidad física.

La siguiente imagen es un ejemplo de una frase escrita con Blissymbols:

significa "Yo quiero ir al cine".

En Blissymbolics Communication International se puede encontrar más información.