2526UPSA1.1.1-D-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_1/1.1_Texto_Alternativo/1.1.1-D
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.casadellibro.com/libro-la-asistenta/9788491294283/13931484
2.1.2. Código HTML:
<div class="ratingWrapper mb-2 d-flex align-center svelte-dxpbx6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" aria-label="valoración" style="--size: 20px;">
<path></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" aria-label="valoración" style="--size: 20px;">
<path></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" aria-label="valoración" style="--size: 20px;">
<path></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" aria-label="valoración" style="--size: 20px;">
<path></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" aria-label="valoración" style="--size: 20px;">
<path></path>
</svg>
<a href="#opiniones" class="accent-text mx-2">(611)</a>
</div>
Explicación del problema detectado:
En lugar de limitarse a dar una descripción alternativa al primer miembro que explique el propósito de todo el grupo, se da una descripción genérica aria-label="valoración" para cada uno de los miembros (estrellas) en el grupo, sin significado explicativo alguno. Además, no se proporciona el valor numérico de la nota, por lo que es imposible saber de forma no visual que estamos sobre un grupo de estrellas que dan la valoración a un producto, además de ser incapaces de saber cuál es el valor de esa misma valoración.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidades visuales (ceguera total, baja visión) que hacen uso de lectores de pantalla serán incapaces de entender el contenido sobre el que se está leyendo, y si por algún casual logran entender que se trata de una valoración, no serán capaces de averiguar el valor numérico de esta. Además, la constante repetición de el texto alternativo "valoración" en el lector de pantalla puede provocar fatiga auditiva.
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:
<div class="ratingWrapper mb-2 d-flex align-center svelte-dxpbx6">
<svg role="img" aria-label="Valoración media: 4.5 de 5 estrellas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" style="--size: 20px;">
<path></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" style="--size: 20px;">
<path></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" style="--size: 20px;">
<path></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" style="--size: 20px;">
<path></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-icon svelte-uc0a00" style="--size: 20px;">
<path></path>
</svg>
<a href="#opiniones" class="accent-text mx-2">(611)</a>
</div>
Explicación de la solución aplicada:
Ejemplo contrario al anterior. Se proporciona una descripción alternativa solamente al primer miembro del grupo que valora el producto, que es aria-label="Valoración media: 4.5 de 5 estrellas", por lo que se transmite la valoración y el propósito del grupo de manera concisa, clara, y sin repeticiones innecesarias.
