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 a termékelőállító rendszerekbe.
Jelen fejezet célja olyan csúszka megoldás bemutatása, amely csak 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 értékelésre használható csúszkát tartalmaz. A választógombok bemutatásánál is egy értékelésre használható megoldás található, de az kisebb értékekkel dolgozik a csúszka pedig egy nagyobb tartományt ölel fel. Ehhez a példához a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Rating 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 példában a csúszkamintát szemléltető, értékelést lehetővé tevő beviteli vezérlő kerül bemutatásra. Ez az értékelési widget azért használ csúszkát, mert tíz értékelési szint közül lehet választani, ami viszonylag sok választási lehetőség a felhasználók számára. Hét vagy kevesebb választási lehetőséget kínáló beviteli vezérlők esetén egy másik használható minta lehet a választógombcsoport, ami az Értékelési választógombcsoport példában kerül bemutatásra. Ha azonban hétnél több lehetőség van, más minták további billentyűparancsokat is biztosítanak, amelyek jelentősen megnövelik azoknak a felhasználóknak a hatékonyságát, akik csak a billentyűzetet használják navigációra, és ennek révén érzékelik és választják ki az opciókat. Ilyen minta például a csúszka, a léptethető szerkesztőmező, a kombinált szerkesztőmező és a listamező.
Annak érdekében, hogy a kisegítő technológiát használók helyesen értsék az aktuális érték jelentését, ez a példa az aria-valuetext tulajdonságot használja az aktuális érték, a maximális érték és a maximális érték (Rendkívül elégedett
) jelentésének közlésére. Mivel azonban a maximális érték megismétlése zavaró lehet a csúszka értékének minden egyes megváltozásakor, a maximális érték csak a csúszka inicializálásakor szerepel az aria-valuetext-ben, illetve akkor, amikor a fogantyú elveszti a billentyűzetfókuszt.
Az elégedettségi értékelés interaktív jellegének kiemelésére a fókuszkeret az értékelési lehetőségek csoportja körül jelenik meg, ha a csúszka fókuszban van, de még nincs elégedettségi érték beállítva.
Annak érdekében, hogy a választható értékek és a fókuszkeret szegélyeinek elegendő legyen a kontrasztaránya 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. Ehhez egy CSS eszközlekérdezés-választót (media query selector) használhatunk, (pl. @media (forced-colors: active)
). Az elégedettségi értékek keretének a színe például úgy van beállítva, hogy megegyezzen a hivatkozásszöveg nagy kontrasztos módban használt előtérszínével. Ezt úgy érjük el, hogy az oldal kódjába ágyazott ún. inline <svg> <rect> és text
elemében szerepeltetjük a stroke
CSS-tulajdonságot canvas
értékkel, illetve a fill
tulajdonságot linkText
értékkel. Ha ehelyett bizonyos konkrét színeket adnánk meg a stroke
és a fill
tulajdonságokhoz, ezeknek az elemeknek a színe nagy kontrasztú módban is változatlan maradna, ami elégtelen kontrasztarányhoz vezethet az előtérszínük és a háttérszínük 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.
A <div> elemben a slider szerep csúszkaként azonosítja az elemet. A mozgatható fogantyút képviselő <div> elemhez van beállítva, mert ez a csúszkának a felhasználó által működtethető eleme, amely a csúszka értékét szabályozza.
A <div> elemben a tabindex="0" behelyezi a csúszka fogantyúját az oldal tabsorrendjébe.
A <div> elemben az aria-valuemax="10" megadja a csúszka maximumértékét.
A <div> elemben az aria-valuemin="0" megadja a csúszka minimumértékét.
Megjegyzés: A 0 azt jelzi, hogy még nem lett beállítva elégedettségi érték.
A <div> elemben az aria-valuenow="SZÁM" a csúszka jelenlegi értékét jelzi.
A <div> elemben az aria-valuetext="STRING" az aktuális értékhez felhasználóbarát nevet tartalmazó sztringet ad.
Akkor tartalmazza az érték nevét, amikor az érték 0, 1 vagy 10.
A csúszka inicializálását, illetve a fókusz elvesztését követően a sztring az értékelési fokozatok számát és a maximumérték jelentését is tartalmazza, pl. 10-ből 7, ahol a 10 a rendkívül elégedett
.
A <div> elemben az aria-labelledby="id-rating-label" a csúszka nevét tartalmazó elemre hivatkozik.
Az <svg> elemben az aria-hidden="true" eltávolítja az <svg> elemeket, az akadálymentességi fából, ezzel megakadályozva, hogy a kisegítő technológiák a csúszkához nem tartozó, külön elemekként kezeljék őket.