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 automáticas con Lighthouse

8/35
Recursos

Aportes 54

Preguntas 6

Ordenar por:

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

Si usan Firefox hay un feature que se agrego hace poco que es el apartado de accesibilidad, acceden a el de la misma forma que en chrome con lighthouse, solo basta con dar click derecho, inspeccionar elemento y buscar el apartado de accesibilidad

no creo que este curso deba estar en la carrera de UX al manos de forma tan técnica, no se de html, CSS o JavaScript no debería ser obligatorio en la carrera. por favor Platzi valide este requerimiento!

Lighthouse es una herramienta automatizada de código abierto diseñada para mejorar la calidad de tus apps web. Puedes ejecutarla como una extensión de Chrome o desde la línea de comandos.

El curso es oro, cada clase vale muchisimo la pena!!!

Cuando estoy creando un proyecto, agrego al linter en especial este paquete eslint-plugin-jsx-a11y el cual me va mostrando errores o advertencias para mejorar la accesibilidad. Recomendado.

Muy interesante y útil esta herramienta 👌

Ya no se llama audits sino Lighthouse

Excelente curso. Muy recomendado, trabajo con Testing y he podido evidenciar la ausencia de estos principios en muchas de las aplicaciones que tienen en la compañía que trabajo. Ahora estamos con Flutter y queremos hacer aplicaciones mobile accesibles, aplicando las reglas de lighthouse que están apalancadas por la W3C. Estas pruebas las hacemos literalmente Automáticas, ya que nos forkeamos el código de lighthouse, y lo introducimos en un script de python que se ejecuta cada que hay un cambio, esto busca evaluar continuamente el estado de la accesibilidad. El resultado siempre estará entre 0 y 1, nuestro tope es 0.9, si disminuye de este, rompe el build (CI) y no permite subir los cambios a las ramas de desarrollo, QA y PDN.

casa de la luz, para los amigos
es broma, es faro

Platzi (estando en esta clase) me sale con un puntaje de 82. Lo probé en la página oficial de mi universidad y tiene 17…

Lo prove en Youtube y me salio 90% y en la web de mi universidad un 54%…en algún momento voy a presentar el proyecto para que lo hagan más accesible mas que ahi alumnos con problemas de accesibilidad

Ahora para acceder a Lighthouse ya no debes ingresa en Audit, ahora Lighthouse tiene su propia sección.

Pregunta: ¿Puedo evaluar mi sitio web en localhost con Lighthouse? ¿o solo sitios publicados? 😃

😱 woww.. no sabia que existía esa poderosa herramienta 😱🤩🤩🥰🤩❤ gracias por estos super poderes!

quiero hacer una pagina web como la de platzi, podre?

no me corre solo me dice que esta calentando pero se queda trabado😥

Que gran herramienta para comprobar si hay una accesibilidad optima para nuestra web o la de nuestros clientes.

Excelente herramienta mostrada en esta clase.

Entre a la pagina de Color Hunt, que uso frecuentemente pasa elegir paletas de color para proyectos. El análisis me dio como resultado un 64%, en algunos casos habla sobre el contraste de textos, pero viendo la pagina pienso que esta justificado el poco contraste ya que son elementos que no son prioridad en el diseño. Pero Lighthouse al parecer es muy claro con las especificaciones de accesibilidad, lo que se debe hacer supongo, en ese caso es buscar el contraste mínimo aceptado. Para cumplir con la accesibilidad y a su vez seguir con la intención de diseño de jerarquizar.

Se actualizo ya no se llama audits, ahora es directamente Lighthouse. Aunque sólo es eso, esta súper descriptivo por si alguien tiene dudas de cómo encontrarlo. Lo demás sólo varía una que otra características cuando inspeccionas las recomendaciones pero fuera de eso se sigue utilizando normalmente 😄

Pensé que estaría peor mi web personal, pero al parecer esta muy bien https://andrevega.com/

No había visto esta joya de curso solo hasta ahora que se me dio por consultar, gracias Juliana.

