El hermoso Js…
Dominar las bases de la accesibilidad
Estrategias Efectivas para la Accesibilidad Web
Accesibilidad Web: Claves para Proyectos Inclusivos
Pautas de Accesibilidad Web: Cumple con WCAG 2.0
Criterios de accesibilidad web: principios y niveles WCAG
Accesibilidad Web: Perceptible, Operable, Comprensible y Robusto
Tecnologías Asistivas para la Web: Mejora Accesibilidad Visual y Motora
Presentar el proyecto
Accesibilidad Web: Mejora Tu Portafolio Online
Evaluar la accessibilidad de sitios web
Pruebas de Accesibilidad Web con Lighthouse
Simulación de Accesibilidad con Discapacidades Visuales en Web
Optimización de la Accesibilidad Web con Teclado
Comprensión y Uso de Lectores de Pantalla en Web Accessibility
Comandos básicos de VoiceOver en Mac
Refactorizar HTML para ser mas accessible
HTML Semántico: Mejorando Accesibilidad Web
HTML Semántico: Mejorando la Estructura de Sitios Web
Refactorización de HTML: Mejora tu Código con Semántica
HTML Semántico para Mejorar la Accesibilidad Web
Atributos ARIA en HTML para Mejorar Accesibilidad Web
Definir roles y atributos ARIA en HTML semántico
Accesibilidad Web: Uso de ARIA en Contenidos Visuales
Estados ARIA en Interfaces Web: Mejora de Accesibilidad
HTML Accesible: Mejora Tu Sitio Web Paso a Paso
Utilizar CSS para aumentar la acessibilidad de un sitio web
Colores y Contraste en CSS para Mejorar Accesibilidad
Accesibilidad de Iconos en Interfaces Web
Enlaces de Navegación Accesibles con HTML y CSS
Estilos de Foco en CSS para Accesibilidad Web
Diseño y Contraste en CSS para Formularios
Extender la accesibilidad usando JavaScript
Manejo de Interacciones con Eventos de Teclado en JavaScript
"Uso de tabindex para accesibilidad en carruseles web"
Creación de un Carrusel Accesible con Lectores de Pantalla
Mejora de la Accesibilidad Web con Modales Inclusivos
Accesibilidad en Modales: Enfocar y Cerrar con Tecla Esc
Validación Efectiva de Formularios Web
Formularios Accesibles: Mejora Usabilidad y Validación
Uso de ARIA para Accesibilidad en Formularios Web
Conclusión
Programación Accesible: Mejora la Experiencia de Usuario
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Hoy en día, crear sitios web accesibles es una prioridad para asegurar que todos los usuarios puedan interactuar eficazmente, independientemente de las tecnologías que utilicen. En este contexto, uno de los componentes que más puede beneficiarse de una mejora en la accesibilidad es el carrusel. A continuación, aprenderemos cómo manejar las interacciones del usuario mediante el teclado, asegurando que el foco se controle debidamente.
El uso del teclado es crucial para garantizar que todos los usuarios, especialmente aquellos con discapacidades, puedan navegar de forma efectiva. En sitios web con carruseles u otros elementos interactivos, es fundamental que estos sean accesibles a través del teclado para no excluir a quienes dependen de dispositivos asistidos. Sin un manejo adecuado del foco, podríamos saltarnos botones y afectar la interacción del usuario.
Para lograr que un carrusel sea amigable con el teclado, es necesario realizar algunos ajustes en su código. Un problema común es que los elementos como las flechas de navegación sean ignorados por el foco del teclado.
Podemos observar el código de un carrusel específico, donde las flechas están actualmente definidas como elementos div
. Cambiarlos por elementos button
permitirá que el navegador reconozca interacciones tanto con el ratón como con el teclado.
<!-- Cambiar de div a button es crucial -->
<button class="carousel-control-prev">Anterior</button>
<button class="carousel-control-next">Siguiente</button>
Al guardar estos cambios y refrescar la página, se debe observar que al navegar con el teclado, los botones ahora reciben el foco adecuadamente.
Mejorar la accesibilidad no solo implica hacer ajustes funcionales, sino también visuales. Es útil agregar estilos CSS que proporcionen retroalimentación visual cuando un elemento tenga el foco. Esto se puede lograr a través del uso de propiedades como outline
.
/* Añadir un estilo de enfoque para las flechas del carrusel */
.carousel-control:focus {
outline: 3px solid #00FF00; /* Establece un contorno verde */
}
Con estos estilos implementados, el usuario recibirá una clara señal visual que indica que un botón está enfocado, mejorando así la usabilidad del carrusel.
Este es el primer paso hacia la accesibilidad, pero aún quedan aspectos que se pueden optimizar. En futuras lecciones, exploraremos cómo usar JavaScript para manejar cambios dinámicos en el carrusel, asegurando que cada movimiento y acción sea lo más fluida e inclusiva posible para todos los usuarios. Al seguir mejorando nuestros métodos y técnicas, no solo hacemos sitios web más inclusivos, sino que también damos un paso clave hacia un futuro donde la tecnología esté al alcance de todos.
Aportes 12
Preguntas 1
El hermoso Js…
Si bien es usual que un diseñador conozca de Html y Css, creo que tener un buen nivel de JavaScript no lo es. Por lo cual creo que todo el modulo 6 no es accesible para mi que tengo conocimiento 0 en el tema. Llegué aquí por que estaba en la ruta de diseño UI/UX, y no me niego a aprender algo nuevo cómo lo es este lenguaje, pero no es mi prioridad en este momento.
deberían tb advertir de tener base de JS
Como diseñadores UI/UX no creo que deban saber como manejar javascript, más bien con esta lección estan informados sobre lo que se puede hacer con javascript y a la hora de diseñar interfaces, pueden llegar a solicitarle a los desarrolladores que tengan en cuenta este tipo de peticiones cuando implementen ellos las interfaces.
Como diseñador UI/UX es la primera vez que entro en contacto con el tan afamado Javascript, pero se me hace muy bien porque así me han dado ganas de aprender ese lenguaje de programación tan indispensable en Frontend.
👌
Elementos que reciben foco: button y a. Hay otros?
Ya quiero profundizar más sobreJS
increíble
El tittulo tiene un error.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?