Dominar las bases de la accesibilidad

1

Estrategias Efectivas para la Accesibilidad Web

2

Accesibilidad Web: Claves para Proyectos Inclusivos

3

Pautas de Accesibilidad Web: Cumple con WCAG 2.0

4

Criterios de accesibilidad web: principios y niveles WCAG

5

Accesibilidad Web: Perceptible, Operable, Comprensible y Robusto

6

Tecnologías Asistivas para la Web: Mejora Accesibilidad Visual y Motora

Presentar el proyecto

7

Accesibilidad Web: Mejora Tu Portafolio Online

Evaluar la accessibilidad de sitios web

8

Pruebas de Accesibilidad Web con Lighthouse

9

Simulación de Accesibilidad con Discapacidades Visuales en Web

10

Optimización de la Accesibilidad Web con Teclado

11

Comprensión y Uso de Lectores de Pantalla en Web Accessibility

12

Comandos básicos de VoiceOver en Mac

Refactorizar HTML para ser mas accessible

13

HTML Semántico: Mejorando Accesibilidad Web

14

HTML Semántico: Mejorando la Estructura de Sitios Web

15

Refactorización de HTML: Mejora tu Código con Semántica

16

HTML Semántico para Mejorar la Accesibilidad Web

17

Atributos ARIA en HTML para Mejorar Accesibilidad Web

18

Definir roles y atributos ARIA en HTML semántico

19

Accesibilidad Web: Uso de ARIA en Contenidos Visuales

20

Estados ARIA en Interfaces Web: Mejora de Accesibilidad

21

HTML Accesible: Mejora Tu Sitio Web Paso a Paso

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Colores y Contraste en CSS para Mejorar Accesibilidad

23

Accesibilidad de Iconos en Interfaces Web

24

Enlaces de Navegación Accesibles con HTML y CSS

25

Estilos de Foco en CSS para Accesibilidad Web

26

Diseño y Contraste en CSS para Formularios

Extender la accesibilidad usando JavaScript

27

Manejo de Interacciones con Eventos de Teclado en JavaScript

28

"Uso de tabindex para accesibilidad en carruseles web"

29

Creación de un Carrusel Accesible con Lectores de Pantalla

30

Mejora de la Accesibilidad Web con Modales Inclusivos

31

Accesibilidad en Modales: Enfocar y Cerrar con Tecla Esc

32

Validación Efectiva de Formularios Web

33

Formularios Accesibles: Mejora Usabilidad y Validación

34

Uso de ARIA para Accesibilidad en Formularios Web

Conclusión

35

Programación Accesible: Mejora la Experiencia de Usuario

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Manejo de Interacciones con Eventos de Teclado en JavaScript

27/35
Recursos

¿Cómo mejorar la accesibilidad de un carrusel con JavaScript?

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.

¿Por qué es importante el manejo del foco del teclado?

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.

¿Cómo ajustar el foco en un carrusel?

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.

¿Cómo añadir estilos para indicar el foco?

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.

¿Qué se puede seguir mejorando con JavaScript en el 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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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?

No me cuadra algo con la filodofia de :"queremos darle una experiencia igual o parecida a todos nuestros Usuarios." Personalmente, creo que por lo que hay que apuntar es dar un buena Usabilidad a todos los usuarios. en cuanto al carrusel, no veo problema que con el tabulador no se pueda pasar por el boton de flechita, si a pesar de esto se puede navegar por todos los elementos del carrusel, como si fuera una lista, esto desde mi uso del lector de pantalla. puesto que el pasar por menos botones tambien significa menos palabras que el lector de pantaalla te leee, si en ambas situaciones la informacion que se transmite es la misma. se debe hacer lo que sea mas comodo para el usuario no? Bueno esto desde mi punto de vista. no se si se este violando alguna regla de la wacag al no pasar por ese boton.

Ya quiero profundizar más sobreJS

increíble

El tittulo tiene un error.