Tangentbordsnavigering och fokusordning
Säkerställ att all funktionalitet kan nås logiskt via tangentbordet
Tangentbordsnavigering och fokusordning är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vem behöver tangentbordsnavigering?
Många användare är beroende av tangentbordsnavigering:
- Motoriska funktionsnedsättningar — kan inte använda mus
- Vana användare — föredrar kortkommandon
- Skärmläsaranvändare — navigerar helt med tangentbordet
- Användare av brytarstyrning — använder knappar som simulerar tangenttryckningar
Element med naturligt fokus
Följande HTML-element kan som standard få fokus med tangentbordet:
<a href>— Tab flyttar fokus till elementet, Enter aktiverar det<button>— Tab flyttar fokus till elementet, Enter/mellanslag aktiverar det<input>,<textarea>,<select>— Tab flyttar fokus till dem<details>/<summary>— Tab + Enter
Tabbordning
Webbläsaren bestämmer tabbordningen på följande sätt:
- DOM-ordningen som standard — fokus flyttas i den ordning elementen förekommer i HTML-koden
- Positiva tabindex-värden — dessa element får fokus först i stigande ordning
tabindex="0"— läggs till i den naturliga tabbordningen på sin plats i DOM-ordningentabindex="-1"— ingår inte i tabbordningen; kan endast få fokus via ett skript
Naturlig tabbordning = DOM-ordning
Läsordningen i HTML-koden ska motsvara den visuella layouten:
<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
<!-- BAD: visually reordered with CSS, DOM order broken:
CSS flexbox order: doesn't affect tab order!
Screen readers and keyboard users follow DOM order, not CSS order -->Synlig fokusindikator
WCAG 2.4.7 (nivå AA): tangentbordsfokus måste vara synligt:
/* NEVER do this: */
* { outline: none; } /* removes all focus outlines */
/* GOOD: styled focus indicator: */
:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 3px;
border-radius: 4px;
}
/* :focus-visible shows outline for keyboard only
mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */Anpassade fokusstilar
Fokusstilar i designsystem:
/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}
/* Always ensure 3:1 contrast ratio between
focus indicator and background (WCAG 2.4.11 Level AA) */Logisk fokusordning
Fokusordningen ska vara logisk och förutsägbar — WCAG 2.4.3 (nivå A):
<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->
<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->Länkar för att hoppa över navigering
Länkar för att hoppa över navigering låter tangentbordsanvändare kringgå upprepad navigering:
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Visually hidden until focused: -->
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #0070f3;
color: white;
padding: 0.75rem;
z-index: 9999;
}
.skip-link:focus {
top: 0; /* visible when focused -->
}Fokusfälla i modaler
Modaler måste fånga fokus medan de är öppna:
<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->
const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');
function openModal() {
modal.removeAttribute('hidden');
modal.querySelector('button, [tabindex="0"]').focus();
}
function closeModal() {
modal.setAttribute('hidden', '');
trigger.focus();
}Kortkommandon
Implementera kortkommandon med händelselyssnare:
document.addEventListener('keydown', (e) => {
// Close modal on Escape:
if (e.key === 'Escape') closeModal();
// Navigate tabs with arrow keys:
if (e.key === 'ArrowRight') focusNextTab();
if (e.key === 'ArrowLeft') focusPrevTab();
// Submit form on Enter (default behavior in inputs):
// Nothing needed — browser handles this
});Testa tangentbordsnavigering
Så testar ni tangentbordstillgänglighet:
- Lägg undan musen och använd endast tangentbordet
- Tryck på Tab — kan ni nå alla interaktiva element?
- Är fokusindikatorn alltid synlig?
- Är tabbordningen logisk?
- Kan ni använda alla funktioner (formulär, modaler, rullgardinsmenyer) utan mus?
- Tryck på Shift+Tab för att navigera bakåt
Snabb kontroll
Vilken CSS-egenskap ska ni aldrig ta bort från alla element om tangentbordstillgängligheten ska bevaras?
Sammanfattning: tangentbordsnavigering
Det viktigaste om tangentbordstillgänglighet:
- Alla interaktiva element måste kunna nås med Tab
- DOM-ordning = tabbordning — motsvara den visuella layouten
- Ta aldrig bort fokusmarkeringar — använd
:focus-visibleför anpassade stilar - Länkar för att hoppa över navigering gör det möjligt att kringgå upprepad navigering
- Använd fokusfälla i modaler och återställ fokus när de stängs
- Testa genom att använda webbplatsen med endast tangentbordet
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Tangentbordsnavigering och fokusordning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Tangentbordsnavigering och fokusordning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Tangentbordsnavigering och fokusordning”?
Säkerställ att all funktionalitet kan nås logiskt via tangentbordet Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Tangentbordsnavigering och fokusordning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Varför tillgänglighet är viktigt och WCAG-nivåer
- Rubrikhierarki för skärmläsare
- Alternativtext för bilder – när och hur
- Tangentbordsnavigering och fokusordning