Akadálymentes űrlapok: címkék, hibaüzenetek, pénztár

Röviden

• Az űrlapon múlik a rendelés, a regisztráció és az ajánlatkérés. Ha nem derül ki, mit kell egy mezőbe írni, vagy mi a baj egy hibával, a látogató feladja.
• A WebAIM 2026-os, egymillió főoldalt vizsgáló felmérése szerint a főoldalak 51%-án volt címke nélküli űrlapmező, és a vizsgált mezők harmadának (33,1%) nem volt megfelelő címkéje.
• A legfontosabb szabályok: minden mezőnek legyen látható, hozzá kötött címkéje, a kötelező mezőket szöveg jelölje, a hibaüzenet mondja meg, mi a baj és hogyan javítható, és a böngésző automatikusan kitölthesse az adatokat.
• Az automatikus vizsgálat megtalálja a címke nélküli mezőt és a név nélküli gombot, de azt nem, hogy érthető-e a hibaüzenet. Ahhoz ki kell próbálni az űrlapot.

Címkék

• Minden mező fölött vagy mellett legyen látható címke („E-mail-cím”, „Irányítószám”), és a címke legyen a mezőhöz kötve (a label elem for attribútumával). Így a képernyőolvasó felolvassa, és a címkére kattintva is a mezőbe kerül a kurzor, ami a kis jelölőnégyzeteknél különösen hasznos.
• A helykitöltő szöveg (a mezőben halványan látszó „pl. nev@pelda.hu”) nem címke: gépelés közben eltűnik, általában túl halvány, és nem minden képernyőolvasó olvassa fel megbízhatóan.
• A formátumra vonatkozó segítség („Például 06 30 123 4567”) a címke alatt, látható szövegként legyen, a mezőhöz kötve (aria-describedby).
• Ha egy mezőnek nem jut hely látható címkére (például a fejléc keresőjénél), legalább rejtett címke vagy aria-label legyen rajta, a gombnak pedig felolvasható neve („Keresés”).
• A látható felirat és a felolvasott név egyezzen. Ha a gombon „Megrendelem” áll, ne „submit” legyen a neve: aki hangvezérléssel böngészik, azt mondja ki, amit lát (WCAG 2.5.3).

Összetartozó mezők

• A szállítási és a fizetési mód választógombjai egy csoportban legyenek, csoportcímmel („Szállítási mód”). HTML-ben ez a fieldset és a legend elem; így a képernyőolvasó minden választógombnál megmondja, melyik kérdéshez tartozik.
• Ugyanígy csoportosítsa a születési dátum három mezőjét, illetve a számlázási és a szállítási címet.
• Az ÁSZF és az adatkezelési tájékoztató elfogadására szolgáló jelölőnégyzet címkéje mondja ki, mit fogad el a vásárló, és a benne lévő link billentyűzettel külön is elérhető legyen.

Magyar adatok: név, cím, telefonszám, adószám

• Név: ha két mezőt használ, a címke legyen „Vezetéknév” és „Keresztnév”, ne „Név 1” és „Név 2”. Az automatikus kitöltéshez a vezetéknév mezője a family-name, a keresztnév mezője a given-name autocomplete értéket kapja, így a magyar névsorrend sem okoz gondot.
• Irányítószám: négy számjegy. Ha az irányítószámból automatikusan kitölti a települést, az jó segítség, de a település maradjon átírható, és a változást a képernyőolvasó is jelezze.
• Telefonszám: fogadjon el többféle írásmódot (+36 30 123 4567, 06301234567, szóközzel vagy kötőjellel), ne a vásárlót kényszerítse egy formára. Ha mégis kötött a formátum, a példát írja ki előre.
• Adószám céges vásárlásnál: a magyar adószám formája 12345678-1-23. Fogadja el kötőjellel és anélkül is. A közösségi adószám HU-val kezdődik (HU12345678).
• Automatikus kitöltés: a név, az e-mail-cím, a telefonszám, a cím, az irányítószám, a település és a cégnév mezője kapja meg a megfelelő autocomplete értéket (name, email, tel, street-address, postal-code, address-level2, organization). Így a böngésző kitölti őket, ami a mozgáskorlátozott és a kognitív nehézséggel élő vásárlóknak sok gépelést spórol meg (WCAG 1.3.5).

Kötelező mezők

