2526UdL1.4.11-A-002

Edición de la página como formulario

Editar con 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

1.4.11-A

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

<svg viewBox="0 0 24 24" width="24" height="24" data-icon="ChevronRightMedium" data-icon-id=":r4:" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" role="img"><path fill="currentColor" fill-rule="evenodd" d="m15.586 12-7.293 7.293 1.414 1.414 8-8a1 1 0 0 0 0-1.414l-8-8-1.414 1.414z" clip-rule="evenodd"></path></svg>

</button>

<button class=" ea2wixt2 default-ltr-iqcdef-cache-1qgzqew" data-uia="nmhp-card-cta+hero_card" type="submit">Empezar

<svg viewBox="0 0 24 24" width="24" height="24" data-icon="ChevronRightMedium" data-icon-id=":r4:" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" role="img"><path fill="currentColor" fill-rule="evenodd" d="m15.586 12-7.293 7.293 1.414 1.414 8-8a1 1 0 0 0 0-1.414l-8-8-1.414 1.414z" clip-rule="evenodd"></path></svg>

</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.

---