Hvor tilgjengelig er Ajax? 4

Vi har fått inn følgende spørsmål til vår gratis rådgivningstjeneste:

Hvor tilgjengelig er Ajax? Hvor godt og i hvilken utstrekning kan funksjonshemmede benytte seg av teknologien?

Vårt svar:
Tilgjengelighet er en av de store utfordringene i Ajax. Dette er fordi innholdet lastes dynamisk inn til nettsiden. Mange skjermlesere vil derfor ha problemer med å tolke dette på en god måte. En skjermleser (en nettleser der inneholdet blir lest opp istedet for å bli vist visuelt) leser nemlig opp innholdet i rekkefølge. Dette er ofte problematisk med Ajax fordi skjermleseren kan ha problemer med å vite hvor den skal starte og når den må hoppe tilbake til der opplesningen var etter at informasjonen lastet med Ajax vises. Brukere som trenger høy tilgjengelighet pleier dessuten ofte å slå av Javascript.

La oss først starte med å definere ajax og tilgjengelighet.

Ajax: En javascript-basert teknologi for å laste inn biter av innhold underveis mens brukeren benytter en internettside. Ajax er en veldig enkel teknologi, men gjør stor forskjell siden man slipper å laste en ny side for å vise nytt innhold. Hvis brukeren for eksempel skriver inn feil data inn i et skjema, kan man gi umiddelbar feilmelding istedet for å laste en ny side.

Tilgjengelighet (accessibility): De fleste som tenker på tilgjengelighet tenker nok først på blinde som skal åpne en internettside. Men tilgjengelighet er mye bredere enn som så. Tilgjengelighet betyr at innholdet ditt er formatert på en slik måte at alle skal kunne få tilgang, uavhengig av hvilken teknologi (skjerm/høyttaler/nettleser osv.) brukeren benytter. Eksempler på brukere som kan ha nytte av høy tilgjengelighet:

• En person som vil åpne en nettside på mobil eller på Nintendo Wii
• En fargeblind bruker (10% av alle menn er fargeblinde) som vil ha problemer med å skille kontrasten på enkelte farger
• En blind eller svaksynt bruker
• En eldre person, som vil ha større skrifttyper og bedre kontrast
• Et barn som vil ha større skrifttyper og kanskje mer fargerik stil på siden
• En person som laster siden med en treg internetttilkobling, og som skrur av bilder
• En søkemotor som ikke forstår det visuelle på siden, men som bare følger lenker akkurat som en blind person

Eksempel: Sesam.no slik det ser ut med stilsett og bilder avslått (sånn som en skjermleser eller søkemotor ville ha “sett” siden). Nederst på siden kan du se at de har benyttet tabeller for layout/ikke-tabelært innhold (“Tid for jakt” og “Sesam og Idol” ligger i tabell-kolonner), noe som degraderer tilgjengeligheten. De har brukt meningsløs alternativ tekst på noen av bildene (f.eks. “pil ned” og “Stjerne”, noe som ikke gir verdi for brukeren) og lenkene øverst er formattert feil slik – de er duplisert i ren tekst og gir ingen verdi.

Tilgjengelighet og Ajax

Per dags dato har mange av skjermleserne ikke tatt høyde for Ajax. Mange av funksjonene (for eksempel et vindu som viser en feilmelding) som er laget i Ajax er satt i eksakte posisjoner, mens skjermleseren ikke klarer å tolke posisjoner siden den leser HTML-koden på en ikke-visuell måte.
Dessuten er jo Ajax javascript-basert, mens mange (ikke alle) av de blinde pleier å slå av Javascript. Dermed er det viktig at Ajax er et tillegg (!) for de visuelle brukerne, men at man kan bruke siden ikke-visuelt.

Her er noen tips for bruk av Ajax:

• Legg innhold som skal lastes inn dynamisk i den posisjonen der det er logisk for skjermleseren. Hvis du bruker Ajax til å validere et skjema, og vil gi en feilmelding i et Ajax-felt, legg koden for dette i umiddelbar nærhet av skjema-feltet der feilmeldingen skal vises.
• Ha en alternativ visning for de som ikke har Javascript (og dermed Ajax) slått på. Legg valideringskode for skjemaer i onsubmit, men ikke tving brukeren til å gjennomkjøre Javascript-kode for i det hele tatt å kunne sende skjemaet.
• En mulighet er å legge en alternativ versjon av Ajax-kontrollen i en noscript-tag. Alt som ligger mellom noscript blir vist for de som har javascript skrudd av.
• Bruk ellers vanlige tilgjengelighetskonvensjoner. Bruk alternativ tekst på bilder, bruk god og standardbasert HTML/CSS-koding og la lenker være klikkbare selv om javascript er skrudd av.
• Jeg anbefaler følgende artikkel for tekniske detaljer og eksempler:
  AJAX and Screenreaders: When Can it Work?
• Flere gode tips finner du i IBMs liste over beste praksis for Ajax

På sikt vil kanskje skjermlesere bli bedre på å tolke visuelle hendelser på skjermen, og lese opp dette. Man kan for eksempel tenke seg at hvis en Ajax-melding vises på skjermen, så hopper leseren til posisjonen på meldingen, og hopper tilbake til tidligere posisjon etter at meldingen er opplest. Det jobbes iherdig med forskjellige standarder for opplesning, og det vil med tid og stunder bli enklere å kontrollere opplesningen bedre for webutviklere.

Hvordan tester jeg tilgjengeligheten?

1. Last ned Opera. Opera kan blant annet lese opp innholdet, slå av bilder, javascript og stilsett, og kan i tillegg vise innholdet med forskjellige stilsett for høyere kontrast. Prøv også Opera Mini for å teste tilgjengelighet for små skjermer.
2. Last ned Accessibility Toolbar for Opera (eller Internet Explorer eller prøv tilgjengelighets-verktøylinje for Firefox). Disse verktøylinjene inneholder en samling med verktøy for å teste for de viktigste tingene innen tilgjengelighet.
   
3. Skru av bilder og stilsett i Opera slik som dette:
   
   “Author mode” betyr at Opera benytter de stilsettene som er laget av siden, mens “User mode” vil benytte de stilsettene som brukeren har laget selv. Javascript kan slås av ved å trykke F12-tasten og huke vekk “Enable Javascript”.
4. Prøv å laste noen av Ajax-funksjonene på miniajax.com, så kan du selv teste hvor bra de fungerer.

Se også:

• En oppsummering fra WebAIM.org
• Ajax, accessibility and assistive technology
• Les mer om tilgjengelighet på iallenkelhet.no

Anders er ekspert på e-handel og søk

Flere artikler av Anders – CV