2526UdL1.4.5-A-003
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.udl.cat/ca/
2.1.2. Código HTML:
L’element és una imatge png. El nom del fitxer és: https://www.udl.cat/export/sites/universitat-lleid…rusel/Imatges-carrusel/FirstLegoLeagueUdL2026.png
Explicación del problema detectado:
El criteri WCAG 1.4.5 Imatges de text (nivell AA) estableix:
Sempre que sigui possible, el contingut textual s’ha de presentar com text real i no com imatges de text. El text real pot ser ampliat, personalitzar-se, mantenir la nitidesa amb el zoom i ser llegit per tecnologies d’asistencia, cosa que no és possible amb les imatges de text.
En aquest cas no es compleix cap expeció:
- No es un logotip on el text sigui essencial per la identitat de marca (tot i que hi ha elements de LEGO i logos, el text principal és informatiu: dates, edició, llocs)
- No hi ha mecanisme perquè l’usuari personalitzi el text dins de la imatge.
- La tecnologia web (HTML + CSS) permet perfectament reproduir aquest disseny amb text real (més accessible, escalable i llegible pels lectors de pantalla).
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Comporta diverses dificultats d’accessibilitat i usabilitat. Les persones amb baixa visió, en ampliar el contingut (fins i tot només un 200%) veuen com el text dins la imatge es píxel, es difumina o es talla, i no poden augmentar-lo selectivament sense perdre qualitat. Les persones que utilitzen lectors de pantalla tampoc poden accedir al contingut, ja que el text no es llegible pel programari: només es transmet l’alt text de la imatge, que sovint no recull tota la informació visible, com ara dades o ubicacions.
Les persones amb discapacitats cognitives o de lectura no poden aplicar tipografies adaptades (com les dissenyades per a dislèxia), modificar l’espaiat de línies o ajudar els colors de contrast segons les seves necessitats. De la mateixa manera, els usuaris de dispositius mòbils o aquells que prefereixen modes d’alt contrast o mode fosc no poden beneficiar-se dels estils personalitzats que el navegador aplica al text real.
En conjunt, utilitzar imatges per mostrar text redueix la usabilitat, l’estabilitat i la compatibilitat amb les tecnologies d’assistència, comprometent així l’accessibilitat del contingut per a una part important de la població.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://web.gencat.cat/ca/ciutadania/inici
2.2.2 Código HTML:
No tinc el codi. Pero el correcte és que no sigui una imatge sino html i css
Explicación de la solución aplicada:
En aquesta pàgina no hi ha imatges que continguin text incrustat de manera innecessària. No s’han detectat banners, infografies, titulars o frases llargues creades com a imatges (PNG o JPG) amb text superposat. Les imatges que hi apareixen —com fotografies de notícies o icones decoratives— no inclouen cap text informatiu essencial dins la mateixa imatge. En canvi, qualsevol informació associada (com descripcions, títols o peu de foto) està implementada com a text HTML separat, cosa que garanteix la seva accessibilitat i adaptabilitat.
L’única excepció admesa per les WCAG és l’ús de logotips oficials, com el de gencat, que poden contenir una petita quantitat de text incrustat per motius de marca. Aquests casos són permesos perquè no formen part del contingut principal i no es poden substituir fàcilment sense perdre la identitat visual.
Per comprovar que la pàgina compleix aquest criteri, S’ha fet:
- Zoom (Ctrl + o Cmd +) fins al 200–500% i observar que el text continua sent nítid, escalable i totalment llegible, sense pixelar-se ni deformar-se, com passaria amb una imatge de text.
• Seleccionat text amb el ratolí: és possible copiar titulars, dates o paràgrafs sencers, cosa que confirma que són text real.
• Utilitzar un lector de pantalla, com el Narrador (Win + Ctrl + Enter) o VoiceOver (Cmd + F5), i comprovar que el contingut es llegeix de manera fluida (“Enllaç: Eleccions agràries: 27 de febrer”, “Títol: Cinc prioritats…”), sense que apareguin elements marcats com a “imatge” per a informació textual.
• Finalment, si s’inspecciona el codi de la pàgina (amb F12), es pot veure que el text està estructurat correctament en HTML i no incrustat dins de cap imatge.
Tot plegat demostra que la pàgina segueix correctament el criteri d’accessibilitat que prohibeix les imatges de text, excepte en els casos justificats com els logotips.
