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

⌨️ Manejando el foco del teclado

Tab index ⇒ indica si su elemento puede ser enfocado y si participa en la navegación secuencial del teclado

Uso de tabindex | Web | Google Developers

• 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

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

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.

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