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

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

1/35
Recursos
Transcripción

¿Qué es la accesibilidad web y por qué es importante?

La accesibilidad web asegura que las personas, sin importar sus capacidades físicas o cognitivas, puedan interactuar con las páginas y aplicaciones web de manera eficiente y sin barreras. Esto es crucial no solo desde un punto de vista ético, sino también porque permite que las empresas y organizaciones alcancen una audiencia más amplia. La accesibilidad también puede mejorar el SEO y la compatibilidad entre dispositivos, beneficiando de manera directa tanto a los usuarios finales como a los desarrolladores.

¿Cómo se lleva a cabo una evaluación de accesibilidad web?

Para garantizar y evaluar la accesibilidad de un sitio web, es común realizar pruebas manuales y automáticas. Las pruebas manuales involucran la experiencia directa de usuarios con discapacidad o la simulación de sus interacciones para identificar posibles barreras. Por otro lado, las pruebas automáticas se ejecutan mediante herramientas especializadas que escanean la página en busca de errores comunes relacionados con la accesibilidad, como descripciones faltantes en las imágenes o problemas de contraste en el diseño.

¿Qué organizaciones apoyan la accesibilidad web?

Existen organizaciones dedicadas a establecer estándares y proporcionar guías para la accesibilidad web, como:

  • W3C (World Wide Web Consortium): Es una organización internacional que desarrolla estándares como las Web Content Accessibility Guidelines (WCAG).
  • IAAP (International Association of Accessibility Professionals): Ofrece certificaciones, recursos educativos y eventos para profesionales interesados en la accesibilidad.

¿Cómo crear un portafolio accesible?

Crear un portafolio accesible permite a todos conocer tus proyectos y habilidades profesionales. Para lograrlo:

  1. Usa HTML semántico: Asegúrate de que cada elemento tenga un propósito y sentido claro.
  2. Aplica CSS adecuado: Facilita la personalización de colores y tipografías sin afectar la legibilidad.
  3. Incluye Javascript accesible: Implementa funcionalidades que contribuyan a una mejor experiencia de navegación.

Además, es vital realizar pruebas para asegurar que los elementos interactivos, como formularios o menús, sean completamente accesibles.

¿Qué desarrollo personal puedes lograr al aprender sobre accesibilidad?

Aprender sobre accesibilidad web no solo expande tus habilidades como desarrollador, sino que también incrementa tu sensibilidad y compromiso hacia la inclusión. Como experta en el área, he tenido la oportunidad de impartir charlas y participar en eventos internacionales como la conferencia Foothill DevOps en California. Además, obtener la certificación profesional en accesibilidad me ha permitido profundizar en este campo y ofrecer conocimiento valioso a estudiantes y profesionales interesados en transformar el ámbito digital en un espacio más inclusivo para todos.

Aportes 55

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Que felicidad empezar con esto, soy de Costa Rica, y este tema me encanta, quiero aprender muchísimo, quiero ayudar a muchas personas con discapacidad por medio de la tecnología.

Estupendo!!! me motiva mucho a aprender este curso con tu animo y energías!

Que excelente curso

👏 Es algo muy importante que tendríamos que aplicar a todos nuestros sitios web, app moviles, y diseños !

Me encanto el inicio de este curso!

Por si quieren repasar el examen acá se los dejo <https://github.com/aleroses/Platzi/blob/master/DW/2-intermedio/028.accesibilidad/1.accesibilidad-web.md#examen->

Es un excelente inicio 😎

Que genial este curso, super interesante y ademas importante. Gracias por compartirlo, Juliana. 😄

Me parece un tema muy importante el que se considere todas las personas posibles al hacer nuestros proyectos.
A darle con toda a éste curso! 😄

Me encuentro aquí por requerimientos de empresa, un poco rudo al inicio de no querer “trabajar más”, pero me he equivocado, sin duda alguna es una área de oportunidad profesional y personal muy altruista.
Sin duda alguna ahora en todos mis proyectos aportaré el valor de accesibilidad.
Muchas gracias.

Hola 😃 , requisitos previos para tomar este curso?

Que bonitas palabras :p

Se ve muy completo este curso.
La Accesibilidad es un tema que se ha vuelto crucial en los últimos años alrededor del mundo, y algunos países ya hasta lo han incluido en sus respectivos marcos legales aplicables para las empresas del sector tecnológico.
A darle!!!

vamos con este curso! espectativas

Saludos a todos. Gracias por la bienvenida.

¡¡Que émocion!! Muchas veces he tenido problemas para leer contenido desde mi computadora/celular ya que tengo problemas de la vista y con este curso podré ayudar a personas con este problema 😁

Es un tema que en muchas empresas dejan de lado, pero es nuestra oportunidad de ser agentes de cambio en ellas y que mejor empezando con nuestro portafolio.

Tengo altas expectativas de este curso, vamo´a darle

Muchas gracias profe de verdad muy buen curso

Estoy aquí porque una manager me recomendó saber más de estos temas.
 
¡Vamos a darle! 🙌

¡Comeeeencemos!

Suena genial el curso. Listo para comenzar.

Unas de las herramientas que vi en otros cursos que permiten medir la accesibilidad de una manera eficiente, ademas te da recomendaciones para aplicar a tu sitio es Lighthouse que viene inlcuida en las Chrome Dev Tools.
https://developers.google.com/web/tools/lighthouse?hl=es

falta slideeeeeeeeeeeeeeeeeeeeeeeeee

jajaja que carisma, sera un excelente curso segurisimo 😃

un tema muy interesante así como desafiante!

Excelente con toda ! 😀

🤓

Awesome

Iniciamos!

Justo estaba buscando un curso al respecto, que mejor que sea en Platzi en donde lo encontre!!!

Que bueno, muchas ganas de empezar el proyecto y aprender para llevarle accesibilidad a mucha gente para que experimente una buena experiencia en las aplicaciones

Que genial la trayectoria de la instructora de este curso. voy motivado se que aprendere bastante.

Que buen curso!

Excelente !

vamos!

Excelente inicio de curso, vamos a sacarle el jugo completo

Estoy empezando mi carrera como Frontend Developer y quiero mejorar la parte de accesibilidad en mis proyectos!

Muy buen curso! A por más! 😃

Como anillo al dedo, justo estoy a mitad de desarrollo del portafolio.

Realmente se nota bastante que le apasiona el tema. gusto conocer profesores así,

Vaya! Considero que, complementará perfecto mi aprendizaje.

Que gran inicio 😄

Vamos a darle, promete mucho vamoo

Definitivamente este curso te hace ser más empático en accesibilidad con las personas con discapacidad.

Esto se ve interesante e importante. Pensar en que al final del día es una persona común y corriente la que usará nuestro software es prioridad pues tiene que darle una excelente experiencia para que se sienta cómoda al usarlo.

Suena muy interesante este curso! estudiar mucho en temas de programación pero con motivación.

A darle con todo! 💚

Genial!!

👌

Me gusta la energía, empezamos bien.

se siente un gran curso 😄

Que buen curso, tenemos que lograr que internet sea un lugar accesible para todos y todas.

excelente curso

Algo que vi en otros cursos para medir la accesibilidad de una sitio es utilizar:
Lighthouse, que vienen incluidas en las Chrome Dev Tools.
https://developers.google.com/web/tools/lighthouse?hl=es