Pruebas con simuladores de discapacidades visuales

Las DevTools de Chrome tienen un apartado para simular las deficiencias visuales:
 

En el navegador de Google Chrome hay una opción dentro de las herramientas de “Rendering” par simular este tipo de condiciones visuales. pero la verdad muy poco se usan, hasta ahora que cobran en mi caso un valor muy importante.

Discapacidades visuales:

• Visión borrosa
• Protanopia >>> Significado: https://es.wikipedia.org/wiki/Protanopia
• Deuteranopia >>> Significado: https://es.wikipedia.org/wiki/Deuteranopia
• Acromatopsia >>> Significado: https://es.wikipedia.org/wiki/Acromatopsia

La extensión “NoCoffee” ya no esta disponible pero en la página que se encuentra en “Lecturas recomendadas” se encuentran varios link de otras extensiones, una muy interesante es la de “Spectrum” que aplica varios efectos de Discapacidad Visual como la Protanopia o la Deuteranopia

El siguiente link lleva directamente a la extensión de Google Chrome
https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb/related?hl=en

Si es bueno usar colores para un significado, lo que tenemos que hacer es no solo usar el color sino una descripción escrita, algo así como el alt en las etiqueta img.
Lo que tenemos que hacer es unir la accesibilidad con la usabilidad.

Discapacidades visuales:

• Visión borrosa
• Protanopia
• Deuteranopia
• Acromatopsia

Extensión de Chrome: NoCoffe

Pruebas con simuladores de discapacidades visuales

Vamos a enforcarnos en 4 discapacidades visuales:

• Vision borrosa.
• Protanopia: es la carencia de sensibilidad al color rojo, una disfunción visual relacionada con la percepción del color. Se denomina también dicromacia roja.
• Deuteranotopia: Es la ausencia de los fotorreceptores retinianos del color verde.
• Acromatopsia: es una enfermedad congénita y no progresiva que consiste en una anomalía de la visión a consecuencia de la cual sólo son percibidos los colores blanco, negro, gris y todas sus tonalidades.

Para llevar a cabo una simulacion, utilizamos una extension de Chrome llamada NoCofee.

En esta extension usaremos alguno atributos:

• Blur → para disfuminar la pagina.
• Color deficiency → encontramos las demas deficiencias.

Importante NO usar colores para mostrar significado. Como rojo para mensajes de error o verde mensajes de aprovación.

La exención no coffee chrome esta inhabilitada. Usen el que trae por defecto el crome.

Enlace de la extensión NoCoffee que nos ayudará a realizar las pruebas de las anteriores discapacidades en nuestro sitio web >>> https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

yo no encontre la extencion en crome, pero si en firefox: https://addons.mozilla.org/es/firefox/addon/nocoffee/

yo creía que el curso iba a ser aburrido, cada clase es mejor que la anterior

En el caso de Acromatopsia ¿Debemos realizar una web con mas contraste entre elementos?

PRUEBAS CON SIMULADORES DE DISCAPACIDADES VISUALES

• Visión borrosa
• Protanopia (Perdida del color rojo)
• Deuteranopia (Colores mas amarillos)
• Acromatopsia (No deja ver ningún color)

HERRAMIENTA: NO COFFE, es una extensión que se instala en el navegador para simular deficiencias en la visión

También existe la Tritanopia que es cuando no vemos bien los azules. En las DevTools de Chrome podemos escoger esta discapacidad.

Al aparece la extension de Google Chrome NoCoffee ya no esta disponible?

Creo que luego de ver mi sitio web concluyo que los que manejan mas colores neutros o escalas de grises no tienen tantos problemas de accesibilidad como los que tienen una gama mas amplia de colores.

Creo que deberían de actualizarlo, ya que la extension NoCoffee parece no estar disponible

Protanopia ⇒ no deja ver los rojos tan fuertemente, los cambia un poco a un tono verdoso

Deuteranopia ⇒ Alteración de colores, cambian a hacer los colores más amarillentos

Acromatopsia ⇒ Incapacidad de ver cualquier color

• Las pruebas automatizadas nos ayudan a medir hasta cierto nivel la accesibilidad de nuestro sitio, pero no bastan para poder alcanzar a todas las personas que se desea ⇒ Para ello existen simuladores como ser NoCoffee en Chrome

Discapacidades visuales

• Visión borrosa
• Protanopia
• Deuteranopia
• Acromatopsia

RESUMEN: Podemos simular algunas discapacidades con herramientas de desarrollo para tener una experiencia cercana a estas discapacidades y poder evaluar nuestros sitios

Para este paso recomiendo tota11y de Khan Academy… https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe

Siguiendo con la misma pagina que analice usabilidad, Color Hunt. Ahora aplique dos pruebas de visión. Aplicando un Blur de 3, ya es ilegible y con la protanopia es un problema grande ya que modifica todas las muestras de color.

Realmente bueno el curso, me está sorprendiendo con cada video.

Para los que usamos Firefox aquí encuentran las opciones para simular.

Como diseñadores y programadores web, NO debemos valernos sólo de colores para mostrar significados en la UI o en los mensajes de interacción. Ej: Utilizar un tache rojo para mostrar un error o un icono verde para mostrar que algo fue completado, pagado, enviado o hecho de manera exitosa.
Ya que si hacemos este tipo de malas prácticas, no estamos siendo inclusivos, puesto que dejamos fuera a muchos usuarios con problemas de visión que no serán capaces de entender el significado por medio de gráficos con colores, ya que, o no serán capaces de percibir ningún color o verán un color totalmente distinto (alteraciones visuales).

https://chrome.google.com/webstore/detail/a11y-html5-validator/cfgfmngpbhlaagbfjhellojpcpcjmnkl/related?hl=es

https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=es

https://chrome.google.com/webstore/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc?hl=es

Es fantástico para presentar un buen producto al publico gracias

Entiendo que en esta clase se hace referencia a no usar colores para dar significado, que usaríamos entonces? Texto? Algún tooltip para dar indicaciones?
Gracias!!

Hola, si están usando Firefox aparecen las mismas opciones de configuración de las deficiencias de color(excepto el desenfoque) en la opción de accesibilidad.

para Firefox: https://addons.mozilla.org/en-US/firefox/addon/nocoffee/

👌

Que interesante herramienta 😮

No usar colores para mostrar significado.

Al probar mi sitio (Que tiene muchísimo rojo) Veo que cambia demasiado D:
Toca hacerle unos cambios

No usar color para los significados, anotado

Una gran herramienta para nuestro proyectos!

Desconocía todos estos aspectos de accesibilidad de la Web.

Siento que conecto muy bien con este curso, es muy interesante, esto permite que se tenga en cuenta que nuestros productos digitales sean inclusivos, para todo tipo de publico. DevTools de mucho valor.

No usar sólo colores para transmitir una información importante

Magistral. No sabía que podíamos hacer esto con los navegadores, ¡es realmente importante!

Discapacidades visuales:

• Visión borrosa
• Protanopia -> Cambia los colores rojos a verdes
• Deuteranopia -> Los colores son más amarillos de lo normal
• Acromatopsia -> Incapacidad de ver cualquier color

Uno simplemente desconoce esto y por esta razón ya le cierra la puerta a otras personas para acceder al contenido

Importante si se va a utilizar el color es también acompañarlo de texto para aquellos que no tienen la posibilidad de tener una visión normal

Las DevTools de Chrome ya permiten hacerlo sin necesidad de extensión