2526UdL1.4.5-A-002
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.5-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.asos.com/
2.1.2. Código HTML:
<nowiki>
<img src="https://content.asos-media.com/-/media/homepages/unisex/generic-hp/oct-2024/28-uk-brand-campaign/propositions/generic-hp_tiles_02_v2.jpg" alt="Download our app for exclusive discounts and the latest drops" loading="lazy" class="lazy-loaded">
<nowiki>
Explicación del problema detectado:
El banner promocional utilitza una imatge (img) que conté text incrustat (“Download our app for exclusive discounts and the latest drops”) en lloc de presentar aquest missatge com a text HTML real. Tot i que l’atribut alt descriu el contingut de la imatge, el text visible forma part del fitxer JPG i no existeix com a contingut programàtic dins del document. Això incompleix el criteri 1.4.5 (Imatges de text), ja que el missatge podria presentar-se mitjançant HTML i CSS. En estar dins d’una imatge, el text no es pot redimensionar correctament, no permet l’adaptació de fonts o contrast i pot perdre qualitat en ampliar-se, afectant especialment persones amb baixa visió o necessitats de personalització visual.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Les persones més afectades són aquelles amb baixa visió o dificultats visuals que necessiten ampliar el text, modificar la mida de la lletra, el tipus de font o aplicar modes d’alt contrast per poder llegir còmodament el contingut. En estar el missatge incrustat dins d’una imatge, el text no es pot redimensionar ni adaptar com a text real, pot pixelar-se en fer zoom i no respon a configuracions personalitzades del navegador o del sistema operatiu. També pot afectar persones amb dislèxia o dificultats cognitives que utilitzen eines de personalització tipogràfica. Això crea una barrera perquè la informació promocional no és flexible ni adaptable a les necessitats individuals, vulnerant el principi que el contingut ha de ser perceptible i personalitzable.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
.png)
b) Enlace de donde se ha obtenido la imagen:
https://ilovepeanutbutter.com/?srsltid=AfmBOor8GebwWC8OM1QVohUcufhlVpDaW2RbokAMqDLN6JloL3BZDWvx
2.2.2 Código HTML:
<nowiki>
Made for
peanut butter
lovers
<nowiki>
Explicación de la solución aplicada:
La solució és mostrar el text com a text HTML real en lloc de posar-lo dins d’una imatge. Aix fa que el contingut sigui llegible per lectors de pantalla, ampliable amb zoom i seleccionable o personalitzable amb CSS. Per exemple, el títol “Made for peanut butter lovers” està dins d’un (h2) amb animació, mantenint la informació visible sense dependre de la imatge. Així compleix el subcriteri 1.4.5-A de WCAG 2.1, garantint que tot el text important sigui accessible i fàcil de llegir per tothom.
