tabindex-attributten

Kigger vi igen på kildekoden til det første link i min fanebladsmenu, kan vi samle interessen om tabindex-attributten:

<li><a tabindex="1" accesskey="h" 
title="Retur til forsiden" 
id="link1" href="page1.html"><em>H</em>ome</a></li>

Muligheden for at bruge tastaturets tabulatortast til at tabulere sig frem gennem linksene på en webside er meget vigtig. Den bruges af mange mennesker, ikke mindst dem, der på grund af funktionsnedsættelser enten ikke kan bruge musen, eller som har stort besvær med at styre den.

Men også mange personer uden funktionsnedsættelser foretrækker at bruge tastaturet så meget som muligt for at undgå museskader.

Du kan ikke fjerne denne nyttige funktionalitet, men ved hjælp af tabindex-attributten kan du styre den orden, der kan tabuleres i.

Fokus-tilstanden

Når der er tabuleret frem til et link, er det kommet i fokus (focus), hvilket kan siges at modsvare, at der er trykket ned på venstre musetast, men ikke sluppet igen. Det er dog ikke det samme. Som vi siden skal se, knytter der sig både en JavaScript event handler (onfocus) og en pseudoklasse (a:focus) til denne tilstand.

I alle moderne browsere er fokus-tilstanden markeret ved en priklinie rundt om det element, der er i fokus. Det er en browsergenereret markering, der ikke kan fjernes, undtagen ved hjælp af et lille JavaScript knyttet til det enkelte element. Men det bør man ikke gøre.

Hvis ingen links på en side er forsynet med en tabindex-attribut er tabuleringsordenen den orden, hvori links-elementerne optræder i sidens kildekode.

Jeg skulle måske hellere skrive aktive elementer, for der er visse andre elementer, der kan modtage fokus fra en tabindex-attribut, se afsnittet nedenfor.

Denne “naturlige” orden ændres, når tabindex anvendes, på den måde, at alle elementer med en tabindex-værdi andet end 0 kommer først i fokus, når der tabuleres, og dem med det mindste tal kommer først i fokus.

Dernæst fokuseres på de elementer, der har en tabindex- værdi på 0 eller som ikke har en tabindex-attribut. Disse elementer kommer i fokus i den rækkefølge, de i øvrigt optræder i kildekoden.

Bemærk her, at de tabindex-nummererede elementer kommer i fokus i den anførte rækkefølge (mindste nummer først), uanset den orden de forekommer i kildekoden. (Ellers ville denne attribut jo heller ikke have megen værdi). Men bemærk især at links, der ikke er i tabuleringsordenen, enten fordi de slet ikke har nogen tabindex-attribut, eller fordi de har tabindex="0", også får fokus i den rækkefølge de optræder i kildekoden, også selvom linksene ved hjælp af stylesheet positionering kommer først når siden vises i browseren.

Markering af :focus-tilstanden

Som nævnt viser alle nyere browsere når et aktivt element er i fokus, ved at omgive elementet med en stiplet linie (en slags border). Det er ikke en CSS-egenskab, så der er ingen mulighed for at ændre på det, undtagen hvis brugeren griber ind i sin browsers DTD.

Men vi kunne ønske os at supplere denne forholdsvis beskedne markering med en mere tydelig markering, for eksempel i form af et farveskift mage til det, vi bruger ved :hover tilstanden. De to tilstande minder jo om hinanden.

I princippet er det ganske let at skrive en stylesheet formdeklaration på formen
ul.menu li a:focus { color: #000; background: #aae; border-color: #227;}
for nu at bruge den syntaks, jeg har anvendt for fanerne på disse sider.

Det virker også fortrinligt i de fleste browsere – Opera har en lidt aparte fortolkning, men ... – men Internet Explorer vil ikke vide af pseudoklassen :focus, og så er vi lissom lige vidt.

Jeg har tidligere skrevet en længere artikel om disse forhold, som jeg henviser til her: Sådan kan du bruge accesskey-attributten, så jeg vil her indskrænke mig til at gengive den løsning, jeg har anvendt på dette eksempelsite:

<li><a tabindex="1" accesskey="h" title="Retur til forsiden" 
onfocus="this.className='menuknapover'" 
onblur="this.className='menuknap'" class="menuknap" 
id="link1" href="page1.html"><em>H</em>ome</a></li>

Herover ser du et eksempel på det første menupunkt i fanemenuen. Det med rødt markerede er nogle tilføjelser, jeg har gjort for at få en markering af elementet, når det er i fokus, magen til den markering, der finder sted ved :hover-tilstanden.

a-markørerne i denne menu formateres nu af følgende formdeklarationer:

.menu li a.menuknap {padding: 3px 0.5em; margin-right: 3px;  
  border: 1px solid #778; border-bottom: none;
  background: #DDE; text-decoration: none;}
.menu li a.menuknapover {padding: 3px 0.5em; margin-right: 3px;  
  border: 1px solid #227; border-bottom: none;
  background: #aae; color:#000; text-decoration: none;}
.menu li a:hover {color: #000; background: #aae; border-color: #227;}

Når elementet kommer i fokus, udskiftes klassenavnet til menuknapover, når det kommer ud af fokus (onblur()), skiftes til normaltilstanden, som har klassenavnet menuknap.

Aktive elementer

HTML 4.01 og XHTML standarderne fastslår at følgende elementer foruden a-markøren kan forsynes med en tabindex-attribut: area, button, input, object, select og textarea. Hvis disse elementer derfor optræder på en side, indgår de derfor i den “naturlige” tabuleringsorden på linie med links.

Internet Explorer honorerer en ikke-standard værdi for tabindex på -1, der i denne browser tager elementet helt ud af tabuleringsordenen.

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S

Download eksemplet

Du kan downlode hele det simulerede website, inklusive stylesheet'et, pakket i denne zip-fil: simsite.zip.