Diferencia entre revisiones de «2526UPSA1.4.1-A-001»
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestra una edición intermedia del mismo usuario) | |||
| Línea 14: | Línea 14: | ||
|noa_barrera_explicacion=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. | |noa_barrera_explicacion=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. | ||
|noa_barrera_usuarios=Las personas con daltonismo o personas que utilizan dispositivos con pantalla monocroma (blanco y negro) no pueden diferenciar qué color están seleccionando. | |noa_barrera_usuarios=Las personas con daltonismo o personas que utilizan dispositivos con pantalla monocroma (blanco y negro) no pueden diferenciar qué color están seleccionando. | ||
|acc_barrera_evidencia_img=2025 26 UPSA 1.4.1-A-001 Balenciaga | |acc_barrera_evidencia_img=2025 26 UPSA 1.4.1-A-001 Balenciaga.png | ||
|acc_barrera_evidencia_url=https://www.balenciaga.com/es-es/hombre/ropa/camisetas?start=0&sz=12&prefn1=akeneo_markDownInto&prefn2=countryInclusion&prefv1=no_season&prefv2=ES#857086TTVQ61066 | |||
|acc_barrera_evidencia_html=<nowiki> | |acc_barrera_evidencia_html=<nowiki> | ||
<div class="selector-color"> | <div class="selector-color"> | ||
Revisión actual - 12:31 19 dic 2025
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:
https://www.balenciaga.com/es-es/hombre/ropa/camisetas?start=0&sz=12&prefn1=akeneo_markDownInto&prefn2=countryInclusion&prefv1=no_season&prefv2=ES#857086TTVQ61066
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.
