2526UdL2.2.2-B-000
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.2_Tiempo_Suficiente/2.2.2-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.ucm.es/
2.1.2. Código HTML:
<div id="carouselUcm" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<header class="zo_visible">
<h2>Carrousel - Titulares</h2>
</header>
<article class="item">
<figure class="n_img">
<a href="https://tribuna.ucm.es/...">
<img src="..." alt="Tres estudiantes de un máster...">
</a>
</figure>
</article>
</div>
</div>
Explicación del problema detectado:
La página utiliza el componente carousel de Bootstrap con el atributo data-ride="carousel", lo que provoca que las imágenes y textos roten automáticamente al cargar la página. Este movimiento dura más de 5 segundos y, como se observa tanto en la imagen como en el código inspeccionado, no existe ningún mecanismo (botón de pausa o parada) para que el usuario detenga el movimiento.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Dificultad de lectura: El usuario puede estar leyendo el titular sobre los "estudiantes de máster" cuando el carrusel cambia repentinamente, obligándole a esperar a que la imagen vuelva a aparecer o a navegar manualmente para encontrarla.
Distracción visual: Para personas con TDAH o sensibilidades cognitivas, el movimiento constante de fotos grandes en la parte superior de la web dificulta la concentración en los menús inferiores de la página.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.barcelona.cat/es
2.2.2 Código HTML:
<a role="button" tabindex="0" id="carousel-capcalera-toggle" class="icobcn-reproduir play">
<span class="repro-play sr-only">Enable carousel</span>
</a>
Explicación de la solución aplicada:
Control de Usuario: La interfaz proporciona un mecanismo visible y funcional (un botón de alternancia) que permite al usuario detener o iniciar la actualización automática del carrusel.
El uso de role="button" y etiquetas ocultas para lectores de pantalla (sr-only) asegura que los usuarios que utilizan tecnologías de asistencia también puedan comprender la función del control y operar el carrusel.
Usuarios con dificultades de procesamiento cognitivo o baja visión pueden detener el movimiento para evitar distracciones y procesar la información de cada diapositiva sin que esta desaparezca automáticamente.
