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:
<span class="price-discount">16,33€</span>
<span class="price-original">33,51€</span>
<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
- 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">
<div id="email-error" class="error-message">
Introduce texto detrás del signo "@". La dirección "hil@" está incompleta.
</div>
Explicación de la solución aplicada:
La información sobre el error en la introducción del correo electrónico no se transmite únicamente mediante el color del borde del campo, sino que se complementa con un mensaje de texto claro y explicativo que indica cuál es el problema y cómo corregirlo. Aunque el campo erróneo se resalta visualmente en color rojo, el color actúa únicamente como un refuerzo visual, ya que el mensaje textual permite comprender el error independientemente de la percepción del color. De este modo, el contenido resulta accesible para personas con daltonismo, personas con baja visión y usuarios de lectores de pantalla, quienes pueden identificar y entender el error sin necesidad de distinguir el color, cumpliendo así con los requisitos.
