Akadálymentesség fejlesztőknek

Hogyan készíthetsz olyan űrlapot, amely a legtöbb ember számára használható, megfelel a WCAG 2.1 AA szabványnak, és akkor is akadálymentes marad, ha egyedi CSS-t és JavaScriptet adsz hozzá? Ez a fejezet áttekinti, mi fontos az űrlapelemek szerkezetében, a hibák és értesítések megjelenítésében, és hogyan ellenőrizd az eredményt.

A web természeténél fogva akadálymentes: ha érvényes HTML5-öt használsz, a billentyűzet, az egér, a képernyőolvasó és a hangvezérlés már jól eléri az űrlap funkcióit. A HTML5 azonban nem mindig elég az alkalmazásod igényeihez. A Gravity Forms akadálymentességi fejlesztéseiről érdemes a kiadások változásnaplójának akadálymentességi megjegyzéseit figyelni. A tartalomkezelőknek szóló útmutató: Akadálymentes űrlapok tartalomkészítőknek.

Címkék és helyőrzők

Minden űrlapvezérlőnek látható címke kell, és a címkét for/id párosítással kell a vezérlőhöz kötni.

• A címke csak szöveg. Ne tegyél bele hivatkozást, gombot, tooltipet vagy más nem szöveges elemet, mert így a kisegítő technológiával nehéz aktiválni a hozzá tartozó mezőt.
• A címke nem azonos a helyőrzővel. A helyőrző egy rövid szó vagy kifejezés, amely a várt adat típusát mutatja, nem magyarázó üzenet.
• A címkét és az alcímkét a mező fölé vagy mellé tedd, mert ez a természetes olvasási sorrend.

Miért?

• A látható címke miatt gépelés közben sem felejti el a látogató, mit kell kitöltenie.
• Automatikus kitöltésnél jobban ellenőrizhető, hogy az adat a megfelelő mezőbe került-e.
• A képernyőolvasó a mezővel együtt felolvassa a címkét.
• A címkére kattintva a mező is fókuszt kap, így nagyobb a kattintási terület.
• A helyőrző gépelés közben eltűnik, ezért egyedüli címkeként összezavarhatja a látogatót.

<label for="unique-id-for-name">Neved</label>
<input type="text" id="unique-id-for-name" name="full-name" autocomplete="name" placeholder="Például Kovács Anna">
<label for="unique-id-for-amount">Mennyiség</label>
<select name="amount" id="unique-id-for-amount">
    <option value="one">Egy</option>
    <option value="two">Kettő</option>
    <option value="three">Három</option>
</select>

A HTML-azonosítók az oldalon belül mindig egyediek legyenek, hogy a kisegítő technológia célzottan elérhesse az elemeket.

Elemek csoportosítása

Az összetartozó elemeket fieldset és legend elemmel csoportosítsd. Ez hasznos a választógombok, jelölőnégyzetek és a névhez vagy címhez tartozó mezők csoportjainál. A fieldset a csoport tárolója, a legend a csoport neve.

Ezzel jelentést adsz a bennük lévő elemeknek, a képernyőolvasó pedig bemondja, hogy csoportról van szó, és felolvassa a legend szövegét, így a vak látogató megérti, mit kell kitöltenie.

<fieldset>
    <legend>Hány süti?</legend>
    <label for="unique-id-for-amount">Mennyiség</label>
    <select name="amount" id="unique-id-for-amount">
        <option value="one">Egy</option>
        <option value="two">Kettő</option>
        <option value="three">Három</option>
    </select>
</fieldset>
<fieldset>
    <legend>Válassz pólóméretet</legend>
    <input id="size-s" name="size" type="radio" value="small" />
    <label for="size-s">Kicsi</label>
    <input id="size-m" name="size" type="radio" value="medium" />
    <label for="size-m">Közepes</label>
    <input id="size-l" name="size" type="radio" value="large" />
    <label for="size-l">Nagy</label>
</fieldset>

Tabindex

