A csúszka egy bevitelt biztosító vezérlő, amely lehetővé teszi, hogy a felhasználó egy megadott tartományból válasszon értéket. A csúszkák jellemzően rendelkeznek egy sávon vagy sínen csúsztatható, kis fogantyúval, amelynek a mozgatásával kiválasztható a csúszka értéke.
Figyelmeztetés
Az érintésalapú kisegítő technológiák egyes felhasználói nehézségeket tapasztalhatnak az olyan widgetek használatakor, amelyek ennek a csúszkamintának a megvalósításával készültek, mert előfordulhat, hogy azok a gesztusok, amelyeket az adott kisegítő technológia a csúszkák működtetésére biztosít, még nem generálják a szükséges kimenetet. A csúszka értékének megváltoztatását az érintésalapú kisegítő technológiáknak úgy kell végrehajtaniuk, hogy az értéknövelő, illetve értékcsökkentő felhasználói gesztusok hatására mesterséges billentyűeseményeket hoznak létre. Ez egy új konvenció, amelyet egyes kisegítő technológiák nem feltétlenül alkalmaznak teljes mértékben.
A fejlesztőknek teljes körűen tesztelniük kell azt, hogy a csúszka widgetek használhatóak-e a kisegítő technológiákkal olyan eszközökön, amelyeken a bevitel elsődlegesen érintések útján történik, mielőtt döntés születik arról, hogy ezek a widgetek bekerüljenek-e a fejlesztésekbe.
Jelen fejezet célja olyan csúszka megoldás bemutatása, amely csak a billentyűzet használatával is kezelhető, és a képernyőolvasó programok megfelelően olvassák, illetve a gyengénlátó emberek jobban látják az aktuális értéket. A bemutatandó példa egy függőleges hőszabályzó csúszkát tartalmaz. Ez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Vertical Temperature Slider 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 egy a csúszkamintát megvalósító, függőleges tájolású hőmérsékletszabályzó található.
A csúszka példa szemlélteti az aria-orientation használatát a függőleges tájolás megadására, valamint az aria-valuetext alkalmazását a számértékek mértékegységének a kisegítő technológiát használókkal való közlésére (az aktuális hőmérsékletértékhez hozzáfűzi a Celsius-fok
szöveget).
A csúszka aktuális értékének kijelzése a csúsztatható fogantyú mellett marad annak mozgatása közben, így (pl. nagyítás használata esetén) a kis látómezővel rendelkező felhasználók is könnyen leolvashatják az értéket a csúszka mozgatása közben, mialatt a fókusz a fogantyún van.
Annak érdekében, hogy a csúszkasáv, a fogantyú és a fókuszkeret szegélyeinek elegendő legyen a kontrasztja a háttérhez képest, amikor a nagy kontrasztú beállítások megfordítják a színeket, a szegélyek színe szinkronban van tartva a szövegtartalom színével. Például a fókuszkeret szegélyének színe úgy van beállítva, hogy megegyezzen a szöveg nagy kontrasztos módban használt előtérszínével. Ez úgy van megvalósítva, hogy a fókuszkeret szegélyének megrajzolásához használt, az oldal kódjába beágyazott, ún. inline <svg> <rect> elemében szerepeltetve van a stroke
CSS-tulajdonság, és ehhez a currentcolor
érték van megadva. Ahhoz, hogy a <rect> háttere megegyezzen a magas kontrasztú háttérszínnel, a <rect> elem fill-opacity
attribútuma nullára van állítva. Ha ehelyett bizonyos konkrét színek lennének megadva a stroke
és a fill
tulajdonságokhoz, ezek a színek nagy kontrasztú módban is változatlanok maradnának, ami elégtelen kontrasztarányhoz vezethet a csúszkasáv és a fogantyú között, vagy emiatt akár láthatatlanná is válhatnak, ha a színük megegyezik a nagy kontrasztú mód háttérszínével.
Megjegyzés: Az <svg> elem forced-color-adjust
CSS tulajdonságának auto
értékűre kell beállítva lennie ahhoz, hogy magas kontrasztú módban frissüljön a currentcolor
értéke. Egyes böngészők esetén nem az auto
az alapértelmezett érték.
Az <svg> elemen belül a none szerep gondoskodik arról, hogy a kisegítő technológiák ne jelenítsék meg az SVG-t képként vagy bármilyen más típusú értelmes elemként.
A <g> elemen belül a slider szerep csúszkaként azonosítja az elemet. A mozgatható fogantyút képviselő <g> elemhez van beállítva, mert ez a csúszka működtethető eleme, amely megkaphatja a fókuszt és amely közli az értéket.
A <g> elemen belül megtalálható tabindex="0" behelyezi a csúszka fogantyúját az oldal tabsorrendjébe.
A <g> elemben az aria-orientation jelzi, hogy a csúszka függőleges tájolású.
A <g> elemben az aria-valuemax="SZÁM" megadja a csúszka maximálisan megengedett értékének megfelelő számértéket.
A <g> elemben az aria-valuemin="SZÁM" megadja a csúszka minimálisan megengedett értékének megfelelő számértéket.
A <g> elemben az aria-valuenow="SZÁM" a csúszka jelenlegi értékének megfelelő számérték.
A <g> elemben az aria-valuetext="SZTRING" a csúszka jelenlegi értékének felhasználóbarátabb nevét biztosítja azáltal, hogy az aktuális értéket kiegészíti a mértékegységet jelző Celsius-fok
sztringgel.
A <g> elemben az aria-labelledby="id-temp-label" a csúszka nevét (pl. címkéjét) tartalmazó elemre hivatkozik.
A <rect> elemben az aria-hidden="true" eltávolítja az <svg> <rect> elemet az akadálymentességi fából, ezzel megakadályozva, hogy a képernyőolvasó programok jelentéssel bíró képként kezeljék.