Faner

Faner kan kodes på mange måter. Det er ikke opplagt hvordan tastatur skal fungere, men i denne artikkelen får du et forslag.

Jeg har gjort en del endringer i koden jeg har funnet på nettet, og eventuelle feil er min skyld.

Faner med tastaturstøtte

Kontaktinformasjon: MediaLT

Telefon: 21 53 80 10
Epost: info@medialt.no

Adresse: Jerikoveien 22, 1067 Oslo

Ansvarlig for x.medialt.no

Morten Tollefsen

Telefon: 908 99 305
Epost: morten@medialt.no

WAI-ARIA attributter

Fanene ligger i en uordnet liste <ul>.

role="tablist": brukes for å gi skjermlesere og andre hjelpemidler beskjed om hva slags kontroll listen brukes til.

På hver fane <li> brukes følgende attributter.

id="tab1": id’en brukes for å navngi det aktuelle faneområdet (tabpanel) med samme navn som fanen.

role="tab": gir skjermlesere og andre hjelpemidler beskjed om hva slags kontroll listeelementet er.

tabindex="0": den aktive fanen skal ha tabstopp. Andre faner skal ikke ha tabstopp og kodes med tabindex="-1".

aria-selected="true": den aktive fanen skal merkes på en måte som gjør at dette kan sjekkes programmeringsmessig (brukes for eksempel av skjermlesere for å gi beskjed om at fanen er valgt). Andre faner skal kodes med aria-selected="false".

aria-controls="panel1": brukes for å gi beskjed om hva fanen kontrollerer (for eksempel at innholdet ligger i en spesifikk div-tag). Skjermlesere bruker denne informasjonen for å gjøre det mulig å hoppe raskt til riktig sted (Jaws har for eksempel hurtigtasten Alt+Jaws+M). Verdien «panel1» er id’en til faneområdet.

Vis HTML-koden for fanene

Faneområdene kodes med følgende attributter:

id="panel1": id’en brukes av aria-controls (på hver av fanene i lista).

role="tabpanel": gir beskjed om hva området (i eksemplet en div-tag) brukes til.

aria-labelledby="tab1": Gir området et navn, og her brukes navnet på fanen (som har id’en tab1).

aria-hidden="false">: gir beskjed om at området skal vises (skjermlesere). aria-hidden="true" brukes på ikke-aktive faner.

Vis HTML-kode for faneområdet

Når en ny fane velges

tabindex="0" settes på den aktive fanen (de andre skal ha tabindex="-1"). aria-selected="true" settes på den aktive fanen (de andre skal ha aria-selected="false"). I tillegg stiles faner og faneområder på vanlig måte, selvsagt.

På faneområdene (tabpanel) er det bare aria-hidden="false" som skal settes på det aktive/synlige området (de andre skal ha aria-hidden="true").

I eksemplet over byttes det kun mellom to faner. Litt mer må gjøres hvis det er flere faner, men koden som trengs er ganske grei.

Vis JQUERY-kode for å håndtere mus/tastatur Vis CSS

Litt om tastaturstøtte

I eksemplet over er det bare to faner. Er det flere faner må koden for tastaturstøtte forbedres litt, men spesielt vanskelig er det ikke.

Jeg synes dette funker bra.

Vis tastaturforslag