Használjon natív vezérlőelemeket, őrizze meg a logikus DOM-sorrendet, tartsa meg a jól látható fókuszt, és egy réteg megnyitásakor vagy bezárásakor helyezze át kiszámítható módon.
A billentyűzettel kezelhető weboldalra azoknak van szükségük, akik nem használnak egeret, képernyőolvasóval vagy hangvezérléssel dolgoznak, vagy egyszerűen a gyorsabb módot választották. Egy funkció nem attól akadálymentes, hogy az elemek a Tab billentyűvel elérhetők. A sorrendnek, a látható fókusznak és a dinamikus komponensek viselkedésének meg kell felelnie annak, amit a felhasználó lát és elvár.
A leggyakoribb problémák az egyedi gomboknál, az elemek CSS-sel történő áthelyezésénél, a modális ablakoknál és az olyan szkripteknél jelentkeznek, amelyek eltávolítják vagy csapdába ejtik a fókuszt. A megoldás az, hogy natív HTML-lel kezdünk, minden komponenshez meghatározzuk a billentyűzetes modellt, és a teljes feladatot teszteljük. Az ARIA kiegészítheti a jelentést, de a hiányzó viselkedést nem hozza létre.
A natív elem az elvárt viselkedést biztosítja kerülőutak nélkül
A linket navigációra, a gombot műveletre használja. Mindkét elem fókuszálható, rendelkezik szereppel, és reagál a várt billentyűkre. Egy kattintható div nem rendelkezik ezekkel a tulajdonságokkal, és a tabindex kézi hozzáadása sem oldja meg a teljes viselkedést. Egy egyedi komponensnek névre, szerepre, állapotra, értékre és billentyűzetkezelésre van szüksége a megfelelő minta szerint.
Ne adjon meg pozitív tabindex értékeket, amelyek külön, mesterséges sorrendet hoznak létre. A szokásos elemek kövessék a DOM-ot, a programozottan fókuszálható konténer pedig szükség szerint negatív értéket használhat. A letiltott és az ideiglenesen nem elérhető elemnek érthető magyarázatra van szüksége, nem csupán arra, hogy kontextus nélkül kikerüljön a sorrendből.
A fókusz sorrendjének a jelentést és a vizuális folyamatot kell követnie
Rendezze a DOM-ot a természetes olvasási és kezelési sorrend szerint. A grid vagy flex segítségével végzett vizuális áthelyezés nem hozhat létre olyan ellentmondást, amelyben a fókusz össze-vissza ugrál a képernyőn. Az ismétlődő blokkokhoz tartozhat egy átugró hivatkozás a fő tartalomra. Aktiválása után a célnak megfelelően megjelöltnek kell lennie, a fókusznak vagy a pozíciónak pedig érthetően kell megváltoznia.
A rejtett menü, az inaktív karusszelpanel és a bezárt párbeszédablak nem tartalmazhat elemeket a tabulálási sorrendben. Ezzel szemben egy vizuálisan elérhető vezérlő nem lehet elérhetetlen. Tartalom hozzáadásakor őrizze meg a felhasználó pozícióját, hacsak a feladat nem kívánja meg az új üzenetre vagy a lépés elejére való áthelyezést.
- A DOM-sorrend megfelel az oldal olvasási sorrendjének
- nincsenek pozitív tabindex-értékek
- a rejtett elemek nem fókuszálhatók
- az átugró hivatkozás vizuálisan is működik
A látható fókusznak minden állapotban és témában egyértelműnek kell lennie
Ne távolítsa el az alapértelmezett outline-t egyenértékű vagy jobb helyettesítés nélkül. A jelzőnek világos, sötét és színes háttéren is láthatónak kell lennie, és a sticky fejléc nem takarhatja el. A szín önmagában kudarcot vallhat; kombinálja a kontrasztot, a körvonalat, a vastagságot vagy az eltartást az aktuális akadálymentességi kritériumok szerint.
Különböztesse meg a focus, hover, active, selected és error állapotokat. A billentyűzetet használónak tudnia kell, melyik elemet vezérli éppen, nem csak azt, hogy melyik van kiválasztva. A stílust tesztelje a dizájnrendszer összes komponensén, beleértve a szövegben lévő hivatkozásokat, az ikongombokat, az űrlapokat, a fülöket és a fedőrétegben lévő elemeket.
A modális ablakok és a dinamikus változások irányított fókuszáthelyezést igényelnek
Modális párbeszédablak megnyitása után a feladattól függően helyezze a fókuszt a címére, a bevezetőjére vagy az első megfelelő vezérlőelemre. A fókusznak a párbeszédablakon belül kell maradnia, amíg a modalitás aktív, és az Escape billentyűnek be kell zárnia, hacsak nincs komoly ok másképp eljárni. A háttér nem lehet kezelhető, és nem jelenhet meg a párbeszédablak részeként.
Bezárás után adja vissza a fókuszt annak az elemnek, amely a dialógust megnyitotta, vagy egy logikus helyettesítőnek, ha azt eltávolították. Kliensoldali routingnál jelentse be az új címsort, és a fókuszt egységes modell szerint helyezze el. Egy toast vagy élő üzenet ne vegye el ok nélkül a fókuszt; elég, ha megfelelően bejelentik.
- megnyitás után érthető helyre kerülő fókusz
- nincs kiszivárgás az inaktív háttérbe
- Escape billentyű és látható bezárás gomb
- visszatérés az eredeti vagy a logikus elemre
- a sorrend ellenőrzése előre és visszafelé is
- ne kerüljön fókusz a rögzített fejléc alá
- natív billentyűk a komponens típusa szerint
- regressziós teszt a DOM dinamikus változása után
A manuális teszt a teljes feladatot mindkét irányban végigjárja
Tegye félre az egeret, és a Tab, Shift+Tab, Enter, Space, a nyílbillentyűk és az Escape segítségével járja végig a navigációt, az űrlapot, a párbeszédablakot, a karusszelt és az egyedi widgeteket. A helyes billentyűk a komponens típusától függenek. Ellenőrizze, hogy minden elemet elér-e, érti-e az állapotát, aktiválni tudja-e, és biztonságosan el tudja-e hagyni.
Test zopakujte nagyítással, képernyőolvasóval és több böngészőben is. Egy automatikus eszköz megtalálhatja a hiányzó nevet vagy a pozitív tabindexet, de nem fedi fel a logikátlan fókuszmozgást és a fókuszcsapdát egy összetett feladatban. A regressziós tesztet vegye fel a dizájnrendszerbe és a kritikus felhasználói utakba is.
Gyakori kérdések
Eltávolíthatjuk-e az outline-t, ha dizájn szempontjából nem illik?
Csak akkor, ha egyértelmű, következetes és kellően látható fókuszjelzővel helyettesíti minden témában és állapotban. Helyettesítés nélkül ne távolítsa el.
Minden szöveges elem legyen fókuszálható?
Nem. A tabulátorsorrendbe az interaktív elemek és a konkrét programozott célpontok tartoznak. A normál szöveget a képernyőolvasó tabindex nélkül is elérhetővé teszi.
Elég role-t és tabindexet adni egy kattintható divhez?
Nem. Ki kellene egészítenie a billentyűkezeléssel, az állapotokkal és további viselkedéssel is. A natív gomb vagy link általában megbízhatóbb alap.
Források és további olvasnivaló
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
