Tilgængelig jQuery slider
I Børn & Unge Vidensportalens søgning bruger vi et javascript plugin til at fastsætte, hvilken aldersgruppe søgeresultatet skal relatere til. Desværre var vores første implementering af ikke tilgængeligt for brugere af skærmlæseren JAWS, og da vi så nærmere på koden, sprang der flere tilgængelighedsproblemer i øjnene.
Det satte vi os for at rette op på.
Problemet
Øverst på Vidensportalen er der mulighed for at søge og at afgrænse sin søgning. Under overskriften "Aldersgruppe 0-23 år" er der en såkaldt "slider", hvor du kan markere et aldersinterval for det indhold, du søger efter.
Slideren er en implementering af jQuery UI Slider plugin.
I den oprindelige implementering lod vi slide-event'et skrive den valgte værdi i skjulte (input type="hidden") formular-felter. Problemerne ved den løsning var flere:
- Skærmlæsere som JAWS læser ikke skjulte formular-felter.
- Løsningen virker ikke, hvis javascript er slået fra.
- Det fremgår ikke tydeligt, at du kan indstille intervallet ved hjælp af tastatur.
Vi stod altså med flere tilgængeligheds-problemer, som måtte løses.
Løsningen
Vi startede med at beskrive, hvordan problemerne ideelt set kunne løses. Desuden identificerede vi et par sideeffekter, som også skulle håndteres.
Ad. 1: De skjulte felter
- De skjulte felter måtte helt oplagt ændres til synlige tekstfelter (input type="text"). I stedet for at skjule dem i kraft af feltets type, måtte vi benytte CSS til formålet.
- Med denne løsning indgik felterne i sidens almindelige tabulerings-rækkefølge, og dermed kunne man indstille intervallet ved at indtaste værdier. Derfor måtte vi bruge felternes change-event til at indstille sliderens værdier - ellers ville de indtastede ændringer ikke fremgå grafisk.
- I forlængelse af dette indførte vi også en simpel validering: En indtastet værdi kan aldrig bevæge sig udenfor intervallet. Desuden må minimum aldrig overstige maksimum - eller omvendt.
- Endelig tilføjede vi labels til tekst-felterne, nu hvor felterne indgår i formularens almindelige flow.
Ad. 2: Javascript slået fra
- Hvis de nu synlige tekstfelter skulle være tilgængelige uden javascript, så kunne vi ikke så godt skjule dem direkte i CSS. Derfor valgte vi at skjule felterne ved hjælp af jQuerys addClass().
- Vi lavede desuden lidt basis-styling af felter og labels direkte i CSS.
- Slideren indeholder et baggrundsbillede. Det var vi nødt til at skjule direkte i CSS - og gøre synligt ved hjælp af jQuerys css().
Ad. 3: Hjælpetekster
- Sliderens to handles er i virkeligheden tomme A-tags, som enten kan trækkes med musen eller flyttes med piletasterne.
- For at synliggøre de tomme A-tags' funktion, tilføjede vi title-attributter med en hjælpetekst - inklusive en indikation af det valgte år.
Konklusion
Man kan lave rigtig lækre ting på et website med web 2.0-teknologier. Men det kan gøre ondt i tilgængeligheden, når én af ingredienserne i "det lækre" er javascript. I dette tilfælde lykkedes det at komme i mål med en fornuftig løsning, som virker både med og uden javascript, med mus og med tastatur samt i skærmlæsere.
Casper