• Jelölje szöveggel: „(kötelező)” a címkében, vagy ha csillagot használ, az űrlap tetején írja ki, mit jelent: „A csillaggal jelölt mezők kitöltése kötelező.”
• A mező kapja meg a required attribútumot is, így a képernyőolvasó is kimondja, hogy kötelező.
• Ha a mezők többsége kötelező, egyszerűbb a néhány nem kötelezőt jelölni: „Cégnév (nem kötelező)”.
• A kötelezőséget ne csak a piros szín jelezze (WCAG 1.4.1).

Hibaüzenetek

Néhány rossz és jó példa:

• Rossz: „Hibás adat!” az űrlap tetején, vagy csak egy piros keret a mezőn.
• Jó: „Az irányítószám 4 számjegyből áll, például 1051.”
• Rossz: „Érvénytelen e-mail.”
• Jó: „Az e-mail-címből hiányzik a @ jel. Például: nev@pelda.hu.”
• Rossz: „Hiba történt.”
• Jó: „Válasszon szállítási módot.”

A jó hibakezelés:

• A hiba szövegként, a mező mellett jelenik meg, és a mezőhöz van kötve (aria-describedby, aria-invalid), így a képernyőolvasó a mezőre lépve felolvassa (WCAG 3.3.1).
• A hibaüzenet megmondja, hogyan javítható a hiba (WCAG 3.3.3).
• Ha elküldéskor több hiba is van, az űrlap tetején jelenjen meg egy összesítő a hibák listájával. Minden hiba linkként vigyen a saját mezőjére, és a fókusz kerüljön az összesítőre. Így a képernyőolvasót és a nagyítást használó vásárló is azonnal tudja, hogy hiba történt.
• Hiba után a már beírt adatok maradjanak meg. A jelszón kívül semmit ne kelljen újra beírni.
• Ne jelezzen hibát gépelés közben, már az első karakternél: elég a mező elhagyásakor vagy elküldéskor.
• A piros szín mellett legyen ikon vagy szöveg is, mert a színtévesztő vásárló a pirosat nem mindig különbözteti meg.

Visszajelzések

• Ha valami az oldal újratöltése nélkül változik (érvényes a kupon, a termék a kosárba került, módosult a szállítási díj), azt a képernyőolvasó is mondja ki, például: „A kupont érvényesítettük, az új végösszeg 12 990 Ft.” Ezt a fejlesztő role="status" vagy aria-live területtel oldja meg (WCAG 4.1.3).
• Sikeres beküldés után jelenjen meg egyértelmű visszaigazolás címsorral, ne csak egy pár másodpercig látható zöld sáv.

Ne kérjen fölöslegesen

• Ne kelljen kétszer beírni ugyanazt: a szállítási cím legyen átvehető számlázási címként egy jelölőnégyzettel (WCAG 3.3.7).
• A rendelés leadása előtt legyen összesítő, ahol a vásárló ellenőrizheti és javíthatja az adatokat (WCAG 3.3.4).
• Ha az űrlapnak vagy a kosárnak időkorlátja van, előtte figyelmeztessen, és lehessen meghosszabbítani (WCAG 2.2.1).
• Belépésnél a jelszót lehessen beilleszteni és jelszókezelővel kitölteni, és ne kérjen fejtörőt vagy képfelismerést alternatíva nélkül (WCAG 3.3.8). Az e-mailben küldött belépési link vagy kód is jó megoldás.
• A mezők kerete a háttérhez képest legalább 3:1 kontrasztú legyen, hogy látsszon, hol van a mező (WCAG 1.4.11). Mérés: színkontraszt.

Hogyan ellenőrizze

• Automatikus vizsgálat: megtalálja a címke nélküli mezőket, a hibás autocomplete értékeket és a név nélküli gombokat.
• Billentyűzet: töltse ki a pénztárt egér nélkül. Elér-e minden mezőt, választógombot és a csomagpont-választót? Lépésenként: billentyűzetes önteszt.
• Hibák: küldje el az űrlapot üresen, majd egy hibával (például @ nélküli e-mail-címmel). Megjelenik-e szövegként a hiba a mező mellett, és kiderül-e belőle, mit kell javítani?
• Képernyőolvasó: kapcsolja be (Windowson az ingyenes NVDA, Macen a beépített VoiceOver), és lépkedjen végig a mezőkön. Felolvassa-e a címkét, azt, hogy a mező kötelező, és a hibaüzenetet?

Fiókkal az EqualVia irányított kézi ellenőrzései között az űrlapok hibakezelése és az ismételt adatbekérés is szerepel, az eredményt dátummal rögzítheti.

További lépések: akadálymentes webshop ellenőrzőlista, akadálymentességi audit és kézi ellenőrzés.

Ez az útmutató technikai segítség, nem jogi tanácsadás.