Me tardé mucho pero pude crear un carrusel 100% accesible y reutilizable para react con typescript, estoy aplicando todos estos nuevos conceptos en un proyecto de un blog, por si gustan checarlo: https://blog.brandonargel.me
Dominar las bases de la accesibilidad
¿Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnología Asistivas - cuáles son y cómo funcionan
Presentar el proyecto
Instalación del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas automáticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
¿Qué es el HTML semántico y por qué es importante?
Usando HTML semántico en el header de nuestro sitio
Usando HTML semántico en el contenido principal de nuestro sitio
Usando HTML semántico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios dinámicos
Conclusión
Siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Contributions 16
Questions 1
Sort by:
⌨️ Manejando el foco del teclado
<h4>Ideas/conceptos claves</h4>Tab index ⇒ indica si su elemento puede ser enfocado y si participa en la navegación secuencial del teclado
<h4>Recursos</h4>Uso de tabindex | Web | Google Developers
<h4>Apuntes</h4> <h3>Botones</h3>- Hoy en día se necesita usar JS para las interacciones de usuario
- Puedes usar JS para manejar estas interacciones
- La etiqueta Button se debe usar siempre y cuando habrá una interacción
- Valores de tab index
- Valor negativo (-1) ⇒ El elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación
- Valor positivo (>0) ⇒ debe poder ser enfocado y su orden relativo es definido por el valor del atributo
- Valor de 0 ⇒ El elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma
- Valores de aria hidden para los elementos que están ocultos
RESUMEN: Se puede dar a los websites con interacciones más accesibilidad manipulando los atributos conocidos anteriormente para mejorar la accesibilidad mediante el JS
setAttribute: Agrega un nuevo atributo.
remoteAttribute: Elimina un atributo
Hola, tengo una duda:
Línea 27 y 33 el estado de aria-hidden: true, está primero sin comillas, y luego entre. Afecta el código o es irrelevante?
Gracias, profesora, quedó muy completo.
Creo que este curso esta mal clasificado, para sacarle provecho debes tener muchoooo conocimiento de las bases de la programación CSS, HTML y JS, por eso creo que en realidad es un nivel intermedio, el contenido esta muy bueno.
¿para webs hechas en wordpress?
como aplicamos, existe plugins recomendados?
Yo estoy más asustado pero cada vez mejor mucho que aprender gracias Juliana
Recuerdo un amigo, o alguien que conocí de Nicaragua que, una vez le expuse una idea de negocios tipo marketing, estaba tan emocionado que le salió un “Man, me estás dando miedo”
En esa línea puedo decir lo mismo sobre la profe Juliana sin ni siquiera llegar al final del curso: “Me está dando miedo” por su magistral claridad, le estoy aprendiendo y comprendiendo más que a casi ningún otro profesor, aunque no se trate de comparar. Este curso tiene el plus que necesitaba para robustecer mis proyectos…
duro es complicado pero hay vamos, me falta mucho
Nota: Los elementos de referencia HTML (<main>, <header>, <nav> etc.) tienen roles ARIA implícitos, por lo que no es necesario duplicarlos.
💚JS
Muy buena explicación.
Muy bueno!
Quedó perfecto el slider
Bastante genial aprender cada vez más piezas que puedan ayudar a que todas las personas puedan interactuar con nuestra web.
Want to see more contributions, questions and answers from the community?