Dominar las bases de la accesibilidad

1

¿Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas automáticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

15

Usando HTML semántico en el contenido principal de nuestro sitio

16

Usando HTML semántico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios dinámicos

Conclusión

35

Siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Pruebas con simuladores de discapacidades visuales

9/35
Recursos

Aportes 34

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

Discapacidades 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.

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.

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

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.

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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

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.

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.

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

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

Este es uno de los mejores cursos que he visto en toda mi vida.

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

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

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!!

👌

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

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