2526UPSA1.4.1-A-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.4_Distinguible/1.4.1-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.uniqlo.com/es/es/feature/limited-offers/women?gclsrc=aw.ds&gad_source=1&gbraid=0AAAAADhAXeLVTdAeZYZ3WoyRu0FIySuiL&gclid=Cj0KCQiAjJTKBhCjARIsAIMC44_wrFVvWk1RWd4D4vF4HomwXPWvtEOTAV9WYp928EV11-NlxaBuCHgaAu4gEALw_wcB
2.1.2. Código HTML:
<label class="fr-ec-label"
style="background-image: url('https://image.uniqlo.com/.../goods_01_450514_chip.jpg');">
</label>
Explicación del problema detectado:
En el código fuente se observa que se utiliza una etiqueta <label> vacía. La información del color se transmite únicamente mediante una imagen de fondo en CSS (background-image). Al no existir texto dentro de la etiqueta ni atributos alternativos (como aria-label), los productos de apoyo no pueden identificar qué color se está seleccionando.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con daltonismo o personas que utilizan dispositivos con pantalla monocroma (blanco y negro) no pueden diferenciar qué color están seleccionando.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) 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="selector-color">
<button style="background-color: #ccc; width: 30px; height: 30px;"
title="Gris / Blanco">
</button>
<button style="background-color: black; width: 30px; height: 30px;"
title="Negro">
</button>
</div>
Explicación de la solución aplicada:
Se utiliza el atributo estándar title en los botones de color. Esto permite que, al pasar el cursor por encima del elemento, aparezca una etiqueta emergente (tooltip) con el nombre del color (Gris / Blanco), haciendo la información accesible sin saturar el diseño.
