Stikkord: 1.3.1, 2.1.2, 4.1.2, aria-controls, aria-hidden, aria-selected, role="tab", role="tablist", role="tabpanel", skjermleser, tabindex, tastatur
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
Jerikoveien 22 (Google maps)
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
<ul class="mtx_tablist" role="tablist">
<li class="mtx_tab" id="tab1" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1">Kontaktinfo</li>
<li class="mtx_tab" id="tab2" role="tab" tabindex="-1" aria-selected="false" aria-controls="panel2">Kart</li>
</ul>
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
<div id="panel2" class="mtx_panel hidden123" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
<p>...</p>
</div>
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
// JavaScript Document
// Skrevet av: Morten Tollefsen
// Sist oppdatert: 28.6.16
$(document).ready(function()
{
$("li[role='tab']").click(function(){
$("li[role='tab']:not(this)").attr("aria-selected","false");
$("li[role='tab']").attr("tabindex","-1");
$(this).attr("aria-selected","true");
$(this).attr("tabindex","0");
var tabpanid= $(this).attr("aria-controls");
var tabpan = $("#"+tabpanid);
$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("div[role='tabpanel']:not(tabpan)").addClass("hidden123");
tabpan.removeClass("hidden123");
tabpan.attr("aria-hidden","false");
});
// This adds keyboard accessibility by adding the enter key to the basic click event.
$("li[role='tab']").keydown(function(ev) {
if (ev.which ==13) {
$(this).click();
}
});
//This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs.
$("li[role='tab']").keydown(function(ev) {
if ((ev.which ==39)||(ev.which ==37))
{ var selected = $(this).attr("aria-selected");
if (selected =="true"){
$("li[aria-selected='false']").attr("aria-selected","true").focus() ;
$(this).attr("aria-selected","false");
$("li[role='tab']").attr("tabindex","0");
$(this).attr("tabindex","-1");
var tabpanid= $("li[aria-selected='true']").attr("aria-controls");
var tabpan = $("#"+tabpanid);
$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("div[role='tabpanel']:not(tabpan)").addClass("hidden123");
tabpan.attr("aria-hidden","false");
tabpan.removeClass("hidden123");
}
}
});
});
Vis CSS
.tabpanel {
margin: 20px;
padding: 0;
}
.mtx_tablist {
margin: 0 0px;
padding: 0;
list-style: none;
}
li.mtx_tab {
margin-bottom: 0px;
}
li:active, li:focus {
border: 2px solid #c1131b;
outline: medium none:;
}
.mtx_tab {
margin: .2em 1px 0 0;
padding: 10px;
height: 1em;
font-weight: bold;
border: 1px solid black;
background:#fff;
border-top-left-radius:.5em;
border-top-right-radius:.5em;
float: left;
display: inline; /* IE float bug fix */
}
.mtx_panel {
clear: both;
display: block;
margin: 0 0 0 0;
padding: 10px;
width: 300px;
background:#f2f2f2;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}br />
li[aria-selected='true'] {
color: black;
background-color: #dddddd;
border-bottom: 1px solid white;
}
div[aria-hidden='true'] {
display: none;
}
div[aria-hidden='false'] {
display:block;
}
.hidden123 {display:none;}
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
Tab: flytter til den aktive fanen (hvis fanene er den neste kontrollen i tab-rekkefølgen). Trykkes Tab når en fane har fokus flyttes fokus vekk fra fanene, dvs. til neste tabstopp.
Når fanene har fokus foreslår jeg følgende taster:
- Enter: velger en fane. Tilsvarer musklikk på fanen.
- Pil høyre: velger neste fane eller første fane hvis den siste fanen var aktiv.
Pil ned
kan godt brukes i tillegg.
- Pil venstre: velger forrige fane eller siste fane hvis den første fanen var aktiv.
Pil opp
kan godt brukes i tillegg.
- Home: velger første fane.
- End: velger siste fane.