Kerüld a pozitív tabindex használatát az űrlapvezérlőkön, és hagyd érintetlenül a természetes tabulátorsorrendet.

Aki nem tud egeret használni (mert vak, vagy mozgásában korlátozott), a Tab billentyűvel lép elemről elemre. Ha egy űrlapelemnek pozitív tabindex-et adsz, az lesz az oldal első fókuszálható eleme. Ez felborítja a természetes sorrendet, és bosszantó annak, aki csak a főmenüt szeretné elérni, nem pedig minden oldalon feliratkozni a hírlevélre. Hagyd, hogy a látogató irányítson.

Színkontraszt

A szöveg és a háttér közötti kontrasztarány legalább:

• 4,5 : 1 a 24 képpontnál kisebb normál szövegnél;
• 3 : 1 a 19 képpontos és nagyobb félkövér szövegnél;
• 3 : 1 a 24 képpontos és nagyobb normál szövegnél.

A szabály a meglévő márkalogókra nem vonatkozik, a szöveget tartalmazó más képekre igen. A WCAG 2.1 AA óta az aktív felületi elemek (például a beviteli mező szegélye) és a háttér közötti kontrasztarány legalább 3 : 1.

Ha a helyőrző szövegét CSS-sel formázod, add hozzá az opacity: 1; szabályt is, mert egyes böngészők alapból átlátszóságot adnak a helyőrzőnek. A helyőrző kontrasztja is legalább 4,5 : 1 legyen a háttérhez képest.

A cél, hogy a szöveg és a szegélyek mindenkinek jól olvashatók legyenek, akár napsütésben, táblagépen is. Kontrasztellenőrző eszközből sok van online, offline és tervezőprogramokba építve.

A szín használata

Ne adj jelentést a színnek. Például ne csak piros szegély jelezze, hogy egy mező kötelező, és ne hivatkozz a szövegben „a zöld gombra”.

A férfiak 8%-a és a nők 0,4%-a színtévesztő, így lemaradhatnak a színváltozásról vagy annak jelentéséről. A színek kultúránként is mást jelentenek. Használhatsz színt, csak ne az legyen az egyetlen jelzés: hibánál például írd ki szövegesen, mi a hiba, és hogyan javítható.

Automatikus kitöltés

Ez a szabály a WCAG 2.1 AA „Beviteli cél azonosítása” (1.3.5) kritériuma. Ha az oldalnak csak a WCAG 2.0 AA szabványnak kell megfelelnie, nem kötelező.

Az űrlapvezérlőn egy attribútummal jelöld meg a mező célját. A W3C közzétett egy listát a beviteli célokról. Ez kizárólag az űrlapot kitöltő személy saját személyes adataira vonatkozik.

A szabály a kognitív fogyatékossággal élőket segíti: nem kell minden űrlapon újra begépelniük az adataikat. Ha minden űrlap ugyanazokat az autocomplete értékeket használja, a böngésző megbízhatóbban tölti ki a mezőket. Később a kisegítő technológia is használhatja (például ikont tehet a címke mellé).

<label for="fname">Keresztnév</label>
<input id="fname" type="text" autocomplete="given-name">
<label for="lname">Vezetéknév</label>
<input id="lname" type="text" autocomplete="family-name">

Gondold át, mely mezőkhöz adsz automatikus kitöltést: egyes adatok (például bankkártyaadatok) túl érzékenyek, mások túl privátak egy nyilvános számítógéphez. Az értékek általában az amerikai névszerkezetet követik, Európában vagy Ázsiában a nevek felépítése eltérhet.

A nem űrlapszintű információ ne legyen az űrlapban

A címsorok, HTML-blokkok, különálló bekezdések és más, az űrlaphoz nem tartozó információ az űrlapon kívül legyen. Ha az űrlap kitöltéséhez szükséges kiegészítő információ van, tedd az űrlap fölé, vagy írd a mező leírásába.

A képernyőolvasók űrlapba lépve „űrlapmódba” kapcsolnak, és csak a fókuszálható elemeket célozzák, hogy a mezőkbe be lehessen gépelni. Emiatt az űrlapban lévő címsort vagy egyéb HTML-t nem olvassák fel.

