Curso de Accesibilidad Web

Curso de Accesibilidad Web

Instruido por:
Juliana Gómez
Juliana Gómez
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Portafolio Web
Proyecto del curso
Portafolio Web

Implementa mejoras de accesibilidad web a tu portafolio. Usa HTML Semántico, CSS y JavaScript para lograrlo. Aprende las mejores técnicas para realizar pruebas y verificar que tu sitio cumpla con los estándares de accesibilidad.

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Progreso del curso:0/35contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/35contenidos(0%)

Dominar las bases de la accesibilidad

Material Thumbnail

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

01:54 min

Material Thumbnail

Conociendo la importancia de la accesibilidad web

05:29 min

Material Thumbnail

Aprendiendo sobre WCAG y sus criteros de conformidad

02:41 min

Profundizando los 12 criterios de conformidad

02:39 min

Material Thumbnail

Los 4 principios de WCAG

05:04 min

Material Thumbnail

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

03:40 min

Presentar el proyecto

Material Thumbnail

Instalación del proyecto y primeros pasos

05:27 min

Evaluar la accessibilidad de sitios web

Material Thumbnail

Pruebas automáticas con Lighthouse

06:53 min

Material Thumbnail

Pruebas con simuladores de discapacidades visuales

05:58 min

Material Thumbnail

Pruebas manuales con tu teclado

04:53 min

Material Thumbnail

Pruebas manuales con lectores de pantalla

05:33 min

Material Thumbnail

Pruebas manuales con VoiceOver

06:36 min

Refactorizar HTML para ser mas accessible

Material Thumbnail

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

02:35 min

Material Thumbnail

Usando HTML semántico en el header de nuestro sitio

10:41 min

Material Thumbnail

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

13:10 min

Material Thumbnail

Usando HTML semántico en footer de nuestro sitio

03:29 min

Material Thumbnail

ARIA - Accessible Rich Internet Applications

01:13 min

Material Thumbnail

Overview del proyecto con los retos resueltos

03:16 min

Utilizar CSS para aumentar la acessibilidad de un sitio web

Material Thumbnail

Contrastes de color

10:32 min

Material Thumbnail

Estilos de foco y hover

09:20 min

Material Thumbnail

Overview retos resueltos con CSS

05:49 min

Extender la accesibilidad usando JavaScript

Material Thumbnail

Manejando el foco del teclado - botones

03:59 min

Material Thumbnail

Manejando el foco del teclado - el carousel

09:57 min

Material Thumbnail

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

07:25 min

Material Thumbnail

Manejando modales

08:06 min

Material Thumbnail

Mejorando la accesibilidad con teclado de nuestro modal

08:30 min

Material Thumbnail

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

01:18 min

Material Thumbnail

Validando formularios

11:04 min

Material Thumbnail

Manejando cambios dinámicos

06:27 min

Conclusión

nuevosmás votadossin responder
Miguel Ángel Reyes Moreno
Miguel Ángel Reyes Moreno
Estudiante

Yo tengo mi página web
¿A ustedes qué tan accesible les parece? (Sé que puedo usar lighthouse pero me gustaría escuchar opiniones de personas).

2
Gabriel Ortiz
Gabriel Ortiz
Estudiante

Vale, he entendido el funcionamiento de tabindex. Pero pensándolo bien, si hacemos uso de él, ¿no estaríamos haciendo más complicada la navegación para los usuarios que utilizan un lector de pantallas?
.
Me explico:
.
Juliana nos recuerda que debemos intentar replicar la misma UX para todos nuestros usuarios, tanto si usan un **mouse **o un **lector de pantallas. **
.
En el caso del usuario promedio que utiliza un mouse, al momento de llegar al carrusel, tendrá que hacer clic en los botones para visualizar las demás imágenes dentro de este.
.
Si queremos replicar esa misma experiencia, el tener que hacer clic en los botones para deslizar el carrusel, para alguien que utiliza un lector de pantallas, ¿no sería mucho mejor que el carrusel mostrara las imágenes a medida que vas haciendo tab? como ya lo hace por defecto si no le agregamos el tabindex. Porque, creo que, al obligar al usuario de lector, a tener que hacer tab en los botones de forward y backward para mover el carrusel, sólo estamos estropeando su UX.
.
¿Qué piensan ustedes?
.
Yo le veo más utilidad al tab index, en un carrusel mucho más grande, donde, efectivamente no queremos que el usuario tenga que visualizar todas las imágenes. Pero en este caso, al ser sólo 5 imágenes lo considero innecesario.

0
Gisela Cowan Chang
Gisela Cowan Chang
Estudiante

parece que el link hacia NoCoffee ha sido quitado

2
Jimena Nieto
Jimena Nieto
Estudiante

Buenas!!! como estan? Necesito ayuda porfavor, con esta base hice el portfolio que tengo, pero tengo un problema: en el carrusel quiero agregar un proyecto PERO aparece en la linea de abajo abajo.

Si alguien me pudiese ayudar Gracias!

0
Andrés Felipe Barreto Guio
Andrés Felipe Barreto Guio
Estudiante

Estoy intentando esconder el skip link pero no deja, salen las letras, alguien sabe cómo? o por qué?

0
Andrés Felipe Barreto Guio
Andrés Felipe Barreto Guio
Estudiante

Existen Roles definidos? Una lista o algo por el estilo?

1
Andrés Felipe Barreto Guio
Andrés Felipe Barreto Guio
Estudiante

Estaría bien usar html semantico y adicional role? Ejemplo: <header role="header></header>

0
Nina Zambrano
Nina Zambrano
Estudiante

Tienen el pdf para estudiar la materia de accesibilidad Web?

0
Giuseppe Ramirez
Giuseppe Ramirez
Platzi Team

¿Qué tan recomendables son los figure tag y el figcaption para encerrar a los img, son necesarios, complementarios, dependen de algo?

2
Misael Valdez
Misael Valdez
Estudiante

Hasta ahora en las implementaciones se hablóde Windows y Mac.
Y Ubuntu ? No hay accesibilidad en este SO?

1