Diferencia entre revisiones de «2526UdL1.4.1-A-001»
Página creada con «{{ActividadWCAG |id_criterio=1.4.1 - Uso del color (Nivel: A) |id_subcriterio=1.4.1-A |id_universidad=UdL |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.1-A |noa_barrera_evidencia_img=Captura de pantalla 2026-02-15 193106.png |noa_barrera_evidencia_url=https://www.aliexpress.com |noa_barrera_evidencia_html=<span class="price-discount">16,33€</span> <span class="price-original">33,51€</span> <style> .price-discount {…» |
Sin resumen de edición |
||
| Línea 7: | Línea 7: | ||
|noa_barrera_evidencia_img=Captura de pantalla 2026-02-15 193106.png | |noa_barrera_evidencia_img=Captura de pantalla 2026-02-15 193106.png | ||
|noa_barrera_evidencia_url=https://www.aliexpress.com | |noa_barrera_evidencia_url=https://www.aliexpress.com | ||
|noa_barrera_evidencia_html=<span class="price-discount">16,33€</span> | |noa_barrera_evidencia_html=<nowiki> | ||
<span class="price-discount">16,33€</span> | |||
<span class="price-original">33,51€</span> | <span class="price-original">33,51€</span> | ||
| Línea 20: | Línea 21: | ||
} | } | ||
</style> | </style> | ||
</nowiki> | |||
|noa_barrera_explicacion=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. | |noa_barrera_explicacion=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: | No existe ningún texto adicional como: | ||
- “Precio en oferta” | - “Precio en oferta” | ||
- “Descuento” | - “Descuento” | ||
- “Precio rebajado” | - “Precio rebajado” | ||
| Línea 31: | Línea 35: | ||
- Personas con daltonismo (especialmente rojo-verde), que pueden no percibir la diferencia entre el precio normal y el rebajado. | - 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. | - 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. | - Usuarios que navegan en pantallas monocromáticas o con configuraciones de alto contraste. | ||
| Línea 37: | Línea 43: | ||
|acc_barrera_evidencia_img=Captura de pantalla 2026-02-15 204924.png | |acc_barrera_evidencia_img=Captura de pantalla 2026-02-15 204924.png | ||
|acc_barrera_evidencia_url=https://www.netflix.com | |acc_barrera_evidencia_url=https://www.netflix.com | ||
|acc_barrera_evidencia_html=<input type="email" aria-invalid="true" aria-describedby="email-error"> | |acc_barrera_evidencia_html=<nowiki> | ||
<input type="email" aria-invalid="true" aria-describedby="email-error"> | |||
<div id="email-error" class="error-message"> | <div id="email-error" class="error-message"> | ||
Introduce texto detrás del signo "@". La dirección "hil@" está incompleta. | Introduce texto detrás del signo "@". La dirección "hil@" está incompleta. | ||
</div> | </div> | ||
</nowiki> | |||
|acc_barrera_explicacion=Este ejemplo cumple el criterio WCAG 1.4.1-A porque: | |acc_barrera_explicacion=Este ejemplo cumple el criterio WCAG 1.4.1-A porque: | ||
Revisión del 19:59 15 feb 2026
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
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">
<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:
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.
