A listamező widget lehetőségek listáját jeleníti meg, és lehetővé teszi a felhasználó számára, hogy ezek közül egyet vagy többet kiválasszon. Az egyetlen lehetőség kiválasztását biztosító listamezőt egyválasztós listamezőnek, Az egyszerre több lehetőség kiválasztását lehetővé tevő változatát pedig többválasztós vagy kiterjesztett listamezőnek nevezik.
A képernyőolvasó programok a listamezőkkel való találkozás vagy az azokkal kapcsolatos felhasználói interakció során közölhetik az egyes listaelemek nevét, állapotát és a listában elfoglalt pozícióját. A listaelem neve egy sztring, amelyet a böngésző számít ki, jellemzően a listaelemnek megfelelő HTML elem tartalmából. Mivel az elem neve egy közönséges sztring, ezért szemantikai információkat nem tartalmaz. Ebből adódóan ha egy listaelem szemantikai elemet, például címsort tartalmaz, a képernyőolvasó-felhasználók az ilyen szemantikai információkhoz nem férnek hozzá. Továbbá a listbox szerepkör által a kisegítő technológiák számára biztosított interakciós modell nem támogatja a listamező elemein belüli HTML elemekkel való interakciót. A listamező widget ezen tulajdonságai miatt nem biztosít akadálymentes módot az interaktív elemek, például hivatkozások, gombok vagy jelölőnégyzetek listájának megjelenítésére. A grid (rács)-minta példái között azonban bemutatásra kerül az interaktív elemek listájának megvalósítása is.
Érdemes kerülni a nagyon hosszú menüelemnevek alkalmazását, mert ettől a képernyőolvasó programot használók számára érthetőbbé és könnyebben felfoghatóvá válik az egyes menüelemek szövege. A menüelem felolvastatásakor az elem teljes neve egyetlen szövegegységként kerül bemondásra. Ha túl sok információ hangzik el egyetlen billentyű lenyomására, ennek megértése nehézséget jelenthet. Gyakran előfordul, hogy a felhasználó kénytelen megszakítani a képernyőolvasó program beszédét. A hosszú listaelemnevek esetén ez különösen hátrányosan hat az információ megértésére, mert ilyenkor általában a teljes elemnevet újra fel kell olvastatni. Valamint ha a felhasználó nem ért valamit a felolvasásból, akkor megpróbálhatja az elemet karakterenként, szavanként vagy mondatonként felolvastatni, de ez sok képernyőolvasó-felhasználó számára nehezen elvégezhető műveletnek bizonyulhat egy listamező belsejében.
Ha egy listamezőben vagy annak egy részén minden elemnév ugyanazzal a szóval vagy kifejezéssel kezdődik, az szintén jelentősen ronthatja a használhatóságot a billentyűzet- és képernyőolvasó-felhasználók számára. Egy adott elem megtalálása a listamezőben való léptetésekkel rendkívül időigényessé válik egy képernyőolvasó-felhasználó számára, hiszen minduntalan újra és újra meg kell hallgatnia az adott szót vagy kifejezést, mielőtt meghallja, mi az egyedi az egyes listaelemekben. Például ha egy város kiválasztására szolgáló listamező olyan listaelemeket tartalmaz, amelyekben minden városnév előtt egy országnév szerepel, és az egyes országokhoz sok város van felsorolva, akkor a képernyőolvasó-felhasználónak mindig újra meg kell hallgatnia az ország nevét, mielőtt meghallja az egyes városneveket. Ilyen esetben érdemesebb két listamezőt biztosítani: az egyiket az országoknak, a másikat pedig a városoknak.
Jelen fejezet célja olyan, egyszerre egy elem kiválasztását lehetővé tevő listamező-komponens bemutatása, amely képernyőolvasó program és csak billentyűzet használata esetén is jól navigálható, a listamező elemei felolvastathatók, kiválaszthatók és a kapcsolódó műveletek elvégzése a műveletgombok aktiválásával vagy a hozzájuk társított billentyűkombinációk lenyomásával is lehetséges. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Listamező átrendezhető elemekkel című példái közül az 1. példa 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.
Megjegyzés: A listamezőkomponens-példák közül egy kerül bemutatásra. További listamezőkomponens-mintákat talál, ha a bemutatandó példa oldalon a letöltés lehetőséget választja. A következő példák tölthetők le:
Az itt szereplő példában a listamező-minta megvalósítása egy egyválasztós listamezőn kerül bemutatásra. Az első listamező a lakhely választáshoz tartalmaz fontos jellemzőket. Ezek a jellemzők fontosság szerint sorbarendezhetők a műveletgombok vagy a billentyűparancsok segítségével. A nem fontos jellemzők törölhetők, amelyek ekkor átkerülnek a második listába, amely a nem fontos jellemzőket tartalmazza. A Tab vagy az Enter billentyűvel lehet a listamezőkbe belépni. A listamezőben először ki kell választani egy listaelemet, ezt követően aktiválható valamelyik műveletgomb.
A műveletgombok kényelmes aktiválásához billentyűkombinációk állnak rendelkezésre.
A következő billentyűkombinációk vannak az egyes műveletgombokhoz rendelve:
A billentyűkombinációk elérhetőségéről a kisegítő technológiák a button elemekben szereplő aria-keyshortcuts attribútum révén értesülnek.
Az egyes billentyűkombinációk csak akkor hajtódnak végre, ha a fókusz az ehhez megfelelő környezetben van. Például a Delete billentyű lenyomására a kiválasztott listaelem csak akkor kerül áthelyezésre a Nem fontos jellemzők
listájába, ha a fókusz a fontos jellemzők
listáján van. Az Enter billentyű lenyomására pedig csak akkor kerül áthelyezésre a kiválasztott listaelem a Fontos jellemzők
listájába, ha a fókusz a Nem fontos jellemzők
listáján van.
A billentyűkombinációk használatakor a fókusz kifejezetten a képernyőolvasó és a billentyűzet optimális használhatóságának figyelembevételével kerül áthelyezésre. Például a Fontos jellemzők
listában az Alt + Shift + Felfelényíl lenyomásakor a fókusz a listában feljebb mozgatott elemen marad, ezzel lehetővé téve a csak billentyűzetet használók számára, hogy további műveleteket hajtsanak végre ugyanazon a listaelemen, a képernyőolvasó-felhasználók pedig hallhatják az elem új pozícióját a listában. Ehhez hasonlóan a Fontos jellemzők
listában a Delete lenyomása után is ezen a listán marad a fókusz. Mivel az az elem, amelyen a Delete lenyomása előtt a fókusz volt, már nincs a listában, ezért a fókusz a lista következő, még elérhető elemére kerül.
Mivel a Fontos jellemzők
listához három műveletgomb tartozik, ezek egy eszköztárkomponensre kerültek, így az oldal tabsorrendjében is csak egy közös helyet foglalnak el.
Az elvégzett műveletekről a felhasználó élő régiókban kap megerősítő visszajelzést.
Mivel a listamezőnek ez a megvalósítása lehetővé teszi a görgetést és az aria-activedescendant használatával kezeli azt, hogy melyik listaelem kerüljön fókuszba, ezért JavaScriptben gondoskodni kell arról, hogy a fókuszba kerülő listaelem látható legyen. Ha tehát egy billentyűzet- vagy mutatóesemény hatására megváltozik a aria-activedescendant attribútum által hivatkozott listaelem, és a hivatkozott listaelem nem teljesen látható, akkor JavaScriptben úgy görgetjük a listamezőt, hogy a fókuszált listaelem teljesen láthatóvá váljon.
A listamező használata közben a fókusz és a rámutatás jobban érzékelhető stílust kap a CSS :hover és a :focus pszeudoosztályok használatával:
Ebben a listamezőpéldában a következő billentyűzetkezelés van megvalósítva:
Megjegyzés: Amikor a listamezőnek ebben a megvalósításában a látható fókusz egy listaelemen van, a DOM fókusza a listbox elemen marad, és az ebben az elemben lévő aria-activedescendant attribútum értéke a vizuálisan fókuszáltként jelzett listaelem-leszármazottra mutat. Alább a billentyűparancsok leírásában a fókusz említésekor rendre a vizuális fókuszjelölésről van szó, nem pedig a DOM fókuszról.
A listbox szerep listamezőként azonosítja a listamező viselkedéssel rendelkező és a listaelemeket tartalmazó, fókuszálható <ul> elemet.
Az aria-labelledby="ID_REFERENCIA" attribútum a listamező szerepű <ul> elem akadálymentes nevét tartalmazó címkére hivatkozik, amely egy <span> elem.
A tabindex="0" attribútumot a listbox szerepű <ul> elemre alkalmazva a listamezőt behelyezi az oldal tabsorrendjébe.
Az aria-activedescendant="ID_REFERENCIA" attribútum az <ul> elemen belül a vizuális billentyűzetfókusszal rendelkező listaelemre mutat, amennyiben van ilyen elem.
A kisegítő technológiák ennek révén értesülhetnek arról, hogy az alkalmazás melyik listaelemet tekinti fókuszáltnak, miközben a DOM fókusz a listbox elemen marad.
A navigációs billentyűk, például a lefelényíl lenyomásakor JavaScript gondoskodik az attribútum értékének megváltoztatásáról.
Amikor üres a listamező, akkor az aria-activedescendant="".
Az option szerep azonosít minden kiválasztható <li> elemet, amely egy opció nevét tartalmazza.
Az option szereppel rendelkező <li> elemekben az aria-selected="true" attribútum
tájékoztatja a kisegítő technológiákat a vizuálisan kiválasztott opcióról.
A bemutatott példában ez mindig megegyezik azzal a listaelemmel, amire az aria-activedescendant hivatkozik, hiszen egy egyválasztós listamezőről van szó, amelyben a kijelölés mindig követi a fókuszt.
Megjegyzés: Az aria-selected="false" attribútumra az egyválasztós listamezők egyik listaelemében sincs szükség!
A <span> elemen belül az aria-hidden="true" eltávolítja a jelölő pipát, a balra mutató nyilat és a jobbra mutató nyilat ábrázoló karakterentitásokat az akadálymentességi fából, hogy azok ne kerüljenek be a menüelemek és a gombok akadálymentes nevébe.