2525UPSA1.1.1-H-001
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_1/1.1_Texto_Alternativo/1.1.1-H
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<a class="entry-featured-image-url" href="https://bicielx.es/2024/10/08/bicielx-llega-pedanias-cuatro-estaciones-torrellano/">
<img src="https://bicielx.es/wp-content/uploads/2024/07/20240701_noticia_ampliacion_Bicielx_Torrellano.jpg" alt="Bicielx llega a las pedanías con cuatro estaciones en Torrellano" class="" width="1080" height="675"> </a>
<h2 class="entry-title"><a href="https://bicielx.es/2024/10/08/bicielx-llega-pedanias-cuatro-estaciones-torrellano/" class="keyboard-outline">Bicielx llega a las pedanías con cuatro estaciones en Torrellano</a></h2>
<a href="https://bicielx.es/2024/10/08/bicielx-llega-pedanias-cuatro-estaciones-torrellano/" class="keyboard-outline">Bicielx llega a las pedanías con cuatro estaciones en Torrellano</a>
Explicación del problema detectado:
Se ha identificado una redundancia de enlaces adyacentes que apuntan al mismo destino. En el código analizado, la imagen, el titular (h2) y un texto adicional están implementados como tres etiquetas de enlace (<a>) independientes, a pesar de que los tres dirigen al usuario a la misma página de la noticia.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas ciegas o con visión reducida: Aquellas que utilizan lectores de pantalla. El dispositivo les anuncia tres veces seguidas el mismo destino, lo que resulta confuso y molesto.
Personas con discapacidad física o motriz: Aquellas que navegan exclusivamente mediante el teclado (tecla Tab) o pulsadores. Se ven obligadas a realizar tres pulsaciones de tecla para superar un solo bloque de contenido, duplicando o triplicando el esfuerzo físico necesario para navegar por la página.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<a href="https://bicielx.es/2024/10/08/bicielx-llega-pedanias-cuatro-estaciones-torrellano/" class="keyboard-outline">
<img src="https://bicielx.es/wp-content/uploads/2024/07/20240701_noticia_ampliacion_Bicielx_Torrellano.jpg" alt="" width="1080" height="675">
<h2 class="entry-title">Bicielx llega a las pedanías con cuatro estaciones en Torrellano</h2>
</a>
Explicación de la solución aplicada:
Unificación: Hemos pasado de tener tres enlaces (<a>) a tener solo uno que envuelve tanto a la imagen como al titular.
Eliminación de redundancia: Se ha borrado el tercer enlace repetido que estaba fuera del h2.
Accesibilidad de la imagen: El alt de la imagen ahora está vacío (alt=""). Esto indica a las tecnologías de asistencia que la imagen es "decorativa" en ese contexto, porque la información relevante ya la aporta el texto del encabezado que está dentro del mismo enlace.
Navegación: Ahora un usuario que use la tecla Tab solo se detendrá una vez en esta noticia, en lugar de tres.
