Az amerikai felnőttek 4-ből 1-e él valamilyen fogyatékossággal. Ha az űrlapod nem akadálymentes, a potenciális közönséged negyedét levágod, mielőtt eljutna a küldés gombig.
Az akadálymentes űrlap mindenkinek működik. Vagyis a csak billentyűzetet használóknak. A képernyőolvasóval hallgatóknak. A gyengénlátóknak. A remegő kezűeknek, akiknek több idő kell a mezők kitöltéséhez. Nincs külön tervezés, nincs extra bonyodalom. Csak egy űrlap, amelyet úgy építettek, hogy mindezek az emberek tényleg használhassák.
Világos címkék. Billentyűzetes navigáció. Hibaüzenetek, amelyeket a képernyőolvasó be tud mondani. Elég kontraszt ahhoz, hogy a gyengénlátók elolvashassák a szöveget. Ezek nem extra funkciók. Ez az alap, amelyet a WCAG 2.1 AA és az Americans with Disabilities Act 2026 áprilisától megkövetel.
Mitől különböznek az akadálymentes űrlapok
Vedd bármelyik kapcsolati űrlapot, és ugyanazokat a hibákat találod. Egy szövegmező helyőrzővel, de látható címke nélkül. Egy jelölőnégyzet, amelynek nincs magyarázata, mit csinál. Egy piros szövegű hibaüzenet, amelyet a képernyőolvasó nem tud bemondani.
A legtöbb űrlapot egérhasználóknak építik, az akadálymentességet pedig utólag, utógondolatként ragasztják rá. Az akadálymentes űrlap fordítva működik. Az elejétől feltételezi, hogy az emberek különböző módokon használják. Van, aki egérrel, van, aki csak billentyűzettel. Van, aki olvassa, van, aki képernyőolvasóval hallgatja.
Ez megváltoztatja, hogyan építed az űrlapot. A helyőrzők címke nélkül használhatatlanok. A piros csillagok szöveg nélkül használhatatlanok. Egy vizuális elrendezés, amely az egérhasználóknak működik, csapdába ejtheti a billentyűzethasználókat. Az akadálymentes űrlapot nem nehezebb megépíteni. Csak az egéren túli interakciós mintákra is gondolni kell.
Miért számít ez
Jogi határidő. Az ADA II. címe 2026. április 24-ig megköveteli a WCAG 2.1 AA megfelelést. A meg nem felelés már nem kockázat. Jelenlegi felelősség.
Üzleti hatás. A fogyatékossággal élő látogatók valódi pénzt költenek. Az akadálymentes űrlap mindenkinél növeli a kitöltési arányt, mert a világos címkék minden felhasználónak segítenek, nem csak a fogyatékossággal élőknek. A reggel 6-kor mobilon átfutó elfoglalt felhasználóknak. A billentyűzettel navigáló haladó felhasználóknak. Mindenkinek.
SEO előny. A keresőmotorok előnyben részesítik azokat az oldalakat, ahol az interaktív elemek fel vannak címkézve és billentyűzettel bejárhatók. Az akadálymentes űrlapok jobban rangsorolnak.
Mire van valójában szüksége az akadálymentes űrlapoknak
Látható címkék minden mezőn
Minden beviteli mezőnek kell címke. Nem olyan helyőrző, amely eltűnik. Nem title attribútum. Valódi címke, amely ott ül az oldalon.
A képernyőolvasó először a címkét olvassa fel, aztán bemondja a mező típusát. „Név, szövegbevitel.” A felhasználó tudja, mit tegyen. Címke nélkül csak annyit kapsz: „szövegbevitel”, és semmi többet. A felhasználónak fogalma sincs, mit írjon be.
A látó felhasználóknál a címkék úgy működnek, ahogy papíron. Megmondják, mi kerül az egyes üres helyekre. Kibővítik a kattintható területet is. Kösd a címkét a beviteli mezőhöz a for attribútummal, és a felhasználók akár a címkére, akár a mezőre kattinthatnak a fókuszáláshoz. Mobilon ez a nagyobb kattintási célpont számít.
Működjön csak billentyűzettel
Sokan soha nem érnek egérhez. Mozgáskorlátozottság, gyengénlátás, képernyőolvasók. Ezek a felhasználók teljesen billentyűzettel navigálnak. Ha az űrlapodhoz egér kell, nem akadálymentes.
Próbáld ki. Húzd ki az egeret. Menj végig az űrlapon csak a Tab billentyűvel, a nyílbillentyűkkel és az Enterrel. Minden mezőt el kell tudnod érni, minden opciót ki kell tudnod választani, és be kell tudnod küldeni anélkül, hogy a kezed elmozdulna.
A fókuszkeretnek minden lépésnél láthatónak kell lennie. Nincsenek láthatatlan fókuszállapotok. A felhasználóknak tudniuk kell, hol vannak az űrlapon. És a tabulátorsorrend számít. A mezőknek balról jobbra, fentről lefelé kell haladniuk, ahogy az űrlap olvasható. Ha az elrendezésed ugrál vagy elrejt mezőket, a tabulátorsorrend megtörik, és a billentyűzethasználók csapdába esnek.
Hibaüzenetek, amelyek ténylegesen bemondják magukat
Az űrlap tetején lévő piros szöveg semmit sem jelent a képernyőolvasót használónak. Beküldi, csendet hall, és újra próbálkozik. Aztán feladja.
Kösd a hibát ahhoz a konkrét mezőhöz, ahol történt. Amikor a képernyőolvasót használó rátabulál arra a mezőre, a hiba bemondásra kerül. És a hibaüzenet mondja meg, mit kell javítani, ne csak azt, hogy „Érvénytelen.” Az „Érvénytelen bevitel” helyett írd: „Az e-mail-címnek tartalmaznia kell egy @ jelet.”
Használj ARIA attribútumokat, például aria-describedby, hogy a hibaüzenetet a mezőhöz kapcsold. Amikor a fókusz a mezőre kerül, a képernyőolvasó automatikusan bemondja a hibát. Találgatás nélkül.
Tedd olvashatóvá a szöveget a gyengénlátóknak
A világosszürke címkék fehér háttéren láthatatlanok a gyengénlátó számára. A WCAG 2.1 AA a normál szövegnél 4,5:1 kontrasztarányt követel meg. Sötét szöveg világos háttéren, vagy világos szöveg sötét háttéren. A kontrasztnak egyértelműnek kell lennie.
A nagyobb szöveg (18 pont felett) használhat 3:1 kontrasztot. Minden másnak 4,5:1 kell. Egy kontrasztellenőrző eszköz 5 másodperc. Indulás előtt futtass át rajta minden címkét, gombot és hibaüzenetet.
Soha ne használd csak a színt a kötelező mezők jelzésére. A piros csillag semmit sem jelent a színtévesztőnek. Írd a mező mellé a „kötelező” szót. A képernyőolvasók bemondják. A látók látják. A szöveget mindenki érti.
Mezőnkénti útmutató az akadálymentes űrlapokhoz
Szövegmezők és szövegterületek
A név, az e-mail-cím és a telefonszám mind igényel egy címkét közvetlenül fölöttük vagy mellettük. Használd a <label> HTML-elemet egy for attribútummal, amely megegyezik a beviteli mező id-jével.
Ha a mező meghatározott formátumot vár, mondd meg. A „Formátum: 06-30-123-4567” mindenkinek segít, különösen azoknak, akik jobban dolgoznak kifejezett utasításokkal.
A szövegterületeknek úgy kell kinézniük, mintha hosszabb válaszokat fogadnának. Az egysoros, „Üzenet” feliratú doboz gyors válasznak látszik. Egy magasabb doboz azt jelzi: „adj többet”. A méret számít.
Legördülő listák és választógombok
Minden legördülő listának kell címke. A „Válassz egy lehetőséget” és az „Igen/Nem” kontextus nélkül haszontalan. A képernyőolvasót használónak fogalma sincs, milyen kérdést teszel fel. Tedd egyértelművé a legördülő lista címkéjét arról, milyen választásról van szó.
A választógombok egy fieldset elemben éljenek legend elemmel. A legend felteszi a kérdést. A lehetőségek megválaszolják. „Mi írja le legjobban a felhasználási esetedet?” olyan lehetőségekkel, mint „Webshop”, „Média”, „SaaS”. A képernyőolvasó bemondja a legendet, aztán az egyes lehetőségeket. A felhasználó érti, hogy egy csoportból választ, és mire való a csoport.
Jelölőnégyzetek
A jelölőnégyzet címkéjének természetesen kell olvasódnia. „Elfogadom a szolgáltatási feltételeket” legyen a címke, a jelölőnégyzet mellette. Ne meztelen jelölőnégyzet legyen szöveg nélkül, amelynél a felhasználóknak találgatniuk kell, mit csinál.
Ha van kiegészítő információ, például egy link a teljes feltételekhez, tedd közvetlenül a jelölőnégyzet mellé. Ne rejtsd el. A felhasználóknak tudniuk kell, mibe egyeznek bele, mielőtt bejelölik a négyzetet.
A jelölőnégyzet-csoportok úgy működnek, mint a választógomb-csoportok. Egy legend nevezi meg a csoportot, és minden lehetőség saját címkét kap.
Gombok
A gomb szövege mondja meg, mi történik. „Beküldés.” „Küldés.” Az „OK” a visszaigazolásokhoz jó. A „Mehet” nem. Nincsenek általános címkék.
Ha több gombod van, tedd őket megkülönböztethetővé. A „Mégse” és a „Beküldés” egyértelmű. Két gomb, amelyek mindketten „Tovább” feliratúak, nem az: a képernyőolvasót használó azt hallja, hogy „tovább gomb, tovább gomb”, és fogalma sincs, melyik melyik.
Hol vannak az űrlapok az oldaladon
Kapcsolati űrlapok felugró ablakokban. Hírlevél-feliratkozás a láblécekben. Adományozási űrlapok a küldetésoldalakon. Felmérési űrlapok a fizetésnél. Bármely űrlapnak, bárhol, akadálymentesnek kell lennie.
A felugró űrlapok fókuszcsapdát hoznak létre, ha nem kezeled. Amikor egy modális ablak megnyílik, a fókusz beugrik. Amikor bezárul, a fókusz visszaugrik arra a gombra, amely megnyitotta. Enélkül a billentyűzethasználók a háttéroldalon ragadnak tabulálva.
A hosszú oldalaknál, ahol az űrlapok lejjebb vannak, adj hozzá ugrólinket. A billentyűzethasználóknak nem kell 50 navigációs elemen átnyomniuk magukat, hogy elérjék az űrlapodat.
Gyakori hibák
Helyőrző szövegre hagyatkozás címkék helyett
Az „Add meg az e-mail-címed” helyőrző eltűnik, amint valaki gépelni kezd. Most a felhasználónak fogalma sincs, mire való a mező. A képernyőolvasók egyáltalán nem látják.
Használj valódi címkét. Ha formátumjavaslathoz akarsz helyőrzőt, rendben. De soha ne használd magának a címkének.
Csak színnel jelzett kötelező mezők
A piros csillag láthatatlan a színtévesztőknek. Az ikon láthatatlan a képernyőolvasóknak. Használd a „kötelező” szót szövegben. A szöveget mindenki érti.
A kézi tesztelés kihagyása
A papíron helyes HTML-szerkezet nem jelenti, hogy az űrlapod a valóságban is működik. A címkék lehet, hogy túl messze vannak a beviteli mezőktől. A fókuszkeretek lehet, hogy láthatatlanok. A hibaüzenetek lehet, hogy bemondják magukat, de nem viszik a fókuszt a mezőre.
Teszteld billentyűzettel. Teszteld képernyőolvasóval. Vannak ingyenes képernyőolvasók, és vannak iparági szabványnak számítók. Ha iOS-en tesztelsz, használd az eszköz beépített képernyőolvasóját. Az automatikus ellenőrzők a nyilvánvaló hibákat fogják meg. A valódi tesztelés megfogja a többit.
Időkorlátok hozzáadása
A remegő kezű felhasználó lassan gépel. A képernyőolvasót használónak időre van szüksége, hogy meghallgassa az összes címkét és utasítást. Az 5 perces korlát csapdába ejti azokat, akiknek 10 kell.
Ha tudod, vedd el az időkorlátokat. Ha muszáj, hagyd, hogy a felhasználók kétszer meghosszabbíthassák az időt, mielőtt a munkamenet lejár.
Hogyan építi a WEMASY az akadálymentes űrlapokat
A WEMASY űrlapjai az elejétől akadálymentesen készülnek, nem utólag. Minden sablon megfelelő címkéket tartalmaz. A fókuszt automatikusan kezeli. A hibákat bemondja a képernyőolvasóknak. A színkontraszt alapértelmezetten megfelel a WCAG 2.1 AA szabványnak.
Testre szabhatsz az akadálymentesség megtörése nélkül. Adj hozzá mezőket, változtass címkéket, rendezd át az elrendezést. Az alapul szolgáló szerkezet akadálymentes marad. A beépített ellenőrzés bemondja a hibákat a képernyőolvasóknak.
Tudj meg többet a teljes űrlapútmutatónkban, vagy nézd meg, mit tartalmaz az egyes WEMASY csomagok.