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

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
3H
2M
15S

Pruebas con simuladores de discapacidades visuales

9/35
Recursos

Aportes 45

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淩endering鈥 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:

La extensi贸n 鈥淣oCoffee鈥 ya no esta disponible pero en la p谩gina que se encuentra en 鈥淟ecturas recomendadas鈥 se encuentran varios link de otras extensiones, una muy interesante es la de 鈥淪pectrum鈥 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

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

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.

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

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

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

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

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

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.

馃憣

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