A léptethető szerkesztőmező olyan, bevitelt lehetővé tevő widget, mely konkrét értékek halmazából vagy tartományából teszi lehetővé egy érték megadását. Például egy ébresztés beállítására szolgáló widgeten a felhasználók egy léptethető szerkesztőmezővel kiválaszthatnak egy 0 és 59 közti számot az adott óra percének megadásához.
A léptethető szerkesztőmezőknek gyakran három komponensük van: egy szövegmezőjük, melyben az aktuális érték jelenik meg, egy értéknövelő gombjuk és egy értékcsökkentő gombjuk. Ezek közül általában csak a szövegmező kerül fókuszba, mivel a növelés és csökkentés funkció csak a billentyűzet használata esetén is elérhető a nyílbillentyűkkel. A szövegmező jellemzően az érték közvetlen szerkesztését is lehetővé teszi.
Nagy értéktartomány esetén a léptethető szerkesztőmező az érték kisebb és nagyobb lépésekben történő változtatását is támogathatja. Az ébresztéses példában a felhasználónak például lehetősége lehet a Felnyíl vagy a Lenyíl billentyű segítségével egy perccel, a Page Up vagy a Page Down billentyűvel pedig tíz perccel növelni vagy csökkenteni az értéket.
Jelen fejezet célja olyan megoldás bemutatása, amelyben a léptethető szerkesztőmezők akadálymentesen használhatók. A mezők értéke megadható csak a billentyűzet, vagy az egér használatával is, illetve a képernyőolvasó programok megfelelően olvassák az elemeket és azok értékeit. Ehhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Spinbutton 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 bemutatandó példában a léptethető szerkesztőmező van használva egy dátumkiválasztó megvalósításához. A példában három léptethető szerkesztőmező szerepel: egy a nap, egy a hónap és egy az év beállításához.
A három léptethető szerkesztőmező egy csoportba van foglalva, ami a kisegítő technológiát használók számára elősegíti annak megértését, hogy a három elem együtt képvisel egy dátumot. A csoport akadálymentes neve tartalmaz egy rejtett <div> elemet, melyben a három léptethető szerkesztőmező aktuális értékének megfelelő dátumsztring található. Ez a megoldás könnyen érzékelhetővé teszi a képernyőolvasó-felhasználók számára a három mező által megjelenített dátumot, anélkül, hogy egyenként rá kellene navigálniuk a léptethető szerkesztőmezőkre és meg kellene jegyezniük azok értékét. A képernyőolvasó programot használók számára ez a lehetőség egyenértékű azzal, amikor az ép látású felhasználók odapillantva meglátják a dátumot.
A nap léptethető szerkesztőmezőhöz használjuk az aria-valuetext attribútumot, így a nap a megfelelő módon kerül bemondásra.
A hónap léptethető szerkesztőmezőhöz is használjuk az aria-valuetext attribútumot, így a számérték helyett a hónap neve kerül bemondásra.
Amikor az egérmutató vagy képernyőérintés adott ideje a widget fölött tartózkodik (hover esemény), a felfelé mutató nyíl és a lefelé mutató nyíl képe némileg nagyobbá válik, ezáltal megnő a léptethető szerkesztőmező értékének növelésére vagy csökkentésére szolgáló aktív célterület.
Bármely léptethető szerkesztőmező fókuszba kerülésekor megnagyobbodik annak értéknövelő és értékcsökkentő gombja, ami megkönnyíti a billentyűzetfókusz érzékelését.
A spinbutton szerepkörű <div> elem nem tartalmazza az értéknövelő és értékcsökkentő gombokat, így ezekre külön rávihetik a fókuszt az érintőképernyőt használó képernyőolvasó-felhasználók. Viszont e két gomb kizárásra kerül az oldal tabsorrendjéből a tabindex="-1" megadásával, mivel a Tab billentyűvel való elérésüket feleslegessé teszi az, hogy a csak billentyűzetet használók a nyílbillentyűkkel növelhetik vagy csökkenthetik az értéket.
A léptethető szerkesztőmezők a bemutatandó példában a következő billentyűzet-támogatást biztosítják.
A group szerep a <div> elemet csoportként azonosítja. A csoport szerep nyilvánvalóvá teszi a kisegítő technológiát használók számára, hogy a három léptetőgomb együttesen szolgálja a dátumválasztás célját.
A group szereppel ellátott <div> elemen belül az aria-labelledby="myDatepickerLabel myDatepickerDate" két ID-t tartalmaz, amelyek a csoport számára az akadálymentes nevet biztosító <div> elemekre hivatkoznak.
Az egyik ID a Válasszon egy dátumot
szövegű látható címkére hivatkozik.
A másik ID egy rejtett <div> elemre hivatkozik, amely a három léptethető szerkesztőmező értéke szerinti aktuális dátumsztringet tartalmazza. Ezt a sztringet JavaScript aktualizálja, amikor a felhasználók megváltoztatják a léptethető szerkesztőmezők értékét.
A spinbutton szerep a <div> elemet léptethető szerkesztőmezőként azonosítja.
A <div> elemeken belül az aria-label="NÉV_SZTRING" az egyes léptethető szerkesztőmezők számára definiálja azok akadálymentes nevét (például: nap, hónap és év).
A <div> elemen belül az aria-valuenow="SZÁM" a léptethető szerkesztőmező aktuális számszerű értékét jelzi. Ezt JavaScript aktualizálja, amikor a felhasználók megváltoztatják a léptetőgomb értékét.
A <div> elemeken belül az aria-valuetext="NAP_SORSZÁMA_SZTRING" és az aria-valuetext="HÓNAP_SZTRING" a Nap és a Hónap léptethető szerkesztőmezőhöz a képernyőolvasó-felhasználók számára a hónap adott napjának sorszámát és a hónap nevét értelmesebb formában biztosítja.
A <div> elemen belül az aria-valuemin="SZÁM" a léptetőgomb számára megengedett legkisebb értéket jelzi.
A <div> elemen belül az aria-valuemax="SZÁM" a léptethető szerkesztőmező számára megengedett legnagyobb értéket jelzi. A Nap léptethető szerkesztőmezőhöz ez a tulajdonság a Hónap léptethető szerkesztőmező értéke alapján kerül aktualizálásra.
A next és previous osztállyal rendelkező <div> elemeken belül az aria-hidden="true" a kisegítő technológiát használók számára elrejti a következő ill. előző értéket jelző szöveget, amely a felfelé mutató nyíl, ill. a lefelé mutató nyíl ikonja mellett jelenik meg. Enélkül ezek felesleges, inkább zavaró, semmint hasznos elemekként szerepelnének a képernyőolvasó program által felolvasandók között.
A <button> elemeken belül az aria-label="NÉV_SZTRING" Az egyes értéknövelő és értékcsökkentő gombok számára definiálja azok akadálymentes nevét (Következő nap, Előző nap, Következő hónap, Előző hónap, Következő év, és Előző év).
A <button> elemeken belül a tabindex="-1" eltávolítja az értéknövelő és értékcsökkentő gombokat az oldal tabsorrendjéből, azonban a gombok ettől még fókuszálhatóak maradnak, így az érintésalapú kisegítő technológiák használatával is elérhetőek.