Ez az akadálymentesítés hónapja. Két hete beszéltünk arról, mi fán terem az akadálymentesség, ezt követően bemutattam a legjobb sablonokat. Ma ássunk mélyebbre: nézzük meg, honnan tudhatod, hozzáférhető-e a te weboldalad is.
A sorozat korábban megjelent részei:
- Mi fán terem a honlapod akadálymentesítése?
- A 4 legjobb sablon akadálymentes WordPress honlapokhoz.
- Infokommunikációs akadálymentesítés 7 lépésben
Egy kis elmélet
Az akadálymentesség hivatalos standardja a WCAG 1.0 (Web Content Accessibility Guidelines – Útmutató Online Tartalmak Akadálymentesítéséhez) 1999-ben jelent meg. Jelenleg a WCAG 2.0 érvényes.
Ezen kívül a WordPress is kidolgozta saját akadálymentességi kritériumait. Ezek teljesítése akkor szükséges, ha egy sablon el akarja nyerni az akadálymentes minősítést a sablonerdőben. Jelenleg 120 sablon rendelkezik ilyen minősítéssel.
A hivatalos standardok végigolvasásába beleőszülnénk, de ha érdekel, tudod, hol kell bogarászni. Ezeket összefoglalva álljon itt 4 szempont, ami alapján megítélheted, akadálymentes-e a weboldalad.
A hozzáférhetőség 4 alapelve
A weboldalad hozzáférhetősége (akadálymentessége) 4 tényezőn múlik. Ezek a következők.
- Észlelhetőség. Minden egyes tartalomnak hozzáférhetővé kell lennie a lehető legtöbb érzékszerv számára. Ennek legegyszerűbb módja, ha minden tartalomhoz szöveges helyettesítő szöveget adnunk.
- Kezelhetőség. A honlap minden eleme legyen elég nagy a láthatósághoz, legyen elválasztva más elemektől. A gombok legyenek észrevehetők, nagyok, megnyomhatók, és működjenek. A kezelhetőséget nagyban rontja az effektek, mozgó elemek elhelyezése az oldalon.
- Áttekinthetőség és érthetőség. Ha az olvasódnak kell kitalálnia, hova kattintson, miről van szó, akkor a dizájnod megbukott. Tartsd magad meglévő hagyományokhoz, és ne akard forradalmasítani a webdesignt, mert az olvasóid eltévednek.
- Robusztusság. Használj friss, letisztult kódokat a honlapodon. Mindig vedd figyelembe a legújabb standardokat.
Bonyolultnak tűnik? Vegyük szemügyre mindegyik elvet részletesebben.
Tegyél észlelhetővé minden elemet
- Használj legalább 18px méretű betűket, levegős sorközöket, és egy sorba ne írj többet 80 karakternél. Minél rövidebb bekezdéseket használj, és tagold a szöveget, ahogy csak lehet.
- A linkeket húzd alá.
- Használj éles kontrasztot a színek között, hogy olvasható legyen az írásod. Ezzel kontraszt-mérő eszközzel ellenőrizheted, hogy megfelelően elválik-e a háttér az írástól.
- Adj értelmes helyettesítő szöveget a képekhez, videókhoz, és minden más nem szöveges tartalomhoz.
- Minden formát (kapcsolati forma, jelentkezési lapok) láss el jelölésekkel a nem látók számára.
Tedd kezelhetővé az oldalt
- Az olvasó navigálhasson kézzel, egér használata nélkül az oldalon. Próbáld ki itt: tedd a kurzurt a keresőmezőbe, és nyomd meg a Tab-ot. Láthatod, hogy a fókusz egyik linkről a másikra ugrik. Ha Entert nyomsz, az egyenlő azzal, mintha klikkelnél az egérrel.
- Kerüld az olvasód ingerekkel való elárasztását. Ne villogjon, ne pörögjön-forogjon semmi az oldalon.
- A linkekhez adj tartalmas horgonyszöveget. Kerüld a töltsd le innen, klikk ide vagy pdf letöltése és hasonló horgonyokat. Például a kattints ide horgonyszöveg helyett írd azt, használd ezt a kontraszt-mérő alkalmazást.
- A gombok legyenek nagyok, kattinthatók. Mobilon se felejtsd el ellenőrizni, mert ott hajlamosak egymásra csúszni a gombok.
Tedd érthetővé (másnak is)
- Ha az olvasód hibásan tölti ki a kapcsolati formát, vezesd vissza a forma elejére, és feltűnően írd ki neki, hogy próbálja újra.
- A menüt minden oldalon ugyanúgy jelenítsd meg: ne zavard meg az olvasódat azzal, hogy újra és újra meg kelljen ismerkednie az oldallal.
Az érthetőség kulcskérdés. Ezt legegyszerűbben úgy ellenőrizheted, ha megkérsz egy nem hozzáértő embert a weboldalad átnézésére, és minden alkalommal felteszed magadnak a kérdést: ha nem én írtam volna, érteném-e, miről szól?
Legyen robusztus
- A weboldalad kódjában ne legyen jelentős érvényességi probléma. Ezt ellenőrizheted a W3C akadálymentességi tesztjével is. Ha 5 hibakódot kapsz az oldaladra, az jónak számít. Ha 105-t, akkor van vele teendőd. Ez valószínűleg azt jelenti, hogy cserélni kell a sablont.
Hogyan ellenőrizd magad a honlapod akadálymentességét?
Most már látod a legfontosabb szempontokat. Ellenőrzni szeretnéd a saját oldalad? A WEBAIM akadálymentesség-tesztje megmutatja neked a legsúlyosabb hibákat.
Nem kell egyszerre mindet orvosolni (az enyém sem tökéletes), és nem kell rögtön cserélni sem az oldalad. De minden jelentősebb honlap-átalakításnál próbáld egyszerűbbé, könnyebben kezelhetőbbé tenni a honlapodat.
Tarts velem a jövő héten is, amikor az akadálymentesítés üzleti hasznáról fogunk beszélni.