Az akadálymentes tipográfia (CSS) 3 követelménye

6 kör klönböző kontrasztos színű kör: benne kontrasztos betűkkel írtam fel az alábbiakat: szép, változatos, kontrasztos, olvasható, szabványos, akadálymentes.

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:

Contrast checker
Az amerikai Webaim cég online kontrasztarány-ellenőrző programjának felülete.

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 .

Az akadálymentes honlaknak alig van karbantartási igénye! Minden tekintetben szabványos, így sok-sok évig működhet komolyabb átalakítás, így további befektetés nélkül.
Sokkal több látogató tudja használni. A neten akadályokkal küzdők is gond nélkül hozzá juthatnak a tartalomhoz. Ők azok, akiknek személyes képességeik eltérnek az átlagtól (idősek, diszlexiások, alacsonyabb képzettségűek, különböző hiányokkal küzdők, stb.).
A helyes linket az előző mondatban láthattátok. A linknek mindig kell szöveget adni ‒ méghozzá mindig beszédes szöveget! Nem elegendő az, hogy „katt ide”, és ehhez hasonlók. A szabályt röviden és egyszerűen Az Az akadálymentes linkek 5 alapvető szabálya c. cikkemben magyarázom el.

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.

Mentés

Mentés