Esta herrramienta da muchos poderes.

yo no pude hacer el ejercicio de esa forma… supongo que ahora cambiaron, la forma de hacerlo.

Esta herramienta es muy útil para poder mejorar nuestros proyectos, aunque hay que tener en cuenta que un 100% en accessibility no significa que tu proyecto no necesita nada mas, lo mas impórtate es seguir iterando de acuerdo al feedback de los usuarios. Incluso la misma herramienta te dice que los tests manuales también son de gran ayuda.

Escribí esto para mi extracto en el HTML

Ey there! 👋 I love to write, so I decided to be a journalist 😍
I fell in love with newspapers, but this romance is like Romeo and Juliet tragedy.
After seeing several layoffs and a path to nowhere, I decided to change my career to marketing. What a challenge! I had too much to learn and nothing to lose. In the middle of the path, I discovered what growth hacking is. A work reserved for only super curious heroes. I always thought I was one.

Tengo un inconveniente estoy probando los sistemas web que hacemos en la empresa y para ello ingresamos con el usuario y clave; ingreso al aplicativo y ejecuto cualquier opción del menú en este momento deseo evaluar la accesibilidad con la herramienta lighthouse pero al momento de ejecutarla se va a la pagina de logeo entendiendo que solo evalúa esta página (la de logeo) y no todo el aplicativo o al menos la página de la opción del menú al cual ingrese. como puedo evaluar el resto de páginas ??

Muy buena herramienta. Hace rato la utilizo pero no había detallado cada uno de sus mensajes, solo me fijaba en el puntaje.

Bien traído el proyecto del portfolio!!. Recordé del curso de Diego De Granda 🤓📚 con Chrome DevTools.

Entonces la accesibilidad no depende solo del desarrollador, si no de todo el equipo, desde el diseño hasta producción, verdad ?

Super Platzi tiene un 89%

Es importante tener en cuenta la accesibilidad desde el comienzo de cualquier proyecto que estemos ideando.

Les comparto el resultado del test en mi página:

Hace poco hice mi portafolio entonces realice la prueba en el para empezar a mejorarlo. (Me parece que no estuvo nada mal)

![](

En cada curso que tomo, me doy cuenta de otra nueva utilidad de las Dev Tools 🤯

Si corro mi proyecto como local:host puedo hacer la prueba? porque me dice que solo puede ejecutar sitios con HTTP y HTTPS

La accesibilidad depende de todo el equipo y no solo de los desarrolladores.
Revisé esta web y tiene casi todo cubierto.

Hay un curso para manejar las herramientas de desarrollo de Chrome: https://platzi.com/clases/devtools/

Entre ellas para hacer esta auditoria. Me encanta que empecemos con una página muy mal de accesibilidad e ir viendo los resultados (Como en el curso de Optimización).

A implementar estas pruebas a nuestros sitios 😁

Yo ya tengo mi portafolio y este fue mi resultado de accesibilidad

Vale ya me intereso esto😎

Las pruebas automáticas con Lighthouse son geniales, esta herramienta me permite evaluar cualquier proyecto que realice, para hacerlo accesible, esto es calidad.

En desktop:

En mobile:

Adjunto la prueba de mi pagina de test, a espera de feedback:

![](

les comparte el resultado de mi pagina

vaya, no estaba tan mal mi primera pagina publica, a mejorarla

Muy buena clase! Me queda un poco la espina de querer un curso de Lighthouse… ya son más de tres cursos donde se explica en partes como utilizarlo y es una herramienta súper interesante!

<h1>Este es el análisis del portafolio mío.</h1>

![](

Tengo mi página web y les comparto el reporte que generó lighthouse en desktop:

Y en mobile:

Mi portafolio tiene 87% de accesibilidad 🙃 interesante, ahí que mejorar

Que herramienta tan genial! no la conocía, gracias!!

Assistive technologies, like screen readers, work inconsistently when aria-hidden="true" is set on the document <body>. Learn more.

Ideas?

![](