Hogyan lesz a Youtube ikonból edzőcipő? Az ikon fontok használata akadálymentesen

A cikk témái

Webes felhasználói felületeken megjelenő ikonokhoz rengetegen használnak ikon fontokat. Ezt a népszerű technikát azonban nagyon körültekintően kell alkalmazni, ha azt szeretnénk, hogy az ikon minden felhasználónk számára akadálymentes legyen.

Mi is az ikon font?

A technika lényegében azon alapszik, hogy az ikont nem hagyományos képként (például az img jelölőelemmel) helyezzük el a weboldalon, hanem egy olyan szövegkaraktert illesztünk be, aminek betűrajzolata a kívánt ikon.

A napjainkban legelterjedtebb Unicode karakterkódolási szabvány számtalan olyan karaktert definiál, ami ikonként is használható. Ilyen például a szeretet jeleként használt, szívet ábrázoló ikon karaktere, amit a Unicode szabvány Black Heart Suit néven ismer.

Az mindig a tipográfustól függ, hogy az általa készített fontkészletben megrajzolja-e ezeket a jellegzetes Unicode ikonokat. Általában elmondható, hogy a hagyományos, és a weben is népszerű fontkészleteknél ezt megtették. Legyen szó akár a Times, az Arial vagy a Verdana fontkészletről. Az ikon betűrajzolata természetesen az adott fontkészlet stílusának függvényében némileg eltérő lehet. Az említett szív karakter például az általam használt fontkészletben így néz ki: ♥

Ugyan a Unicode szabvány elvileg rengeteg különböző ikont definiál, mindent mégsem tartalmazhat. Márpedig sokszor olyan ikonokra is szükség van, amelyek teljesen egyediek. Ilyenek például a közösségi oldalak logói.

Ennek a problémának az áthidalására születtek az egyedi ikon fontkészletek. Webfejlesztők körében nagyon népszerű például a Font Awesome készlet. Ezeknél a fontkészleteknél az egyedi ikonok betűrajzolatát valamelyik Unicode karakterhez definiálják, vagyis ha ezt a karaktert illesztjük be az oldalba, akkor a kívánt ikon jelenik meg. Természetesen ehhez még az is kell, hogy az egyedi fontkészletet a CSS-ben is megfelelően beállítsuk.

De mi vele az akadálymentességi probléma?

Az ikon alapvetően egy vizuális elem. Függetlenül attól, hogy képként, vagy fontként helyezzük el, ahhoz, hogy a felhasználó megértse a jelentését, látnia kell. Az első probléma ott kezdődik, ha a felhasználó biológiai vagy technikai akadályozottság miatt nem látja az ikont. Például egy vak felhasználónak az ikon betűrajzolata teljesen lényegtelen. Számára valamilyen alternatív, elsősorban szöveges módot kell biztosítani arra, hogy az ikon jelentését, funkcióját megértse.

Ha az ikont hagyományos képként helyezzük el a HTML kódban, akkor az img jelölőelem alt attribútuma használható erre a célra. Erről részletesen a Mi legyen az alt attribútum szövege? című cikkem második részében írtam.

Az ikon font esetén azonban merőben más a technikákra van szükség. Természetesen itt is felmerül, hogy milyen módszerrel biztosítsuk az ikon szöveges alternatíváját. Ugyanakkor ikon fontoknál sajnos az is gondot okozhat, hogy miképpen rejtsük el a felhasználó elől az automatikusan generált, megtévesztő vagy értelmetlen szöveges alternatívát.

Első körben az ikon font szöveges alternatívája tulajdonképpen annak a karakternek a neve, amihez az ikon betűrajzolata társul. Manapság jellemzően a Unicode szabvány szerinti neve. A képernyőolvasó program szempontjából tehát borzasztóan fontos, hogy az ikon melyik Unicode karakterhez van definiálva, hiszen azt a karakternevet fogja beolvasni (ha tudja).

Nézzünk egy példát. Legyen mondjuk egy webalkalmazás, ahol a szív ikonra kattintva jelezhetjük, hogy egy adott dolgot kedvelünk. Az ikont tartalmazó gomb HTML kódja például az alábbi lehet, ahol a szív ikonját szabványos Unicode entitásként illesztjük be:

<button>&#x2665;</button>

A gomb, mindenféle egyedi fontkészlet, és CSS formázás nélkül valahogy így jelenik meg vizuálisan:

Szív ikont ábrázoló gomb

De mit olvas fel ebből a képernyőolvasó program?

Magyar nyelvű képernyőolvasókkal tesztelve sajnos lesz olyan képernyőolvasó, ami semmit sem fog felolvasni, még a gomb jelenlétét sem!

Míg mások az alábbiak közül valamelyiket:

Black heart suit gomb

Kör gomb

Gomb

Talán nem szorul magyarázatra, hogy ezek alapján nagyon nehéz helyzetbe kerül egy vak felhasználó, ha a gomb funkcióját szeretné megérteni.

A listából az is jól látszik, hogy a Unicode karakternevek fordítása is számít. Például a kör, mint karakternév helyes lehet, ha a franciakártya lapjaiból indulunk ki. De esetünkben teljesen megtévesztő. Egyébként a black heart suit név is magyar kiejtéssel hangzott el, tehát aki esetleg értené az angol nyelvet, annak sem egyszerű a helyzete.

Mi lehet az akadálymentes HTML megoldás?

Hogyan tudjuk az ikon valódi jelentését belecsempészni a kódba?

Korszerű megoldás lehet például a WAI-ARIA szabványban található aria-label attribútum használata, ami egyfajta szöveges címkét ad a gombnak. Valahogy így:

<button aria-label="Kedvelem">&#x2665;</button>

Ennek eredményeképp a vizuális megjelenés abszolút nem változik, viszont egy modern képernyőolvasó program ezt fogja felolvasni:

Kedvelem gomb

Persze más megoldás is szóba jöhet, de a lényeg, hogy a ikon karakterének neve önmagában semmiképpen sem elég.

És ha CSS-ből illesztjük be az ikon fontot?

A népszerű ikon font gyűjteményeknél általában azt javasolják, hogy az ikont a CSS content tulajdonságának segítségével illesszük be, egy HTML jelölőelem elé vagy mögé.

Ha például a HTML kódban ez a link szerepel

<a href="#" class="ikon-sziv"></a>

akkor a CSS-ben például így szúrhatjuk be a Unicode szív ikont:

.ikon-sziv:before {
   content: "\2665";
}

Sajnos ez a korábban leírt problémán semmit sem változtat, hiszen a CSS content esetén is a beillesztett karakter Unicode neve lesz a mérvadó. Sőt, miután a CSS generált tartalmakat bizonyos képernyőolvasók eleve nem olvassák fel, a helyzet talán még rosszabb is.

Ilyenformán a tartalom nélküli, üres link egyszerűen használhatatlan. Azon felhasználók számára is, akiknek a CSS valami egyéb probléma miatt nem elérhető.

Ha ezt a linket akadálymentesíteni szeretnénk, akkor semmiképpen sem hagyhatjuk üresen. Bele kell tennünk azt a szöveget, ami az ikon valódi jelentése. Ezt a szöveget azonban nem szeretnénk mindenkinek láthatóvá tenni, ha a CSS elérhető. Alkalmazunk kell tehát valamelyik CSS vizuális rejtési technikát. Az így átalakított HTML kód például ez lehet:

<a href="#" class="ikon-sziv"><span class="vizualisrejtes">Kedvelem</span></a>

A CSS pedig ez:

.ikon-sziv:before {
   content: "\2665";
}

