tabindex og accesskey
Styr rækkefølgen for tastaturnavigation og tastaturgenveje.
tabindex og accesskey er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Tastaturnavigation
Brugere uden mus er afhængige af Tab til at navigere mellem interaktive elementer:
- Naturligt fokuserbare:
<a href>,<button>,<input>,<select>,<textarea> - Ikke-interaktive elementer (
<div>,<span>) er ikke med i tabulatorrækkefølgen tabindexstyrer, om og hvor et element vises i tabulatorrækkefølgen
tabindex="0"
tabindex="0" føjer et ikke-interaktivt element til den naturlige tabulatorrækkefølge:
<div tabindex="0" role="button" onclick="handleClick()">
Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->
<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>tabindex="-1"
tabindex="-1" gør et element fokuserbart via programmering, men fjerner det fra tabulatorrækkefølgen:
<div id="modal" tabindex="-1" role="dialog">
<!-- modal content -->
</div>
<script>
// Open modal and send focus to it:
document.getElementById('modal').focus();
// Modal is now focused but not in the normal tab sequence
</script>Positive tabindex-værdier — undgå dem
Positive tabindex-værdier (f.eks. tabindex="3") angiver en brugerdefineret tabulatorrækkefølge — undgå dem:
<!-- BAD: positive tabindex creates unpredictable order -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">
<!-- The tab order becomes: 1, 2, 3, then all tabindex=0 elements -->
<!-- This almost always confuses users and fails WCAG 2.4.3 -->
<!-- Fix the DOM order instead of using positive tabindex -->Fokusstyring i SPA'er
Single-page-apps skal styre fokus manuelt:
// When navigating to a new route:
document.querySelector('#main-content').focus();
// When opening a modal:
const modal = document.getElementById('modal');
modal.removeAttribute('hidden');
modal.querySelector('[autofocus], button, [tabindex]').focus();
// When closing a modal: return focus to the trigger
document.getElementById('open-btn').focus();Fokusfælde i modaler
Fang fokus inde i en åben modal, så Tab bliver inden for den:
function trapFocus(element) {
const focusable = element.querySelectorAll(
'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
);
const first = focusable[0];
const last = focusable[focusable.length - 1];
element.addEventListener('keydown', e => {
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === first) {
e.preventDefault(); last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault(); first.focus();
}
}
});
}Attributten accesskey
Attributten accesskey tildeler en tastaturgenvej til et element:
<button accesskey="s">Submit</button>
<!-- On Windows: Alt+S focuses/activates the button -->
<!-- On Mac: Control+Option+S -->
<!-- On Firefox: Shift+Alt+S -->
<a href="/" accesskey="h">Home</a>Begrænsninger ved accesskey
accesskey har betydelige problemer:
- Aktiveringstaster varierer mellem browsere og operativsystemer
- De kan kollidere med browsergenveje (f.eks. Alt+F = menuen File)
- De oplæses ikke som standard af skærmlæsere
- De bruges sjældent i praksis — dokumentér dem, hvis du bruger dem
Synlige fokusindikatorer
Skjul aldrig fokusomrids — de er afgørende for tastaturbrugere:
/* BAD: removes focus outline for everyone */
* { outline: none; }
/* Better: style focus outlines, don't remove them */
:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 2px;
border-radius: 3px;
}
/* :focus-visible only shows outline for keyboard navigation -->
/* Mouse clicks do not trigger :focus-visible in modern browsers */Mønster til spring over-link
Et spring over-link lader tastaturbrugere springe forbi gentagen navigation:
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>... long navigation ...</nav>
<main id="main-content" tabindex="-1">... content ...</main>
<!-- CSS: -->
<!--
.skip-link {
position: absolute;
top: -100%;
}
.skip-link:focus {
top: 0;
}
-->Attributten autofocus
Attributten autofocus flytter fokus til et element, når siden indlæses:
<input type="search" autofocus placeholder="Search...">
<!-- Useful on search pages or forms with a single primary field -->
<!-- Use sparingly: it can disrupt users who rely on the page top for orientation -->
<!-- Only one element per page should have autofocus -->Hurtigt tjek
Hvilken tabindex-værdi gør et element fokuserbart via JavaScript, men springer det over ved normal Tab-navigation?
Opsummering: tabindex og accesskey
Det vigtigste om tastaturtilgængelighed:
tabindex="0"— føj til den naturlige tabulatorrækkefølgetabindex="-1"— kan fokuseres via programmering, men er ikke med i tabulatorrækkefølgen- Undgå positive tabindex-værdier
- Fjern aldrig omrids for
:focus-visible - Implementér spring over-links til tastaturbrugere
accesskeyer tilgængelig, men sjældent praktisk på grund af konflikter
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “tabindex og accesskey” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “tabindex og accesskey”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “tabindex og accesskey”?
Styr rækkefølgen for tastaturnavigation og tastaturgenveje. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “tabindex og accesskey”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- id, class, style og title
- Attributten hidden
- tabindex og accesskey
- Brugerdefinerede dataattributter: data-*