Röviden: egy weboldal akkor használható igazán, ha egér nélkül, kisebb kijelzőn, gyengébb látással vagy átmeneti nehézséggel is végig lehet rajta menni. Sok javítás egyszerű: jobb kontraszt, látható fókusz, helyes címsorok és érthető hibaüzenetek.
Miért üzleti kérdés az akadálymentesség?
A látogatók nem azonos körülmények között érkeznek. Valaki telefonon, napsütésben olvas; más billentyűzettel navigál; megint más nagyított szöveget vagy képernyőolvasót használ. Az akadálymentesebb oldal kevesebb felesleges akadályt tesz a megértés és a kapcsolatfelvétel közé.
Nem kell egyszerre teljesen újratervezni mindent. Először a legfontosabb útvonalat érdemes végignézni: kezdőlap, szolgáltatás, ajánlatkérés, sikeres elküldés. Ha ez a folyamat jól használható, máris a legtöbb üzleti értéket hordozó részt javítottad.
1. Legyen elég erős a szöveg és a háttér különbsége
A halványszürke szöveg fehér alapon elegánsnak tűnhet, mégis gyorsan elfárasztja a szemet. A fő szöveg legyen határozottan olvasható, a halványabb színek pedig maradjanak másodlagos információknál. Ne csak a szín jelezze a hibát vagy a sikert: ikon és rövid szöveg is segítsen.
2. Ne legyen túl apró a betű
Mobilon a törzsszöveg kényelmesen olvasható méretet és nyugodt sorközt kér. A hosszú sorokat asztali nézetben is korlátozd, mert a szem könnyebben elveszíti a következő sor elejét. Nagyításkor a tartalom ne csússzon egymásra és ne kényszerítsen vízszintes görgetésre.
3. A címsorok valódi sorrendet alkossanak
Az első szintű cím mondja meg, miről szól az oldal, a második szintű címek pedig osszák fel nagy témákra. A címsor ne csak nagyobb betű legyen, hanem megfelelő HTML-elem is. Ez vizuálisan, keresőben és segítő technológiával is érthetőbb szerkezetet ad.
4. Minden fontos funkció működjön billentyűzettel
Próbáld ki az oldalt egér nélkül. A Tab billentyű haladjon logikus sorrendben, az Enter aktiválja a gombokat és linkeket, a megnyitott menü vagy ablak pedig legyen bezárható. A kijelölt elem körvonala maradjon jól látható; ezt nem szabad pusztán esztétikai okból eltüntetni.
5. A link szövege mondja meg, hová vezet
Az „ide kattintva” helyett használj konkrét megfogalmazást, például „Weboldal-felújítás részletei” vagy „Ajánlatkérés indítása”. Ha a linket a környező mondat nélkül olvassák fel, akkor is érthető marad.
6. A képek kapjanak értelmes alternatív szöveget
A fontos kép leírása röviden közölje, mit ad hozzá a tartalomhoz. Díszítő képnél az üres alternatív szöveg a helyes megoldás, mert a képernyőolvasónak nem kell minden színfoltot felolvasnia. A képre rajzolt szöveget lehetőleg valódi HTML-szövegként is add meg.
7. Az űrlapmezőnek legyen látható neve
A mezőbe írt halvány példaszöveg nem helyettesíti a címkét. A felhasználónak gépelés közben is látnia kell, mit kér az adott mező. Hibánál ne csak piros keret jelenjen meg: írd le röviden, mi hiányzik és hogyan javítható.
8. A kattintható célpont legyen elég nagy
A menüpontok, bezáróikonok és lapozógombok körül maradjon elegendő érintési terület. Két veszélyes vagy gyakori művelet ne kerüljön egymáshoz túl közel. Ez nemcsak mozgáskorlátozott embernek, hanem rázkódó buszon telefonozó látogatónak is segít.
9. Ne induljon el váratlan mozgás vagy hang
A gyors villogás, automatikusan induló videó és folyamatosan mozgó háttér elvonhatja a figyelmet. A díszítő animáció legyen visszafogott, kikapcsolható, és tartsa tiszteletben a csökkentett mozgást kérő rendszerbeállítást.
10. A mobilmenü ne zárja csapdába a látogatót
A menü nyitása után legyen egyértelmű a bezárás, a háttértartalom ne keveredjen a navigációval, és a fókusz se ugorjon láthatatlan elemekre. Forgasd el a telefont, növeld meg a betűméretet, majd ellenőrizd újra.
11. Használj egyszerű, közvetlen nyelvet
A hozzáférhetőség része az érthetőség. Rövid mondatokkal, beszédes címekkel és következetes gombfeliratokkal kevesebb bizonytalanság marad. A szakmai kifejezést magyarázd meg ott, ahol a döntéshez valóban szükséges.
12. Tesztelj valódi feladattal
Ne csak azt kérdezd, hogy „jól néz-e ki”. Próbáld megkeresni az árat, megnyitni egy szolgáltatást, kitölteni az űrlapot és visszatérni a kezdőlapra. Tesztelj billentyűzettel és legalább egy valódi telefonon is. A weboldal-indítási ellenőrzőlista mellé ez jó külön hozzáférhetőségi kör.
Ha egy régi oldalnál több ilyen probléma egyszerre jelentkezik, a weboldal felújítása során érdemes közös komponensekkel rendbe tenni őket, nem oldalanként foltozni.