2526UdL1.4.11-A-002

De WCAG Wiki

Edición de la página como formulario

1. Información básica

Id del criterio: 1.4.11 - Contraste no textual (Nivel: AA)
Título del subcriterio: 1.4.11-A
Universidad participante: UdL
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.11-A


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen
Archivo:/Users/xeniapratpedra/Desktop/Captura de pantalla 2026-02-16 a les 21.10.55.png

b) Enlace de donde se ha obtenido la imagen:
https://shop.mango.com/es/ca/h/dona

2.1.2. Código HTML:

<picture><source media="(min-width: 1024px)" srcset="https://shop.mango.com/cms-assets/v3/assets/blt351b9b24ac05a648/blt94736876b002cdec/698ed6b4e340ea00087a821d/27034096-81-422.jpg?imdensity=1&im=RegionOfInterestCrop,width=320,height=138,regionOfInterest=(2332.5,1000) 320w"></picture>

FESTA I ESDEVENIMENTS

Descobreix-ne més

FESTA I ESDEVENIMENTS



Explicación del problema detectado:
Com es pot veure a la part del codi que he selecionat, no hi ha un alt contrast entre el text i el fons, ja que en algunes parts de la web el text costa llegir-se.

Aixó, és perque la web de mango no compleix el criteri 1.4.11.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Persones amb baixa visió (visió reduïda, degeneració macular, cataractes, etc.).

Persones amb daltonisme o alteracions de la percepció del color (protanòpia, deuteranòpia...).

Persones amb discapacitats visuals que utilitzen zoom o configuracions de contrast alt al navegador.

Persones grans (pèrdua natural de contrast visual amb l'edat).

Persones amb discapacitats cognitives que necessiten elements visuals clars per entendre la interfície.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
Archivo:/Users/xeniapratpedra/Desktop/Captura de pantalla 2026-02-16 a les 22.49.24.png
b) Enlace de donde se ha obtenido la imagen:
https://www.netflix.com/es/


2.2.2 Código HTML:

<label data-uia="field-email+label" data-wct-form-control-label="true" class="default-ltr-iqcdef-cache-1kv3we2" for=":r0:">Dirección de correo</label>
<input autocomplete="email" minlength="5" maxlength="50" type="email" dir="ltr" id=":r0:" name="email" data-uia="field-email" data-wct-form-control-element="true" value="">
<button class=" ea2wixt2 default-ltr-iqcdef-cache-1qgzqew" data-uia="nmhp-card-cta+hero_card" type="submit">Empezar</button>
<button class=" ea2wixt2 default-ltr-iqcdef-cache-1qgzqew" data-uia="nmhp-card-cta+hero_card" type="submit">Empezar</button>



Explicación de la solución aplicada:
Com es pot veure a la part del codi qu ehe afegit i a la captura de la pàgina web, Netflix si compleix el minim de 3:1 de contrast de colors.

Es a dir, si compleix el criteri 1.4.11.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UdL1.4.11-A-002&oldid=4730»