Akadálymentes űrlap HTML-ben: címkék, hibakapcsolatok és képernyőolvasós próba

Egyedi azonosító és látható label

A mező kapjon a dokumentumban egyedi id értéket, a hozzá tartozó label for attribútuma pedig erre mutasson. A kapcsolatot a tényleges DOM-ban is ellenőrizd, különösen ismétlődő blokkoknál vagy dinamikusan hozzáadott mezőnél. Az azonos felirat nem jelent automatikusan helyes programozott kapcsolatot. A látható címke segíti az adat ellenőrzését gépelés után, miközben a segítő technológia számára is nevet ad a vezérlőnek a megfelelő megvalósításban.

A placeholder kiegészítő példát adhat, de eltűnése miatt ne ez legyen az egyetlen címke. A címke szövege egyezzen a mező tényleges céljával. E-mail-adathoz megfelelő input típus és indokolt autocomplete érték segítheti a használatot, de a formátumellenőrzés nem helyettesít minden szerveroldali vizsgálatot. A látható és programozott név eltérését kerüld, mert különböző beviteli és segítő eszközök más támpont alapján próbálhatják azonosítani ugyanazt a mezőt.

Összetartozó vezérlők csoportosítása

A kapcsolódó rádiógombok és jelölőnégyzetek csoportjának közös kérdését fieldset és legend adhatja meg. Az egyes választások saját címkét kapnak, a legend pedig a csoport értelmét nevezi meg. Így a felhasználó nem csupán különálló igen és nem feliratot hall, hanem azt is tudja, melyik kérdésre válaszol. Azonos nevű címmezők esetén a csoport, például kapcsolati vagy számlázási adat, szintén megkülönböztető kontextust adhat.

A vizuális doboz vagy félkövér sor önmagában nem hozza létre a szemantikus kapcsolatot. A natív elemeket lehetőség szerint őrizd meg, a stílust köréjük építve. Ha összetett egyedi vezérlő szükséges, annak megfelelő szerepet, nevet, állapotot és billentyűműködést kell biztosítani az aktuális minták szerint. A csoport megnevezése legyen rövid és önmagában érthető, hogy ismételt felolvasáskor is használható kontextust adjon, ne hosszú magyarázatot ismételjen minden választásnál.

Segítség és hiba programozott kapcsolata

A mezőhöz tartozó formátumsegítség és hiba külön azonosítót kaphat, amelyre a vezérlő aria-describedby attribútuma hivatkozik. Több kapcsolt szöveg esetén a hivatkozások sorrendje és tartalma is átgondolandó. A mező neve és leírása eltérő szerep, ezért a hiba ne váltsa fel észrevétlenül a címkét. Az érvénytelen állapotot megfelelően jelezd, például indokolt aria-invalid használattal, a tényleges validációs eredményhez igazítva, nem minden üres mezőn előre.

A hibaüzenet konkrét javítási információt adjon. Szemléltető példa: az e-mail-mezőhöz kapcsolt szöveg elmondja, hogy teljes címet vár, és megőrzi a már beírt értéket. A piros keret kiegészítő jelzés, szöveges magyarázat nélkül nem elegendő. A felirat és attribútum változása együtt történjen, nehogy a látvány már javult állapotot mutasson, miközben a segítő technológia továbbra is hibásként érzékeli a vezérlőt. Ezt a dinamikus frissítést külön teszteld.

Hibaösszefoglaló és fókuszkezelés

Több hibás mezőnél összefoglaló lista segítheti a tájékozódást. A lista elemei az érintett vezérlőhöz vezethetnek, ha az átmenet megfelelően kezeli a fókuszt is. A puszta vizuális odagördülés nem feltétlenül elég. A hibaösszefoglaló programozott fókuszolhatóságát és címét tudatosan alakítsd ki, a használt megoldásnak megfelelően. Ne módosítsd váratlanul a fókuszt minden leütés után, mert az megakaszthatja a javítást és újabb tájékozódási terhet okozhat.

