HTML alapok: a linkek színe

Akadálymentes lábrész a WebAim honlapján

Még kell néhány év, hogy A WCAG 2.0 a hivatalos WEB akadálymentesítési szabvány legyen Magyarországon is. Addig talán a kontrasztarányra vonatkozó részeket is egy kicsit módosítani fogják. Ugyanis ma elég sok fejtörést okoz azoknak, akiknek már akadálymentes honlappal kell rendelkezniük az USA-ban.

Mi az a kontrasztarány?

Az akadálymentességi irányelvek (WCAG 2.0) meghatározza, hogy mennyire kell a betűknek kontrasztosnak lenni a háttérhez képest, a szövegkiemelésnek a környező szöveg szinéhez képest. Van egy szigorúbb AAA minősítés, és egy kevésbé szigorú AA minősítés. Ez utóbbi is nagyon akadálymentesnek számít. Az akadálymentességnek pedig egy még alapvetőbb kritériuma is van. Nem lehet kizárólag szín kiemelést alkalmazni lényeges tartalmi elemeknél.

Ebből következik, hogy olyan színt kell választani a linkek kiemeléséhez, ami a háttértől és a környező betűk színétől is erőst elüt. Márpedig ez nehéz feladat. Hogyha azt az igen ritka esetet feltételezzük, hogy hófehér alapon koromfekete betűkkel írunk, akkor  ezt a színt (#6e5eff), vagy esetleg egy kicsit sötétebbet használhatunk.

Mi a baj a kontrasztaránnyal?

A szabvány elég szigorú szabályokat ad a kontrasztarányra, amely igencsak leszűkíti a webdesignerek mozgásterét. Ráadásul a linkek számára legalább 3 különböző színt szoktak használni. Egyrészről a link maga más színű szokott lenni, mint a körülötte lévő szöveg. Másrészt a linkek állapotától függően is más-más színt szoktak használni. Egy meglátogatott link más színű, mint amit még nem látogattunk meg. Az egérrel kiválasztott link ismét más színű, a billentyűvel kiválasztott ismét más.

A WCAG 2.0 kikötése, hogy az éppen aktív, fókuszban lévő linket nem szabad csak színnel megkülönböztetni. Ehhez szokták a keretet használni, amely alapértelmezetten minden böngészőben benne van, de a designerek ki szokták kapcsolni.

A fentiekből adódik, hogy a linkek kizárólag színnel való megjelölése a gyakorlatban nehezen megvalósítható, és nehéz a stílusba beilleszteni. Én is sokat próbálkozom, hogy egy adott színpalettához megtaláljam a megfelelő kontrasztaránnyal rendelkező színeket, amelyek a honlapon  jól néznek ki.

Egy másik megoldás, ha a linkeket aláhúzással jelöljük, amit még sokan nem tudnak elképzelni a honlapjukon. Azonban, ha megnézzük például a Melbourni Egyetem AA minősítésű weboldalát, látható, hogy gyöngyörűen meg lehet oldani.
Részlet a Melbourni Egyetem akadálymentes honlapjáról. Szép nagy sortávolsággal, elegáns betűtípussal. és meleg színekkel.

Nagyon fontos megjegyezni, hogy a linkeket nem elég színnel megkülönböztetni. Általában aláhúzással jelöljük. Ezt sokszor elhagyják, de ez hibás gyakorlat.

Kapcsolódó angol cikk: WebAim: WCAG 2.0 and link colors. E szervezet akadálymentes honlapjánaklábrésze látható a cikk elején.