.vizualisrejtes {
   position: absolute;
   left: -999em;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

A dolognak most már csak egy szépséghibája van. Azoknál a képernyőolvasóknál, ahol a CSS content mégis felolvasásra kerül, félreérhető dolgokat hallhat a felhasználó. Például azt, hogy

Hivatkozás kör kedvelem

Vagyis az ikon karakterét is el kellene rejtenünk, de kivételesen nem vizuálisan, hanem hallhatóan.

Logikusan erre két megoldás merülhet fel. Az egyik, hogy az ikon beszúrását egy CSS3 media query szabály segítségével csak a vizuális médiatípusokra engedélyezzük. Így biztosítva azt, hogy a speech médiatípus (vagyis például a képernyőolvasó program) ne dolgozza fel azt. Az elvi megoldás mondjuk ez lehetne:

@media not speech {

   .ikon-sziv:before {
      content: "\2665";
   }

}

Sajnos ezt ma még nem támogatják a képernyőolvasó programok, mint ahogy azt sem, hogy a CSS content felolvasását a CSS speak tulajdonsága segítségével egyszerűen letiltsuk. Valahogy így:

.ikon-sziv:before {
   content: "\2665";
   speak: none;
}

Jelenleg tehát kénytelenek vagyunk egy olyan megoldáshoz folyamodni, ami kevésbé elegáns, sőt komolyan felveti azt a kérdést is, hogy a CSS-ből beillesztett ikon font technikának így mennyire van értelme. Az ikont csak úgy tudjuk elhelyezni, hogy egy külön HTML jelölőelemet (mondjuk span elemet) készítünk neki, amit a képernyőolvasó programok elől a WAI-ARIA szabvány által biztosított, aria-hidden attribútum segítségével rejtünk el.

<a href="#"><span class="ikon-sziv" aria-hidden="true"></span><span class="vizualisrejtes">Kedvelem</span></a>

Megjegyzés: azon a HTML szemantikai furcsaságon (hibán) most nem ragadnék le, hogy bizonyos gyűjteményeknél az i jelölőelem használatát javasolják az ikonok jelölőelemének, mondván i, mint ikon.

A CSS kód változatlan, mind az ikon beszúrása, mind a vizuális rejtés tekintetében:

.ikon-sziv:before {
   content: "\2665";
}

.vizualisrejtes {
   position: absolute;
   left: -999em;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

Egyedi ikonok névtelen karaktereken

Az egyedi ikon fontokat tartalmazó gyűjtemények általában úgy próbálják kiküszöbölni az értelmetlen felolvasás problémáját, hogy az ikonokat olyan karakterekhez definiálják, amelyeknek nincsen Unicode szerinti neve. Tehát a képernyőolvasó elvileg nem tudhatja, hogy az adott karakternél (ikonnál) milyen nevet olvasson be.

A Unicode szabvány három olyan kódterületet – úgynevezett Private Use Area (PUA) területet – definiál, ahol a szabvány egyedi, privát felhasználású karaktereknek biztosít helyet úgy, hogy a karakterek neveit hivatalosan nem határozza meg. Ezeket a kódterületeket minden rendszer, illetve minden fejlesztő szabadon használhatja. Általában az ikon font gyűjtemények is ide rakják az egyedi ikonok betűrajzolatait.

Ezzel azonban egy komoly probléma van. Semmilyen garancia sincs arra, hogy az egyedi ikon font helyének kiszemelt PUA karaktereket egy másik rendszer ne használná valami másra. Szabad területen ugyanis mindenki szabadon garázdálkodhat. Sőt, az sincs kizárva, hogy valaki saját belátása szerint nevet adjon a PUA karaktereknek.

Például az iOS operációs rendszer is saját, gyári ikonokat helyez el ezen a területen, és mindegyiknek nevet is ad. Mondjuk az U+E001 karakterkódhoz egy fiúfejet ábrázoló ikont definiál. Tehát ha bármely iOS alkalmazásban egy ilyen gyári ikon megjelenik, akkor az iOS-ben található VoiceOver képernyőolvasó az iOS által definiált ikonnevet – esetünkben a fiú feje szöveget – fogja felolvasni. Ez egy nagyon jó, és akadálymentességi szempontból mindenképpen üdvözlendő megoldás.

Ugyanakkor számunkra az lesz a probléma, hogy ugyanezt a nevet fogja felolvasni akkor is, ha egy webes ikon font ugyanerre a PUA karakterre lett beállítva. Vagyis nem a Unicode fogja az ikon karakterének nevét meghatározni, hanem az iOS!

Fontos, hogy ez nem egy iOS, vagy VoiceOver specifikus hiba, hanem egy olyan technikai lehetőség, ami nyitva áll bármely másik operációs rendszer, vagy böngészőprogram számára. Tehát soha ne bízzunk abban, hogy a képernyőolvasó program csak azért, mert egy ikon a PUA területen van definiálva, nem olvas fel semmit sem.

Szemléltetésképpen vegyünk például egy közösségi csatornákat tartalmazó linkgyűjteményt, ami ikon fontokat használ, és vizuálisan mondjuk így jelenik meg:

Twitter Google+ LinkedIn Slideshare és Youtube ikonok egymás mellett

Ha a fejlesztők nem figyelnek kellőképpen az akadálymentességi kritériumokra, és pont egy olyan ikon font készletet használnak, ahol a PUA karakterek ütköznek az iOS gyári ikonjaival, akkor ez a linkgyűjtemény az iOS-es VoiceOver-rel felolvastatva így hangzik:

hivatkozás női ruha

hivatkozás fiú feje

hivatkozás lányfej

hivatkozás női fej

hivatkozás edzőcipő

Így lesz tehát a Youtube ikonból edzőcipő.

Az akadálymentességi hiba itt is kettős. Egyrészt elhangzik egy csomó megtévesztő ikonnév, másrészt nem hangzik el egyik logó ikon valódi neve sem, vagyis a linkek valódi célja. Ez így nagyon furcsa, és persze használhatatlan felületet ad mondjuk egy iOS-es vak felhasználónak. Hiszen honnan kellene rájönnie arra, hogy az edzőcipő a Youtube-ra ugró hivatkozás?

Az egyik akadálymentes megoldás itt is az lehet, amit a cikk korábbi részében leírtam. Az ikonokat hallhatóan el kell rejtenünk, a közösségi csatornák neveit pedig mindenképpen bele kell tennünk a linkek HTML kódjába, mégpedig vizuálisan elrejtve.

Az is kérdés, hogy dekorációs vagy funkcionális az ikon?

Mielőtt bármely eddig ismertetett technikát alkalmaznánk, fontos azt is tisztáznunk, hogy az ikont milyen célból szeretnénk elhelyezni a felhasználói felületen. Ennek alapján az ikonok két típusáról beszélhetünk:

  1. Dekorációs ikonok: ezeket kizárólag a vizuális dizájn kedvéért használjuk, vagyis nem befolyásolják a weboldal tartalmának megértését, használatát.
  2. Funkcionális ikonok: ezek kritikus szerepet töltenek be a weboldal tartalmának megértése, illetve használata szempontjából.

Szerintem legegyszerűbben úgy dönthetjük el, hogy egy adott ikon éppen melyik csoportba tartozik, ha feltesszük magunknak a kérdést:

Érteném-e, illetve használni tudnám-e az oldalt, ha nem látnám az ikont?

Ha a válasz igen, akkor az ikon valószínűleg csak dekoráció. Ellenkező esetben funkcionális.

Fontos megvizsgálni azt is, hogy az ikon önmagában áll, vagy valamilyen kapcsolódó szöveg is látható mellette? Utóbbi esetén ugyanis az ikon és a szöveg együttes információtartalmát kell mérlegelnünk, amihez a fenti kérdés ugyanúgy segítséget nyújthat.

Dekorációs ikonoknál elég csak arról gondoskodnunk, hogy a képernyőolvasó program ne olvasson fel semmit sem. Nem kell a dekorációs ikon valódi tartalmát szövegesen átadnunk.

Funkcionális ikonoknál viszont mindenről gondoskodnunk kell, ami ebben a cikkben szerepelt, hogy azok a felhasználók is használni tudják a weboldalt, akik tényleg nem látják az ikont.

Összegzés

Azt nem állítom, hogy ne használjunk ikon fontokat, hiszen én magam is alkalmazom ezeket. Azonban látnunk kell, hogy a képként beillesztett ikonokkal ellentétben itt jóval több akadálymentességi kérdésbe futhatunk bele, ha nem vagyunk körültekintőek. Ebben a cikkben például nem is foglalkoztam részletesen azzal a technikai akadállyal, ha az egyedi ikon font használatához elengedhetetlenül szükséges CSS @font-face támogatás hiányzik a böngészőprogramból, vagy az ikon font nem töltődik be helyesen.

Egyéb, nem kifejezetten akadálymentességi szempontokat is mérlegelve, talán ezért is vetődik fel sok fórumon, blogbejegyzésben, hogy az ikon fontok helyett más technológiákat kellene alkalmazni. Például az SVG alapú ikonokat.