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.
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 elemenet, 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.
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 beskredne 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.
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
Du kan downlode hele det simulerede website, inklusive stylesheet'et, pakket i denne zip-fil: simsite.zip.