Az űrlap újbóli megjelenésekor a helyes mezők adata maradjon meg, a hiba pedig a megfelelő részhez kapcsolódjon. Az oldalcím vagy főcím segíthet a feldolgozás eredményének közlésében, főleg új lapbetöltéses megoldásnál. Dinamikus felület más visszajelzést kívánhat. A választott stratégiát billentyűzettel és képernyőolvasóval is ellenőrizd. A cél nem a lehető legtöbb jelzés egyidejű alkalmazása, hanem az eredmény egyértelmű érzékelése és a javítandó hely követhető elérése.

Billentyűzetes bejárás és natív működés

A tabulátoros sorrend kövesse a tartalom értelmi rendjét. A mező, jelölő, választó és beküldő gomb legyen elérhető, a fókusz jól látszódjon minden háttéren. A natív vezérlők megszokott működését ne írd felül fölöslegesen. A saját választó külön nyíl-, szóköz-, Enter- és szükség szerint Escape-kezelést igényelhet a komponens típusának megfelelően. A rádiócsoportot és lenyílót ne csak egérrel nyisd meg a tesztben.

Feltételes mező megjelenésekor a bejárás maradjon logikus, rejtett tartalom pedig ne legyen észrevétlen fókuszcél. A letiltott beküldéshez érthető ok kell, ne hagyja a látogatót magyarázat nélkül. A rögzített fejléc és alsó sáv ne takarja el az aktuális mezőt, különösen nagyított nézetben. A billentyűzetes próba a teljes feladatig tartson: hibás adat megadása, hiba megtalálása, javítás és sikeres beküldés egyaránt szerepeljen benne a végső ellenőrzésben.

Feldolgozás és eredmény bejelentése

A feldolgozás közbeni állapot és végső eredmény külön információ. A vizuális töltésjelző mellé szükség szerint hozzáférhető állapotközlés kell. A dinamikus üzenethez megfelelő élő régió vagy más támogatott technika használható, de ne olvasson fel folyamatosan fölösleges változásokat. A prioritást a közlés sürgősségéhez igazítsd. A sikeres beküldés és szerverhiba egyaránt legyen felismerhető, a fókusz pedig ne kerüljön eltűnt vagy üres vezérlőre.

A hálózati hiba nem feltétlenül jelenti, hogy a szerver semmit sem kapott, ezért az ismételt beküldés működését is meg kell tervezni. A technikai tesztben szakítsd meg a kapcsolatot és ellenőrizd, visszakapja-e a felhasználó a kezelhető űrlapot. A kézbesítés üzleti nyomon követése külön háttérfeladat, itt a felületi állapot érzékelhetőségét vizsgáljuk. A válasz szövege és programozott bejelentése ugyanazt az igazolt eredményt közölje a különböző használati módokban.

Képernyőolvasós tesztjegyzőkönyv

Rögzítsd a vizsgált böngészőt, segítő technológiát, verziót és feladatot. Hallgasd meg, megfelelő nevet, szerepet, kötelezőséget, csoportkontextust és leírást kap-e minden mező. Próbáld ki a hibás beküldést, az összefoglalóból vezérlőre jutást és a sikerjelzést. A tesztelő ne csak azt írja le, hogy az oldal felolvasható, hanem a konkrét elakadást vagy megfelelő viselkedést. Ebből lehet reprodukálható fejlesztői javítást készíteni és később ugyanazt újra ellenőrizni.

Egyetlen eszközpár és rövid billentyűzetes ellenőrzés nem teljes akadálymentességi audit. A támogatási kör, vizsgált kritérium és fennmaradó korlát szerepeljen az összefoglalóban. Automatizált eszköz segíthet egyes hibák felismerésében, de a feladat követhetőségét és visszajelzés érthetőségét kézi próbával is meg kell ítélni. A mezők üzleti indoklása és leadminőség kérdése kapcsolódó CRO-feladat; a hozzáférhető implementáció ennek helyesen megtervezett kérdéseit teszi ténylegesen használhatóvá.

Gyakori kérdések