Accesibilidad en Carruseles para Lectores de Pantalla

Clase 29 de 35 • Curso de Accesibilidad Web

Brandon Argel Verdeja Domínguez

student•

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

Gabino Cortes

student•

De pura casualidad usas atomic design?

Carlos S. Aldazosa

student•

Hahahah yo estaba pensando en hacer los mismo con las mismas tecnologías, quedo buenisimo.

Fernando Quinteros Gutierrez

student•

⌨️ Manejando el foco del teclado

Ideas/conceptos claves

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

Recursos

Uso de tabindex | Web | Google Developers

Apuntes

Botones

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

Carousel

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

Christian David Sánchez

student•

setAttribute: Agrega un nuevo atributo. remoteAttribute: Elimina un atributo

Maria Paulina Arenas Agudelo

student•

removeAttribute

Giuseppe Ramirez

student•

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?

Cristopher Sahagún

student•

Es irrelevante, ya que todo lo que ingresemos ahí lo convierte a cadena de texto.

Más info

Giuseppe Ramirez

student•

Gracias Criss

Sergio Alejandro Trejo Cuxim

student•

Gracias, profesora, quedó muy completo.

Daniel Ochoa

student•

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.

Rick Zamora R.

student•

Yo al principio no le entendi nada y tuve que ver un curso de Visual Studio Code y otras herramientas para instalarlas y entender como manejar lo de los codigos.

Victor Macas

student•

¿para webs hechas en wordpress? como aplicamos, existe plugins recomendados?

Milthon Raúl Gómez Galeano

student•

Si Googleas “Plugins accesibilidad WordPress” vas a encontrar varios plugins que hacen un buen trabajo. Dentro de las opciones gratuitas, el más utilizado es WP Accessibility. Adicionalmente, en esta página puedes encontrar información al respecto directamente del equipo de WordPress: Accesibilidad.

De otro lado, de los mejores artículos sobre el tema que te puedo referenciar, están:

Accesibilidad en WordPress: todo lo que debes saber. Por Webempresa.
Accesibilidad Web en WordPress ó como hacer que tu web sea accesible para todos. Este último de autoría de Manuel Gallego en el blog de Rafa Arjonilla, tiene varias recomendaciones, temas y ejemplos.

Sin embargo, en lo personal no conozco un plugin que permita hacer todo lo que vimos en este curso (para el momento en que escribo esto ya lo vi todo).

En general, no hay plugin ni tema perfecto para este misión así que, para muchas de las implementaciones los mejores resultados se obtienen creando un "Child theme" y haciendo las respectivas modificaciones directamente en el código o, si está dentro de tu abanico de posibilidades, la mejor opción sería crear tu propio plugin adaptado a las necesidades de tu audiencia.

Victor R Vele

student•

Yo estoy más asustado pero cada vez mejor mucho que aprender gracias Juliana

Soe Lucas

student•

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

daniel andres SALINAS GARAVITO

student•

duro es complicado pero hay vamos, me falta mucho

Brandon Argel Verdeja Domínguez

student•

Nota: Los elementos de referencia HTML (<main>, <header>, <nav> etc.) tienen roles ARIA implícitos, por lo que no es necesario duplicarlos.

Alex Leonardo Rodriguez Carvajal

student•

💚JS

Karen Gómez

student•

Muy buena explicación.

Efraín Hernández García

student•

Muy bueno!

jorge llanque

student•

Quedó perfecto el slider

Diego Alvaro Parra Abad

student•

Bastante genial aprender cada vez más piezas que puedan ayudar a que todas las personas puedan interactuar con nuestra web.

Jimena Nieto

student•

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!

Angelo Raso

student•

Jimena, ojalá ya hayas podido solucionar tu duda
Para la próxima ayudaría mucho que compartas algún extracto de código para poder ver por donde viene el problema
Otra opción podría ser subir el código a algún sitio (stackblitz, codesandbox, github, google drive) y compartir el link

Accesibilidad en Carruseles para Lectores de Pantalla

Dominar las bases de la accesibilidad

Bases de Accesibilidad Web y Creación de Portafolio Personal

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

Pautas de Accesibilidad Web: Comprensión y Aplicación

Pautas de Accesibilidad Web: Principios y Criterios WCAG

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

Pruebas de Accesibilidad Web con Lighthouse en Chrome

Simulación de Accesibilidad Visual en Sitios Web

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

HTML Semántico para Mejora de Accesibilidad Web

HTML Semántico: Mejora la Estructura de tu Página Web

Refactorización de HTML para Mejorar Semántica y Accesibilidad

Mejorando la Accesibilidad Web con HTML Semántico

Uso de WAI-ARIA para Mejorar la Accesibilidad Web

Uso adecuado de roles en aplicaciones web

Accesibilidad Web: Uso de Aria para Lectores de Pantalla

Accesibilidad Web: Estados ARIA para Lectores de Pantalla

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Utilizar CSS para aumentar la acessibilidad de un sitio web

Mejora de Accesibilidad Web con CSS: Contraste y Colores

Estrategias para Mejorar la Accesibilidad de Iconos Web

Implementación de Enlaces de Salto para Accesibilidad Web

Estilos de Foco y Hover para Accesibilidad Web

Optimización de Formularios y Estilos CSS en HTML

Extender la accesibilidad usando JavaScript

Interacciones y Accesibilidad en Carruseles Web con JavaScript

Accesibilidad en Carruseles: Manejo de Foco con TabIndex

Accesibilidad en Carruseles para Lectores de Pantalla

Mejoras de Accesibilidad en Modales con HTML y CSS

Accesibilidad en Elementos Dinámicos: Mejora de Modales

Validación de Formularios Web: Instrucciones Claras y Ejemplos

Mejorando la Accesibilidad de Formularios Web

Implementación de ARIA Live para Accesibilidad Web

Conclusión

Accesibilidad Web: Mejora Continua y Pruebas Prácticas