2526UFV1.4.1-C-000

De WCAG Wiki

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-C
Universidad participante: UFV
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-C



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:
No se ha indicado ningún enlace.

2.1.2. Código HTML:

<h1>Resultados del Proyecto</h1> <img src="grafico_colores.png", width="500" height="300" alt="Gráfico que muestra tareas completadas, en progreso y pendientes, con colores"> <p>En este grafico, el color azul representa tareas completadas, el amarillo tareas en progreso y el rojo tareas pendientes.</p>



Explicación del problema detectado:
La imagen solo usa colores para identificar categorías y no tenemos otra cosa como patrones o etiquetas que nos comunique la información de manera directa. Tenemos que depender del texto de fuera de imagen para comprenderla y esto no es una buena practica.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Los usuarios afectados son personas con discapacidad visual como daltonicos o baja visión. Tambien cuando un usuario esta en un lugar con mala iluminación puede sufrir dificultades, y lo mismo ocurre cuando el usuario imprime la imagen en blanco y negro. Los usuarios no deben depender del texto para poder interpretar una imagen.


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:

<h1>Resultados del Proyecto</h1> <img src="grafico-con-etiquetas.png" alt="Gráfico que muestra tareas completadas, en progreso y pendientes, con etiquetas de texto y diferentes patrones además de color">



Explicación de la solución aplicada:
Hemos añadido una indicación de los colores tanto dentro del grafico como fuera para que el usuario no sea dependiente unicamente del color, y ademas se han incluido simbolos para mejorar la comprensión de esta.