Kontrasztarány
Az olvashatóság minimum kritériuma a háttér és a betűk közti kontrasztarány. Ha csodálkozol, miért említem meg, akkor nézd meg a magyar weboldalakat: a többségükön találsz olyan szöveget, amely alig olvasható. Nem arról van szó, hogy fekete alapon fehér betűk legyenek. Szó sincs róla. A fejléc képben látsz néhány nagyon szép háttérszín-betűszín változatot. Mindegyik megfelelő kontraszttal rendelkezik. A szükséges kontrasztot mérésekből adódó kutatással számították ki.
Hogy a két szín elegendő kontrasztot ad-e, azt rengeteg eszközzel ellenőrizheted. Magyar eszközt még nem találtam. Én az alábbi online kontrasztarány-ellenőrző oldalt használom:
Itt a foreground color-ba beírod az egyik színkódot, a background color-ba a másikat. Alul zölddel kiírja, hogy Pass. Ez azt jelenti, hogy elég nagy a kontraszt.
A legjobb, ha a WCAG 2.0 AA és WCAG 2.0 AAA szinten is „Pass”, azaz „Átment”. Rengeteg ilyen színkombinációt lehet találni.
A Normal Text címsor azt jelenti, hogy a kontrasztarány a normál kb. 14 pixeles szöveg esetében jól olvasható. Kicsit alatta van a Large Text címsor. Ha ez is „Pass”, akkor címsoroknak is használhatjuk-e az adott színpárt. Címsorok kb. 18 pixeltől nagyobb betűméretet értünk, betűtípustól függően.
A WordPresshez létezik az általam lefordított akadálymentességi bővítmény: WP akadálymentesítés. Ennek kezelőfelületén is ellenőrizni lehet a kontrasztarányt.
Sortávolság
A szöveg akkor olvasható jól, ha megfelelő a sortávolság. Tudjátok hányan hagyják ott a weboldalt, mert nehezen olvasható? Néhány esetben kinyomtatják és úgy olvassák el. Feltéve, ha szépen ki lehet nyomtatni. Ez is a CSS-től függ.
Ha túl kicsi a sortávolság, a szem könnyen átugorja a sorokat. Egy idő után roppant zavaró, hogy elveszítjük, hol tartottunk a szövegben. Ha túl nagy a sortávolság, akkor pedig a szemnek túl megerőltető a következő sorra ugrani.
A hibás sortávolság még szembeötlőbb azok számára, akik nagyítják a weboldalt mert, a betűkön kívül a sortávolság is arányosan nő.
A sortávolságot sosem pixelben, hanem mindig százalékban, illetve a szorzó beállításával kell megadni. Pl. line-height: 1.6.
Az 1.3 alatti érték a legtöbb esetben túl sűrű sorokat jelent, az 1,7 feletti pedig túl ritkát. Nézzétek meg, mennyire lényeges különbség! Az alábbi példában 1 és 1,6 és 2,1 a sortávolság .
A linkek formázása
Azt ígértem, hogy az akadálymentes tipográfia nem fáj: menő és divatos. Mivel a divat nagyon változékony és leginkább manipulált, ezért néhányan azt gondolják, hogy az eltérő színű és aláhúzott linkek nem felelnek meg a modern webdesign-nak.
A linkek az internet leges legfontosabb elemei. Ettől internet az internet. A link aktiválásával eljuthatunk a megfelelő tartalomhoz. (Az aktiválás a legtöbbünknek kattintást jelent az egérrel, de nem mindenkinek).
Éppen ezért a linkeknek másképp kell megjelenni, mint a többi szövegnek. A tipográfiában ezt két módon kellene megkülönböztetni a többi szövegtől: aláhúzással és megkülönböztetett színnel. E két grafikai elem teszi egyértelművé a linkeket. Bármelyik elhagyása hiba akkor is, ha a kortárs divat most éppen mást sugall.
Természetesen a gombok mások. A gombokról aláhúzás nélkül is egyértelmű, hogy linkek. Némely esetben a folyó szövegben is el szoktam helyezni gombokat a linkek megjelölésére, és a felhasználók visszajelzése alapján egyértelműen nagyon jó. De nem lehet minden linket gombként ábrázolni.
Természetesen a menükről is mindenki tudja, hogy linkek, ezért sem szoktuk aláhúzással jelölni.
Átnéztem az erősen profitorientált brit év honlapja győzteseit, és azért nem láttam olyan vészesnek a jelenlegi helyzetet. A honlap maga is aláhúzással vagy megkülönböztetett színnel jelöli a linkeket, és a nyertes honlapok közül is több ilyen van. De azt tudni kell, hogy ezeket a honlapokat néhány év múlva áttervezik majd az éppen akkori egyik trend szerint.
A könnyített (de nem túl jó) változat esetén megkülönböztetett színnel vagy csak vastagított betűkkel jelzett linket csak akkor húzza alá, ha az egérrel fölé megyünk (azaz a hover aktiválásakor). Én magam rettenetesen szenvedek az ilyen honlapoktól, és ott körözök az egérmutatóval, hogy megtaláljam, melyik szöveg a link.
Szóval lehet, hogy a 2016-os trendnek éppen nem felel meg a linkek szabványos és ésszerű ábrázolása, de az biztos, hogy azok a honlapok a leghasználhatóbbak és legtartósabbak, amelynél a linkeket megkülönböztetik színnel és aláhúzással.
Ráadásul nem is szükséges a régi időkben sokat használt kék színt használni, hanem lehet a webdesignba illő színárnyalat. Az aláhúzásnak sem kell feltétlenül a betűk alsó részét keresztülvágni, mert a border-bottom használatával sokkal kevésbé zavaró módon alá lehet húzni a szöveget.
Akadálymentesség: megéri
Ne feledjük: az akadálymentes honlapok eszközfüggetlen, kis karbantartásigényű, felhasználóbarát és minőségi honlapok hosszú távra. Nemcsak 1-2 évre készülnek, és nemcsak egy szűk vásárlói rétegnek.
