2526UdL1.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.aliexpress.com
2.1.2. Código HTML:
16,33€
33,51€
<style>
.price-discount {
color: red;
font-weight: bold;
}
.price-original {
color: gray;
text-decoration: line-through;
}
</style>
Explicación del problema detectado:
En este ejemplo, la información de que un producto está rebajado se transmite principalmente mediante el color rojo del precio actual y el color gris del precio anterior tachado.
No existe ningún texto adicional como: - “Precio en oferta” - “Descuento” - “Precio rebajado”
Por tanto, el color es el principal (y casi único) medio para transmitir la información, lo que incumple el criterio WCAG 1.4.1-A.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta especialmente a:
- Personas con daltonismo (especialmente rojo-verde), que pueden no percibir la diferencia entre el precio normal y el rebajado. - Personas con baja visión, que no pueden distinguir correctamente el contraste cromático. - Usuarios que navegan en pantallas monocromáticas o con configuraciones de alto contraste.
Como consecuencia, estas personas no pueden comprender que el producto está en oferta, afectando a su capacidad para tomar decisiones de compra informadas.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.netflix.com
2.2.2 Código HTML:
<input type="email" aria-invalid="true" aria-describedby="email-error">
Explicación de la solución aplicada:
Este ejemplo cumple el criterio WCAG 1.4.1-A porque:
- El error no se comunica solo mediante el color rojo del borde.
- Se proporciona un mensaje de texto claro y comprensible que explica:
- Qué está mal
- Qué debe hacer el usuario para corregirlo
El mensaje es perceptible para:
- Personas con daltonismo
- Personas con baja visión
- Usuarios de lectores de pantalla
El color actúa únicamente como refuerzo visual, pero no es el único medio para transmitir la información.
