Fontos tipp, ha SVG grafikát img elemként használunk

SVG formátumú grafikát (pl. logót, ikont, térképet, grafikont, stb.) több módon is elhelyezhetünk egy weboldalba. Mindig feladatfüggő, hogy éppen melyik beillesztési módszer alkalmazása a legelőnyösebb.

Az egyik megszokott módszer az, amikor a többi képformátumhoz hasonlóan img jelölőelemmel illesztjük be a grafikát. Például így:

<img src="html5-logo.svg" alt="HTML5" />

Ezen módszer egyik jellemzője (esetenként hátránya), hogy az SVG grafika felépítéséhez (vagyis az SVG DOM-hoz) nem férünk hozzá, így például JavaScript-ből sem tudjuk interaktívan manipulálni. Úgy is mondhatnánk, hogy az SVG „kilaposodik”, vagyis ha így illesztjük be, akkor tényleg csak az érdekel minket, hogy a grafika megjelenjen.

Mivel az img jelölőelemet használjuk, ezért a grafika akadálymentességét a megszokott alt attribútum segítségével tudjuk biztosítani. Ebben nincsen semmilyen SVG specifikus dolog. A képernyőolvasó program az img elemhez érve bemondja, hogy ez egy kép, és azt is, hogy mi az alt attribútumának szövege.

Viszont az SVG sok pozitív tulajdonsága közül az egyik pont az, hogy komplex grafikák esetén az akadálymentességet is komplexen támogatja. Például lehetőség van arra, hogy a képernyőolvasó program segítségével „bejárható” legyen egy grafika. Mondjuk egy SVG formátumú országtérképet elkészíthetünk úgy is, hogy egyesével hozzáférhetőek legyenek a megyék nevei is.

A korábban említett „kilaposodás” azonban ezt a lehetőséget is érinti. Tehát hiába kódolunk az SVG grafikába akadálymentességet, ha img elemként illesztjük be, akkor mindenképpen az img elemnél megadott alt attribútumot használják a képernyőolvasó programok.

Kivéve az iOS-ben és a macOS-ben használt VoiceOver képernyőolvasót.

A VoiceOver (pontosabban fogalmazva a neki információkat biztosító WebKit böngészőmotor) az img elemként beillesztett SVG esetén sem hagyja „veszni” az SVG grafika akadálymentességét. Ezek az SVG grafikák is „bejárhatók”, ami tulajdonképpen nagyon hasznos lehet.

De van egy „probléma”.

A VoiceOver az img elemként használt SVG grafika esetén figyelmen kívül hagyja az alt attribútumot! Mindenképpen az SVG-ben lévő akadálymentességi információkat akarja használni.

Sokan ezt egy bug-nak vélik, de az Apple egyik fejlesztőmérnöke szerint ez a viselkedés szándékos.

A bug inkább az, hogy a WebKit böngészőmotor sajnos azt még nem tudja megítélni, hogy a beillesztett SVG akadálymentes-e vagy sem. Vagyis ha tudottan vagy tudatlanul egy nem akadálymentes SVG grafikát illesztünk be img elemként, és arra számítunk, hogy majd az img alt attribútuma lesz a mérvadó, akkor tévedünk. A weboldalunk nem lesz akadálymentes a VoiceOver-es felhasználóink számára, márpedig Magyarországon is viszonylag sok vak felhasználó rendelkezik iOS eszközzel.

A problémára létezik egy viszonylag egyszerű megoldás.

Ha eldöntjük, hogy nem akarjuk kihasználni az SVG akadálymentességét (vagy fogalmunk sincs, hogy a beillesztendő SVG akadálymentes-e), akkor az img jelölőelemhez definiáljunk egy role=”img” ARIA attribútumot. Ennek hatására a WebKit mindenképpen „kilaposítja” az SVG grafikát, és az elvárt módon az alt attribútum szövegét továbbítja a VoiceOver felé.

A cikk elején szereplő kódrészletet tehát így érdemes módosítani, ha a logó SVG grafikájában nincs különösebb akadálymentességi információ:

<img src="html5-logo.svg" alt="HTML5" role=”img” />

Persze ez a megoldás egy igazi buherálás, hiszen az img jelölőelem natív szerepe (alapértelmezett role értéke) mi más lenne, mint az img érték.

Jelenleg csak abban reménykedhetünk, hogy idővel a WebKit motor automatikusan felismeri majd, hogy a beillesztett SVG akadálymentes-e, és ha nem az, akkor automatikusan az alt attribútumot használja.