3.3.18 Ge webbplatsens innehåll en logisk tabbordning

En användare som inte använder musen använder sitt tangentbord för att navigera på webbplatsen. Navigering för att stega mellan länkar, knappar och formulärfält sker då med hjälp av tabbtangenten och vissa fall med piltangenterna.

En ologisk presentationsordning av innehållet på en webbplats kan göra det mycket svårt att förstå hur webbplatsen fungerar för den som inte kan använda musen. Tabbordningen i formulär är särskilt viktig, se 3.5.3 Gruppera formulärets fält.

Genom att man stegar sig igenom innehållet får olika objekt fokus, till exempel länkar och fält. Gör det tydligt för användaren vilken länk som har fokus,

I princip följer tabbordningen den ordning som finns i webbsidans kod. Om denna ordning inte är logisk kan tabbordningen styras med hjälp av ett tabbindex. Försök i första hand skapa en logisk ordning i din kod. I princip ska det alltid vara tillräckligt. Var mycket restriktiv med att använda tabbindex eftersom det riskerar att inte stämma överens med den tabbordning besökarna förväntar sig.

Teknik för tabbindex

För varje objekt som du vill ge ett tabbindex lägg till attributet tabindex=”värde”, till exempel en länk eller ett formulärfält. Värdet blir objektets prioritetsnummer i tabbordningen. I exemplet nedan får textfältet prioritet 1 och kommer före alla objekt på samma sida med prioritet 2 eller lägre.

<label for="telefon">Telefonnummer (med riktnummer): </label>
<input id="telefon" type="text" tabindex="1" name="telefon"/>

Om flera element ges samma tabbindex navigerar webbläsaren mellan dem i den ordning de kommer i koden.

Mätbarhet

Lägg undan musen och navigera dig runt på webbplatsen med hjälp av tangentbordet. Se till att tabbordningen stämmer överens med ordningen som användaren förväntas ta del av informationen på webbsidan i.

Olika webbläsare använder olika tangenter för tangentbordsnavigering:

• Internet Explorer 6 och Firefox: tabbtangenten (shift + tabbtangenten för att tabba bakåt)
• Opera: tangenterna A och Q för länkar och tabbtangenten för fält och knappar.
• I andra webbläsare kan du behöva aktivera tangentbordsnavigering för att det ska fungera.

Senast uppdaterad 2008-12-21