Különálló szöveget az aria-describedby attribútummal köthetsz egy beviteli mezőhöz. A Gravity Forms felületén egy mezőhöz adott leírást a rendszer így köti a mezőhöz, ezért a leírás a mezővel együtt felolvasásra kerül.

<label for="input_1_1">Szín</label>
<input name="input_1" id="input_1_1" type="text" value="" aria-describedby="gfield_description_1_1">
<p id="gfield_description_1_1">Írd be a kedvenc színedet</p>

A fontos információ legyen alapból látható

A lényeges információt ne rejtsd kapcsoló vagy tooltip mögé. Az ilyen elemek extra akadályt jelentenek, és nem biztos, hogy mindenki érti a rejtés mintáját. Ha egy információ az űrlap kitöltéséhez elengedhetetlen, mutasd alapból.

Dinamikus változások bejelentése

Ha fontos tartalom oldalfrissítés nélkül változik, jelezd az aria-live attribútummal a változást tartalmazó elemen, vagy használj role="alert" szerepet. Egy számítás összege például észrevétlen maradhat a vak látogatónak.

Ha a változás sok szöveg (például hibalista), nem kell mindent felolvasni, elég egy üzenet, például „Az űrlapot nem lehetett elküldeni, a hibák az űrlap fölött vannak felsorolva”.

• Az aria-live a már az oldalon lévő elemek változására való, például az összesen árra. Az aria-live="polite" a változást akkor mondja be, amikor a felhasználó befejezte az interakciót, az aria-live="assertive" azonnal.
• A role="alert" az aria-live="assertive" és az aria-atomic="true" együttes beállításával egyenértékű.

<div aria-atomic="true" aria-live="polite">
   <label for="input_44_2">Összesen</label>
   <input readonly="readonly" name="input_2" id="input_44_2" value="0 Ft">
</div>

<div class="validation_error" role="alert">Probléma volt a beküldéssel. A hibákat lejjebb jelöltük.</div>

A Gravity Forms alapból kínál űrlaphiba-összegzést is, ennek bekapcsolását az Akadálymentesítési ellenőrzőlista írja le.

Időkorlát az űrlap beküldésén

Ha időkorlátot adsz a beküldésre, tájékoztasd róla a látogatót, és adj lehetőséget a lejárat előtt meghosszabbítani. A szorongó embereknek nehéz lehet egy hirtelen lejárati figyelmeztetésre reagálni, másoknak pedig több időre lehet szükségük az űrlap kitöltéséhez.

Előre közöld, hogy időkorlát van, miért van (például biztonsági okból), és hogy szükség esetén meghosszabbítható.

Űrlapellenőrzés

Segíts a látogatóknak elkerülni a hibákat, és ha mégis előfordulnak, vezesd őket a javításukig:

• Teszteld az űrlapot alaposan, különféle helyzetekben; ha van rá erőforrásod, teszteltess felhasználókkal.
• Írj világos figyelmeztetéseket és hibaüzeneteket, egyszerű, nem technikai nyelven.
• A hibák listáját az űrlap fölé tedd (ne az űrlapba), és minden mezőnél is jelezd, mi volt a hiba.
• Ha egy mezőnek meghatározott formátuma van (dátum, jelszó), a leírásban add meg a szabályt, mintát vagy példát, hogy ne próbálgatással kelljen kitalálni.

Ne feltételezd, hogy a látogatók értik az űrlap felépítését: ne hibáztasd őket, légy udvarias és megértő.

Egyedi stílusú legördülők, választógombok és jelölőnégyzetek

Minden funkciónak működnie kell billentyűzettel, és a képernyőolvasónak helyesen be kell jelentenie. Szépíthetsz CSS-sel és JavaScripttel, de nem szabad kikapcsolnod a billentyűzetes és képernyőolvasós elérést.

