Javascriptmenyer på mobil

På vei til Trondheim og NOKIOS denne uken tok jeg mobilen fatt og besøkte www.nokios.no for å finne adressen jeg skulle til. Til min store fortvilelse var menyen på nettstedet helt umulig å bruke både med telefonens innebygde nettleser og Opera Mini. Ikke god reklame med tanke på at konferansen handler om god bruk av IKT i det offentlige. Selv var jeg invitert for å snakke om tilgjengelighet.

Hva er galt?

Ta en tur inn på www.nokios.no og se selv: I steden for å implementere menyen med god semantisk HTML, eller i det minste vanlige linker har NOKIOS gått for en løsning med <div>-elementer som gis klikk-egenskaper gjennom Javascript. Menyen settes inn på sidene ved hjelp av Javascript, og for brukere som ikke har Javascript vises det i steden en lenke til en side som inneholder en statisk versjon av menyen.

Det første som skurrer for meg er at de har menyen på en egen side. Hvorfor kan den ikke heller stå der linken til menyen står? Greit, man kan kanskje ikke få den kollapsende menyen uten Javascript (vel, med en standardvennlig nettleser kan man det), men vi tåler vel i det minste å se en stylet flernivåmeny?

Ingen mus, ingen meny

Skryt skal NOKIOS uansett ha for at de har laget en løsning som fungerer for brukere uten Javascript. Men et problem gjenstår: Opera Mini har Javascript, men menyen feilet alikevel på min telefon. Hvordan kan det ha seg? Jo, det har seg sånn at siden menyen ikke lager menyelementer med lenkelementer så kan jeg ikke bla mellom dem (eller tabbe til dem med tastatur).

Jeg mistenker også at menyen er avhengig av mus for å fungere siden den tilsynelatende bruker onclick-, onmouseover- og onmouseout-events for å fungere. Dermed er brukere med Javascript uten mus satt på trammen siden de ikke får fallback-løsningen, men heller ikke har noen mus å aktivere menyen med.

Etter litt kikking ser jeg at menyen de bruker er et gratis verktøyt kjent som Menu machine. Kikker du på sidene deres ser du den samme meny-fallbacken der også (og sannsynligvis de samme problemene).

Alternativ navigasjon

Siden menyen ikke ga resultater prøvde jeg meg frem ved å taste inn URL på måfå. Det gikk på første forsøk for å komme inn på programmet. Den logiske URLen /program ga meg det jeg trengte. Desverre hadde jeg ikke like stort hell når jeg ville se "praktisk informasjon" for å finne adressen. Jeg forsøkte /praktisk_informasjon, /praktisk_info og /info før jeg ga opp. Alle som har skrevet URLer med mobiltaster vet at tre forsøk er mer enn nok. Riktig svar skulle vise seg å være /praktisk.html (heldigvis er NTNUs servere konfigurert snillt nok til å tillate deg å glemme filendelsen - /praktisk fungerer også).

Hva kan gjøres?

Menysystemet har flere grunnleggende problemer i utformingen sin, men det skal ikke så mye til for å gjøre dette langt bedre. Det første er å flytte menyen inn på hver side, det finnes ikke noe godt argument for å tvinge brukere uten Javascript over på en egen menyside for å navigere nettstedet. Dette er nok for å ha en god fallback.

Når det gjelder Javascript-løsningen er det et par ting som bør vuderes. Den første er å bruke lenke-elementet <a> til lenker. Det burde være innlysende, men det er det altså ikke. Ved å bruke generiske <div> med onclick-event er menyvalgene utilgjengelige for brukere uten mus, og man frarøver brukere standard funksjonalitet som nettleserene gir for vanlige lenker. Det er som nevnt ikke mulig å bruke tastaturet til å hoppe mellom lenger i menyen.

Så snart menyvalgene er lenker så begynner vi å nærme oss. Det neste er å lage en tastatur-variant av alle musavhengige events. onmouseover kan støttes av onfocus og onmousout av onblur. Disse fungerer når brukeren bruker tab til å hoppe mellom elementene. onclick-eventen blir unødvendig når man benytter <a>, men for ordens skyld kan jeg nevne at onkeypress kan fungere sammen med onclick som en tastaturvariant.

Merk at dette er forslag til forbedringer mens man fortsatt beholder menyen slik den er. Hvorvidt det er ønskelig med kollapserende menyer på mobile enheter (eller skjerm og skjermlesere for den saks skyld) er en helt annen diskusjon.

Foredraget

Historien endte nå ihvertfall godt: En internettkiosk på flyplassen i Trondheim ga meg adressen og jeg kom frem i god tid. Foredraget mitt handlet om praktisk tilgjengelighet med HTML og CSS (og forsåvidt Javascript). Med andre ord mer av tips som nettopp det jeg gir her. Noe mer info om arrangementet samt slidene mine finner du på kuttisme.no.