Una de les maneres més comunes de millorar l’accessibilitat web és mitjançant la inserció d’alternatives textuals en imatges, de manera que les persones amb discapacitats visuals puguin accedir al contingut sense necessitat de visualitzar-lo.
L’accessibilitat web és un tema cada cop més rellevant a la nostra societat, ja que moltes persones amb discapacitats físiques o cognitives depenen de tecnologies d’assistència per navegar per Internet perquè una web sigui accessible s’han de complir una sèrie de requisits. Començant per la correcta inserció d’alternatives textuals.
Què són les alternatives textuals en imatges?
Les alternatives textuals, també conegudes com a atributs “alt”, són descripcions escrites que s’afegeixen a les imatges perquè els usuaris que no les poden veure puguin entendre’n el contingut. Aquestes descripcions són llegides en veu alta pels lectors de pantalla, que converteixen el contingut visual en àudio.
La inserció d‟alternatives textuals a les imatges és molt important. Ja que permeten a les persones amb discapacitats visuals comprendre el contingut de la web íntegrament. Sense aquestes descripcions, les imatges es tornen inaccessibles i el contingut es perd per a una gran quantitat dusuaris.
Per què són tan importants?
A més, les alternatives textuals també són importants per millorar lexperiència dusuari, no només daquells amb discapacitats visuals. Les descripcions poden ajudar els usuaris a entendre millor el contingut d’una imatge, encara que la puguin veure. Això és especialment útil en casos en què la imatge és complexa o no està relacionada directament amb el text circumdant.
La inclusió d’alternatives textuals a les imatges també és important des d’un punt de vista legal. Molts països tenen lleis que exigeixen que els llocs web siguin accessibles a persones amb discapacitats, i la manca d’alternatives textuals a les imatges es pot considerar una violació d’aquestes lleis.
Com s’insereixen les alternatives textuals en imatges?
Imatges en format “Img”:
La inserció d’alternatives textuals en imatges amb format “img” és important per assegurar-se que les persones amb discapacitats visuals o que utilitzen lectors de pantalla puguin entendre el contingut de la mateixa manera que les persones que no tenen aquestes discapacitats. Aquí hi ha alguns consells per a la inserció d’alternatives textuals en imatges amb format “img”:
- Assegureu-vos d’afegir text alternatiu a totes les imatges d’una pàgina. El text alternatiu, també conegut com a “alt text”, ha de ser una descripció breu i precisa de la imatge.
- Utilitza l’atribut “alt” al codi HTML. L’atribut “alt” permet afegir el text alternatiu directament al codi HTML de la pàgina web, cosa que en facilitarà l’accés per a les persones que utilitzen lectors de pantalla.
- Utilitza l’atribut “title” per proporcionar informació addicional sobre la imatge. L’atribut “title” permet afegir informació addicional sobre la imatge, com ara l’autor o la font de la imatge.
- Usa imatges en els següents formats: BMP, GIF, JPEG, PNG, SVG i WebP. Assegureu-vos que el nom del fitxer de la imatge descrigui el contingut de manera clara i concisa.
Imatges en format “Background”
Les imatges de fons no tenen un atribut “alt” com les imatges regulars i generalment són de caràcter decoratiu, per la qual cosa no cal proporcionar una descripció alternativa per a les imatges amb aquest format.
Imatges en format “SVG”:
Pel que fa a la inserció d’alternatives textuals en imatges amb format SVG:
- Utilitzeu l’etiqueta
: Igual que amb les imatges tradicionals, les imatges SVG també han de tenir una alternativa textual. S’utilitza l’etiqueta per proporcionar una descripció de text alternativa per al contingut SVG. A més, aquesta etiqueta es pot llegir a la majoria dels navegadors i dispositius d’assistència, per la qual cosa és una bona pràctica incloure-la a totes les imatges SVG. - Usa l’etiqueta : L’etiqueta s’utilitza per proporcionar una descripció més detallada del contingut SVG. Aquesta etiqueta no es llegeix a la majoria dels navegadors i dispositius d’assistència, però pot ser útil per proporcionar informació addicional sobre la imatge.
- Usa text alternatiu concís i descriptiu: Igual que amb les imatges tradicionals, és important proporcionar un text alternatiu concís i descriptiu per a les imatges SVG. El text alternatiu ha de descriure el contingut i la funció de la imatge de manera clara.
Icones en format “ASCII”
Les nostres recomanacions per a la inserció d’alternatives textuals en icones format ASCII són:
- Inserir una classe “span” amb l’atribut “sr-only”:
See the Pen
Untitled by Taller Agència (@webmastertalleragencia)
on CodePen. - Aplicar les propietats css perquè només els lectors de pantalla reconeguin aquest text:
See the Pen
Untitled by Taller Agència (@webmastertalleragencia)
on CodePen. - Utilitza una descripció clara i concisa de la icona. La descripció ha de ser prou detallada perquè les persones puguin entendre el que representa la icona, però no tan detallada que sigui aclaparadora.
En resum, la inserció d’alternatives textuals a les imatges és una part essencial de l’accessibilitat a la web. Permet a les persones amb discapacitats visuals comprendre el contingut que altrament no podrien, millora l’experiència de l’usuari i compleix les lleis que exigeixen l’accessibilitat a la web. Per tant, és important assegurar-vos que totes les imatges en un lloc web tinguin alternatives textuals clares i descriptives per garantir una experiència d’usuari positiva i accessible per a tothom.
Si tens dubtes sobre la inserció d’alternatives textuals o en matèria d’accessibilitat web, contacta amb nosaltres i et resoldrem tots els teus dubtes sobre això.
