Jó megoldások – akadálymentes webes komponensek, Infoalap logóval

Eszköztár leírása

Bevezetés

Az eszköztár egy olyan tároló, amely vezérlőelemek, például gombok, menügombok vagy jelölőnégyzetek csoportosítására szolgál. Amikor több vezérlőelem vizuálisan csoportként jelenik meg, az eszköztár (toolbar) szerepkör arra használható, hogy a csoportosítás jelenlétét és célját közölje a képernyőolvasó-felhasználókkal. A vezérlőelemek eszköztárakba csoportosításával csökkenthető a Tab billentyű navigációhoz szükséges lenyomásának száma is.

Jelen fejezet célja olyan eszköztár komponens bemutatása, amely képernyőolvasó program és csak billentyűzet használata esetén is jól navigálható, az eszköztár elemei felolvastathatók és a beállítások elvégzése is lehetséges. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Toolbar eleme szolgált kiindulásként, annak módosított, magyar nyelvű és magyar formátumú változata szerepel a komponens gyakorlati példájában.

A példa áttekintése

Az itt szereplő példa egy szerkesztőmező eszköztárra, amely megvalósítja az Eszköztármintát, és bemutatja, hogy egy eszköztár hogyan csoportosíthat interaktív widgeteket egyetlen tabulálható elembe. A szemléltetés és az interoperabilitás céljából ez a példa sokféle widgetet tartalmaz, amelyek némelyike normál esetben nem szerepelne együtt ugyanazon az eszköztáron. Például ezen az eszköztáron jelölőnégyzet és váltógomb is megtalálható. Egy tipikus megvalósításban a fejlesztő vagy az egyiket, vagy a másikat használná, de egyszerre mindkettőt nem. Hasonlóképpen, a szerkesztőmező a tényleges megvalósítás szimulálására szolgál, és nem célja egy teljes értékű szövegszerkesztő megjelenítése.

Az eszköztárra lépéskor a fókusz visszatér arra a vezérlőelemre, amelyiken utoljára volt. A Balranyíl és a Jobbranyíl az eszköztár elemei között navigál. Ha a Kivágás, Másolás és Beillesztés gombok bármelyike nem érhető el, akkor is fókuszálhatóak maradnak, hogy a képernyőolvasó-felhasználók tudjanak a jelenlétükről.

Kerülje az olyan vezérlőelemek beillesztését, amelyek működtetéséhez az eszköztáron való navigációhoz szükséges nyílbillentyűket kell használni. Ha ez elkerülhetetlen, akkor csak egy ilyen vezérlőelemet vegyen fel, és ez legyen az eszköztár utolsó eleme. Például egy vízszintes eszköztáron egy szerkesztőmező szerepelhet utolsó elemként. Az eszköztárat csak akkor használja csoportosító elemként, ha a csoport 3 vagy több vezérlőelemből áll.

Billentyűzet-támogatás

Szerep, tulajdonság, állapot és tabindex attribútumok

A toolbar szerep az eszköztár vezérlőelemeit tartalmazó <div> elemet azonosítja eszköztárként.

Maga az eszköztár <div> nem fókuszálható, mert a fókusz kezelés az összetevőkön belül tabindex használatával történik.

A <div> elemen belül az aria-label="Szöveg formázása" Megadja az eszköztárnak a Szöveg formázása elérhető nevét.

A <div> elemben az aria-controls="textarea1" jelzi, hogy az eszköztáron végezhető műveletek a többsoros szövegmezőn hajtódnak végre.

A tabindex="-1" attribútum fókuszálhatóvá teszi az eszköztár elemeit, de nem lesznek részei az oldal tabsorrendjének. Ez az eszköztárban található összes eszköztárelemre vonatkozik, kivéve egyet, amely az oldal tabsorrendjében található.

A tabindex="0" attribútum az eszköztár elemét az oldal tabsorrendjének részévé teszi. Az eszköztárban mindig csak egy ilyen elem található meg. Az oldal betöltődése után az eszköztár első vezérlőeleme kerül a tabsorrendbe. Amikor az eszköztáron belül mozog a fókusz, akkor a legutóbb fókuszált elem kerül be az oldal tabsorrendjébe.


www.infoalap.hu