• Az elterjedt Select2 könyvtár jelenleg nem akadálymentes a képernyőolvasóknak: a kiválasztott opciókat nem jelenti be, a vak látogató nem tudja, mit választ.
• Egyes egyedi választógomb-minták display:none tulajdonságot adnak a beviteli mezőnek, így a billentyűzettel dolgozó nem éri el.
• A legördülő opcióit jelenleg csak CSS-sel nem lehet akadálymentesen formázni. Léteznek jó minták egyedi stílusú vezérlőkhöz.

Az alapszabály: először legyen működőképes, aztán szép. A vezérlőnek mindenkinek működnie kell, a szépítés csak extra.

Ki felel a weboldal akadálymentességéért?

Téma- vagy bővítményfejlesztőként a legjobb eszközöket kell adnod a tartalomkezelőknek, és útmutatást is, hogyan tartsák akadálymentesen az űrlapot (például ne rejtsék el a címkéket). Végső soron az oldal tulajdonosa felel az oldal akadálymentességéért.

Ha akadálymentességi hibát találsz a Gravity Forms kódjában, jelezd a támogatásnak. Licenccel a fiókodból a támogatási űrlapon, anélkül a kapcsolatfelvételi űrlapon. Ha az oldaladat akadálymentességi szempontból auditálták, és a Gravity Formsszal készült űrlapra kifogást találtak, szintén jelezd, és közösen megnézhető, megoldható-e a te oldaladon, vagy a Gravity Forms oldalán kell változtatni.

Érvényesítés és tesztelés

Négy fontos szempont:

• a HTML legyen érvényes és hibamentes;
• minden funkció működjön csak billentyűzettel;
• a vak, képernyőolvasót használó látogató is kapjon megfelelő visszajelzést;
• futtass akadálymentességi tesztelőeszközöket.

Az automatikus tesztelés nem fog meg mindent, a billentyűzetes tesztet most is kézzel kell elvégezni. A mérce a WCAG 2.1 AA, amely a legtöbb országban érvényes vagy érvényes lesz. Ha bizonytalan vagy, nézd meg az adott ország előírásait.

A PHP- és JavaScript-kód automatikus tesztjei (például a WordPress kódolási szabványok) a kódbázist vizsgálják. Az akadálymentességhez a generált DOM-ot kell tesztelni, vagyis böngészőben, vagy automatikus tesztnél generált DOM-példányon. Tedd az akadálymentességi tesztet a fejlesztési rutin részévé.

Tesztelőeszközök

• Saját billentyűzet: próbáld ki, hogy minden lényeges funkció működik-e csak billentyűzettel.
• W3C jelölésellenőrző: a generált kódot URL-lel, fájlfeltöltéssel vagy közvetlen beírással ellenőrizheted; a CSS-hez külön CSS-ellenőrző van.
• aXe Developer Tools: jelenleg a fejlesztőknek ajánlott legjobb ellenőrző; böngészőbővítményként (Chrome, Firefox) fülként jelenik meg az eszközkészletben, parancssori változata is van.
• További automatikus ellenőrzők: HTML_CodeSniffer (könyvjelző), WAVE (böngészőbővítmény), Lighthouse (az axe-core motorral).
• JavaScript-ellenőrzők: eslint-plugin-jsx-a11y és react-a11y a JSX, illetve React elemekhez.

Ellenőrzőlisták és gyorsreferenciák

Hasznos a WCAG gyorsreferenciája és az a11y project ellenőrzőlistája.

Záró gondolat

Ha valamit nagyon nehéz megfejleszteni és akadálymentessé tenni, valószínűleg a felhasználók számára is túl bonyolult. Tartsd szem előtt a látogatót: te nem vagy a felhasználó. Az űrlap legyen a lehető legkönnyebben kitölthető, és ragaszkodj az űrlaptervezési konvenciókhoz, mert az emberek hozzászoktak, és nem akarnak megtanulni egy ismeretlen vezérlőt. Az egyszerűség nem jelent csúnya megjelenést, csak átgondolt, funkcionális tervezést.