Les imatges SVG s’estan convertint en una forma cada cop més popular d’afegir atractiu visual a pàgines web i aplicacions. Encara que aquests gràfics basats en vectors són visualment atractius, pot ser que no siguin accessibles per a tots els usuaris, deixant fora aquells que depenen de lectors de pantalla per accedir al contingut.
Afortunadament, hi ha maneres de fer que les seves imatges SVG siguin accessibles per a tothom. Afegint text alternatiu a les seves imatges SVG, et pots assegurar que tothom pugui accedir als teus elements visuals i comprendre’ls.
Aquesta guia us proporcionarà la informació que necessiteu per garantir que les vostres imatges SVG siguin accessibles per a tothom. Cobrirem els aspectes bàsics de l’addició de text alternatiu a les imatges SVG, així com els avantatges de fer-ho. Comencem.
Què són les imatges SVG?
Les imatges SVG es creen combinant imatges amb codi que crea els elements visuals.
Les imatges SVG solen anomenar-se “SVG estàtics”. A causa d’això, les imatges són estàtiques, cosa que significa que el codi és l’únic que afegeix el visual.
A diferència de la interactivitat d’HTML, SVG no utilitza etiquetes com “a” o “button” per crear elements visuals. En canvi, els elements visuals es creen amb codi. Això vol dir que es poden crear elements visuals complexos amb un llenguatge de marcatge senzill. Per exemple, es pot crear una pilota que rodi per un camí.
Per què són importants les alternatives de text per a les imatges SVG?
Si estàs dissenyant un lloc web, una aplicació o un tauler de control, voldràs que el teu contingut sigui accessible per al major nombre de persones possible.
A mesura que augmenta el nombre dusuaris que confien en la tecnologia dassistència, com els lectors de pantalla, la necessitat duna web accessible sha tornat encara més crucial.
I encara que laccessibilitat és important per a tots els llocs web, ho és especialment per als continguts visuals. La dificultat de llegir continguts només de text en pot dificultar l’accés i la comprensió.
Quan es dissenya per a laccessibilitat, cal assegurar-se que qualsevol pugui utilitzar el contingut. Proporcionar text alternatiu a les imatges permet als usuaris escoltar el contingut amb programes que llegeixen el text en veu alta, com ara els lectors de pantalla.
No voldràs que part del teu contingut no es pugui llegir per alguns usuaris degut a una discapacitat. Proporcionar alternatives de text per a les imatges pot permetre que tothom gaudeixi del teu contingut visual.
Com afegir alternatives de text a imatges SVG usant el mètode “title” + “descr”.
- Utilitza l’etiqueta “title”: Igual que amb les imatges tradicionals, les imatges SVG també han de tenir una alternativa textual. L’etiqueta “title” s’utilitza 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 desc: L’etiqueta desc 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 i concisa.
Avantatges d’afegir alternatives de text a les imatges SVG
Una de les raons principals per afegir alternatives de text a les teves imatges SVG és garantir que qualsevol persona pugui accedir als teus elements visuals i comprendre’ls.
Les persones amb discapacitat visual, per exemple, poden no ser capaces de llegir contingut només de text, cosa que pot dificultar la navegació per la web i l’accés al contingut.
No obstant això, si afegiu alternatives de text als vostres continguts visuals, aquests usuaris podran sentir el que heu de dir. Això permet a tots gaudir del contingut i estar plenament presents al seu entorn.
Consells per inserir imatges accessibles SVG i escriure les seves alternatives de text de manera eficaç.
Quan inseriu imatges SVG i la vostra alternativa textual, us heu d’assegurar que les vostres alternatives siguin eficaces seguint algunes pautes.
- Utilitza títols clars perquè el contingut sigui més accessible. Això pot ajudar les persones amb problemes de visió o amb un baix nivell d’alfabetització a llegir-ne el contingut.
- Redueix el text el màxim possible, però sense interferir en una comprensió senzilla. Massa text pot ser difícil de llegir i entendre, mentre que massa poc pot fer que els elements visuals semblin incomplets.
- Assegureu-vos que els elements visuals siguin clars.
- Evita utilitzar massa imatges. Això pot dificultar la comprensió de la informació.
- Evita utilitzar massa colors a les imatges SVG. Això pot confondre els usuaris amb deficiències visuals.
- Evita utilitzar massa símbols a les imatges SVG. Això pot confondre els usuaris.
- Evita utilitzar paraules enganyoses.
Exemples d’alternatives textuals eficaces per a imatges SVG
Igual que per a molts tipus de contingut, pots escriure alternatives de text eficaces per a les teves imatges SVG basant-te en el contingut visual de la pròpia imatge SVG.
En aquest exemple, la imatge SVG mostra el nostre logotip de la teva web accessible. Les alternatives de text per a l’element visual en aquest exemple serien “Logotip La teva web accessible.
La imatge SVG mostra simplement el nostre logotip, per la qual cosa podríem inserir un “title” acord i una etiqueta “descr” que complementi aquest títol. Per exemple:
See the Pen <a href="https://codepen.io/webmastertalleragència/
Accessible bee SVG usant
Conclusió
Les imatges SVG s’estan convertint en una forma cada cop més popular d’afegir atractiu visual a les pàgines i aplicacions web.
Encara que aquests gràfics basats en vectors són visualment atractius, pot ser que no siguin accessibles per a tots els usuaris, deixant fora aquells que depenen de lectors de pantalla.
Afortunadament, hi ha maneres de fer que les seves imatges SVG siguin accessibles per a tothom. Afegint text alternatiu a les teves imatges SVG, et pots assegurar que tothom pugui accedir als teus elements visuals i comprendre’ls.
Si tens dubtes en matèria d’accessibilitat web, contacta amb nosaltres i et resoldrem tots els teus dubtes sobre això.
