Denne artikkelen dukket opp første gang i nummer 229 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
Inntil HTML5-støtte i nettlesere og hjelpeteknologier (ATs) når kritisk masse, er det en god sjanse for at brukergrensesnitt-widgets fortsatt må opprettes med byggesteinene i HTML4.
En glidebryter er et eksempel. Det er en kontroll som gjør det mulig å velge en verdi fra et forhåndsdefinert område. Bruk inkluderer innstilling av volumnivå eller vurdering av et produkt.
HTML5 gjør det enkelt å lage en glidebryter ved hjelp av inngang> element, med type = "rekkevidde".
inngangstype = "rekkevidde" min = "- 10" max = "10" trinn = "2" verdi = "0">
Dette skaper en kontroll som kan brukes til å sette elementets verdi. De min og maks attributter definerer nedre og øvre grenser for området, og trinnattributtet beskriver trinnene som kan velges mellom de to. Med litt CSS og litt JavaScript er det alt å lage en glidebryter i HTML5.
Her er fangsten. Nettleserstøtte for input type = "range"> er sketchy, og AT-støtte er helt fraværende.
I skrivende stund har verken Firefox eller IE implementert støtte for input type = "range"> (på Windows eller Mac OS). Opera har gjort det for begge plattformene, men gjør det ikke tilgjengelig gjennom tilgjengelighets-API-ene. Bare Chrome (på Windows) og Safari (på Mac OS) har implementert støtte for input type = "track"> og gjort informasjonen tilgjengelig for AT-er gjennom deres API-er for tilgjengelighet.
Dette betyr at det fremdeles er tider når en DIY-glidebryter kan bli bedt om. En metode er å bruke en lenke for å lage den fokuserbare markøren som beveger seg opp og ned på glidebryteren. Koblingsteksten representerer den valgte verdien.
div id = "rail"> a href = "#" id = "marker"> span> 0 / span> / a> / div>
Et bakgrunnsbilde kan brukes til å skape utseendet til en glideskinne, med JavaScript for å få interaksjonen til å fungere (for mus og tastatur).
Problemet er at AT-er ikke gjenkjenner dette som en enkelt widget; de ser en samling av separate HTML-elementer. Det er her ARIA kommer inn.
a href = "#" id = "markør" role = "glidebryter" ariavaluemin = "- 10" aria-valuemax = "10" ariavaluenow = "0" aria-valuetext = "0"> span> 0 / span> / a >
ARIA bygger bro mellom HTML og funksjonalitet på en måte ATs kan forstå: role = "glidebryter" forteller AT å tolke elementet som en glidebryter, og aria-valuemin og aria-valuemax attributter angir nedre og øvre grenser for rekkevidden.
Glidebryterens valgte verdi er definert av aria-valuenow Egenskap. De aria-verdi-tekst attributt er valgfritt, og brukes til å definere en mer brukervennlig versjon av glidebryterens nåværende verdi. For eksempel, hvis formålet med glidebryteren var volumkontroll, aria-valuenow attributt kan være 5 og aria-valuetext 5%.
Når JS legges til for å skape interaksjon, er det en god ide å bygge inn ekstra tastaturtilgjengelighet: piltastene for å bevege seg i enkle trinn, Side opp og Side ned for å flytte i større trinn og Hjem og slutt for å flytte til øvre og nedre grense av glidebryteren.
Oppdag 101 CSS- og Javascript-opplæringsprogrammer på søstersiden vår, Creative Bloq.
