Diferencia entre revisiones de «2526UPSA1.4.1-A-001»

De WCAG Wiki
VisualWikitexto
202526UPSA14 (discusión | contribs.)
alumnos
24 ediciones
Creación de ejemplos accesible y no accesible para el criterio 1.4.1-A
 
202526UPSA14 (discusión | contribs.)
alumnos
24 ediciones
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.1-A
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.1-A
|noa_barrera_evidencia_img=2025 26 UPSA 1.4.1-A-001 Uniqlo Color Mal.png
|noa_barrera_evidencia_url=https://www.uniqlo.com/es/es/feature/limited-offers/women?gclsrc=aw.ds&gad_source=1&gbraid=0AAAAADhAXeLVTdAeZYZ3WoyRu0FIySuiL&gclid=Cj0KCQiAjJTKBhCjARIsAIMC44_wrFVvWk1RWd4D4vF4HomwXPWvtEOTAV9WYp928EV11-NlxaBuCHgaAu4gEALw_wcB
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>
<p>Estado de las tareas:</p>
<label class="fr-ec-label"  
<ul>
      style="background-image: url('https://image.uniqlo.com/.../goods_01_450514_chip.jpg');">
  <li><span style="color: green;">●</span> Enviar documentación</li>
</label>
  <li><span style="color: red;">●</span> Pagar matrícula</li>
  <li><span style="color: green;">●</span> Revisar correo</li>
</ul>
<p>Leyenda: Verde = Listo, Rojo = Pendiente</p>
</nowiki>
</nowiki>
|noa_barrera_explicacion=En este listado de tareas, el estado ("listo" o "pendiente") se indica únicamente mediante el color de un círculo (verde o rojo). No hay ningún texto ni forma alternativa que diferencie un estado del otro.
|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 (dificultad para distinguir rojo y verde) o personas que utilizan dispositivos con pantalla monocroma (blanco y negro) no pueden diferenciar qué tareas están pendientes y cuáles están terminadas, perdiendo información crítica.
|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.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>
<p>Estado de las tareas:</p>
<div class="selector-color">
<ul>
  <button style="background-color: #ccc; width: 30px; height: 30px;"  
  <li>
          title="Gris / Blanco">
    <span style="color: green;"><strong>[LISTO]</strong></span>
  </button>
    Enviar documentación
 
  </li>
  <button style="background-color: black; width: 30px; height: 30px;"  
  <li>
          title="Negro">
    <span style="color: red;"><strong>[PENDIENTE]</strong></span>
  </button>
    Pagar matrícula
</div>
  </li>
  <li>
    <span style="color: green;"><strong>[LISTO]</strong></span>
    Revisar correo
  </li>
</ul>
</nowiki>
</nowiki>
|acc_barrera_explicacion=Se ha añadido una etiqueta de texto explícita ([LISTO] y [PENDIENTE]) junto al color. De esta forma, la información se transmite por dos canales: el color (para quien pueda verlo) y el texto (para todos los usuarios). Ya no se depende exclusivamente de la percepción cromática.
|acc_barrera_explicacion=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.
}}
}}

Revisión actual - 12:31 19 dic 2025

Edición de la página como formulario

1. Información básica

Id del criterio: 1.4.1 - Uso del color (Nivel: A)
Título del subcriterio: 1.4.1-A
Universidad participante: UPSA
Curso académico: 2025-26

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

2.1.1. Evidencia en imagen y enlace:
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.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA1.4.1-A-001&oldid=4014»