Akadálymentes űrlapok tartalomkészítőknek

A Gravity Forms jó eszköz akadálymentes webes űrlapok készítéséhez. Ez a fejezet segít abban, hogy az űrlapot akadálymentességi szemlélettel állítsd be, és tudd, mire figyelj. A gyors ellenőrzéshez használd az Akadálymentesítési ellenőrzőlistát.

Miért kell akadálymentes űrlap

Az akadálymentes űrlapot minél több ember tudja használni, minél többféle eszközön. Gondolj például ezekre a felhasználókra:

• fejlesztő, aki számítógépet, billentyűzetet és egeret használ;
• vak felhasználó, aki képernyőolvasót használ;
• siket-vak felhasználó, aki képernyőolvasót és braille-kijelzőt használ;
• vonaton utazó, aki okostelefonon, lassú wifin böngész;
• idős ember, aki erős napfényben használ táblagépet;
• gyerek, akinek eltört a karja, és csak a billentyűzetet tudja használni.

Becslések szerint az emberek mintegy 20 százaléka él valamilyen fogyatékossággal, és az idősödő társadalomban ez az arány nő. Az akadálymentesség nem csak nekik hasznos: ha az űrlapok akadálymentesek, mindenki jobban használja őket.

Irányelvek és jogi követelmények

A Gravity Forms a webes akadálymentesség nemzetközi irányelveit követi: WCAG 2.1, AA szint. Egyes országokban a jogi követelmény a WCAG 2.0 AA, vagy külön szabályrendszer van érvényben. Hogy az országodban és a webhelyed típusára mi vonatkozik, azt a saját hatóságodnál érdemes ellenőrizni.

Ajánlott beállítások

Űrlapbeállítások

Új űrlap létrehozása után az űrlap beállításaiban állítsd be:

• Címke elhelyezése: felülre igazítva
• Leírás elhelyezése: a beviteli mezők fölött
• Az érvényesítési üzenet elhelyezése: a beviteli mezők fölött
• Alcímke elhelyezése: a beviteli mezők fölött
• Érvényesítési összefoglaló: bekapcsolva
• Kötelező mező jelölése: ne vedd ki a kötelező mezők jelölését

Az űrlap blokk beállításai

Amikor űrlapblokkot teszel az oldalra, a blokk beállításaiban:

• az Űrlap beállításai közt kapcsold be az űrlapcím megjelenítését;
• a Haladó beállításoknál ne állíts be pozitív tabindexet, az érték maradjon -1 (vagyis ne legyen tabindex).

Címkék, helyőrzők és leírások

• A címke megmondja, mit kell kitölteni, és mindig látszódjon.
• A címke a beviteli mező fölött legyen.
• A címke csak a beviteli mezőre vonatkozzon, ne tegyél bele hivatkozást, súgóbuborékot vagy más HTML-t.
• A helyőrző javaslat arra, hogyan töltsd ki a mezőt.
• A leírás kiegészítő információt adhat a mezőről.
• A címke mindig legyen értelmes és látható. A helyőrző és a leírás elhagyható.

Miért így

• Ha a címke mindig látszik, az emberek nem felejtik el, mit kell kitölteniük.
• Ha az űrlapot az automatikus kitöltés tölti ki, a látható címke segít ellenőrizni, hogy az érték a megfelelő mezőbe került.
• Az emberek fentről lefelé olvasnak. Ha a címke a mező alatt van, összezavarhat, melyik címke melyik mezőé.
• A helyőrző eltűnik, amint gépelni kezdesz, ezért ha csak az van, a felhasználó elfelejtheti, mit kell beírnia.
• Ha hivatkozás van a címkében, a segítő technológiát (például képernyőolvasót) használó ember összezavarodhat. A címke legyen lényegre törő, a kiegészítő információt a leírásba írd.
• A Gravity Forms gondoskodik róla, hogy a leírást a képernyőolvasók is felolvassák, ezért itt érdemes kiegészítő információt adni.

Példa: Címke: Név, Helyőrző: például Minta Mária.

Küldés gomb

A gomb beállításai:

• Küldés gomb → Általános → Küldés beviteli típusa: válaszd a Szöveg lehetőséget.
• Küldés gomb → Általános → Küldés gomb szövege: használj beszédes szöveget (lásd az „Elnevezések” szakaszt).
• Küldés gomb → Feltételes logika: ne kapcsold be.

Tabindex

Kerüld a pozitív tabindexet az űrlapelemeken. Vannak, akik nem tudnak egeret használni, például mert vakok vagy a finommotorikájuk korlátozott. Ők a billentyűzettel navigálnak: a Tab billentyűvel ugrálnak az elemek (hivatkozás, gomb, űrlapelem) között.

Ha egy űrlapelemre pozitív tabindexet állítasz, az lesz az első, amelyik fókuszt kap az oldalon. Ezzel eltéríted a természetes fókuszsorrendet, ami nagyon zavaró annak, aki a főmenübe szeretne eljutni, és nem a hírlevélre akar feliratkozni. Hagyd, hogy a felhasználó irányítson.

Színhasználat

Az űrlap színeit általában a WordPress-téma határozza meg. Ha a testreszabóban módosítod őket, tartsd szem előtt:

• a szöveg és a háttere, valamint a szegélyek és a hátterük közti színkontraszt legyen elegendő;
• ne hivatkozz színre jelentésként, például: „Nyomd meg a zöld gombot a folytatáshoz”.

Nem mindenki lát tökéletesen. Ha a szöveg és a szegélyek kontrasztja jó, a legtöbben még tábláról, napfényben is el tudják olvasni. A férfiak 8, a nők 0,4 százaléka színtévesztő, ők elveszíthetik a színre utaló információt.

HTML-blokkok és szakasztörések

A HTML mező vagy a Szakasz mező ne tartalmazzon olyan információt, amely nélkül nem lehet kitölteni az űrlapot. A képernyőolvasó az űrlap kitöltése közben nem mindig mondja be ezeket. A fontos információt tedd egy beviteli mező leírásába, mert azt a képernyőolvasók felolvassák.

Elnevezések

A hivatkozásokat, címkéket és gombokat önmagukban is érteni kell. Ne kelljen kitalálni, vagy a környező szöveget végigolvasni, hogy kiderüljön, mi történik. Ha több információ kell egy mező kitöltéséhez, használd a leírást.

Példák:

• A gombnak legyen beszédes felirata. A „Küldés” általános, jobb például a „Feliratkozás”.
• A hivatkozás szövege legyen leíró. A „Kattints ide” nem hasznos, jobb például az „adatvédelmi tájékoztatónk”. Úgy írd a mondatot, hogy a hivatkozás szövege önmagában is érthető legyen.
• Az új jelszó mellé írj világos leírást, például: „Legalább 8 karakter hosszú jelszót adj meg.”

Mondd meg, mire számíthat a felhasználó

A többlépéses űrlap jó ötlet a hosszú űrlap kezelhető részekre bontására. De ne hagyd sötétben a felhasználót, hány lépésből áll az űrlap.

Ha oldaltöréseket használsz, tegyél hozzá látható folyamatjelzőt is. A szorongó emberek (és valójában mindenki) nyugodtabb, ha tudja, mire számítson. Tájékoztasd a lépések számáról, és adj lehetőséget az előző lépésekre való visszalépésre, hogy ellenőrizhessék, mindent jól töltöttek-e ki. A gombok és hivatkozások szövege legyen beszédes, hogy egyértelmű legyen, mi történik a kattintásra. A folyamatjelzőről a Folyamatjelző többoldalas űrlapokon fejezetben olvashatsz.

reCAPTCHA-k

A captchák és reCAPTCHA-k nagyon nehezek lehetnek vak, kognitív fogyatékkal élő vagy kevésbé gyakorlott webhasználók számára. Gondold át, valóban szükséged van-e rájuk. A spam megelőzésére más módot is találhatsz: kapcsold be az űrlapbeállításokban a haladó honeypotot, vagy használj spamvédő bővítményt. A Google reCAPTCHA v3 is lehet megoldás, de sértheti a felhasználók adatainak védelmét, ez bonyolult kérdés.

Mindenekelőtt: ne a felhasználóra hárítsd a spam megakadályozásának terhét, mert kizárhatod az igazi felhasználókat is. Lásd még a Spamvédelem: első lépések fejezetet.

Űrlapellenőrzés

Mi a kötelező?

Nem mindenki tudja, mit jelent a csillag. Ha csillaggal jelölöd a kötelező mezőket, tegyél az űrlap fölé magyarázó sort, vagy a címkébe írd oda, hogy „(kötelező)”.

Egyéni érvényesítési üzenetek

A mezők Egyéni érvényesítési üzenet beállításával írj értelmes hibaüzenetet. A „Ez a mező kötelező” szöveg javítható, például: „Add meg a teljes neved.”

A gondosan megírt hibaüzenetek lényegesek. A hiányzó vagy hibás adatról adott hasznos visszajelzés csökkenti a felhasználó bosszúságát. Adj minden segítséget az űrlap kitöltéséhez, és ha fontos, hogy a felhasználó ki tudja tölteni, a kapcsolattartási adataidat is.