Denna guide ger dig konkreta exempel på hur du arbetar med semantisk HTML och fokusordning för att skapa tillgängliga webbgränssnitt som följer WCAG-riktlinjerna.
Vad är semantisk HTML?
Semantisk HTML innebär att du använder HTML-element som beskriver innehållets betydelse och struktur, inte bara dess utseende. Detta hjälper skärmläsare och andra hjälpmedel att tolka sidan korrekt.
Vanliga semantiska element
<header>— Sidhuvud eller sektionshuvud
<nav>— Navigeringsområde
<main>— Huvudinnehåll (endast ett per sida)
<article>— Självständigt innehåll
<section>— Tematiskt grupperat innehåll
<aside>— Kompletterande innehåll
<footer>— Sidfot eller sektionsfot
❌ Dåligt exempel (utan semantik)
✅ Bra exempel (med semantik)
Rubriker och struktur
Rubriker (
<h1> till <h6>) skapar en hierarkisk struktur som hjälper användare att navigera.❌ Dåligt exempel (felaktig hierarki)
✅ Bra exempel (korrekt hierarki)
Vad är fokusordning?
Fokusordning bestämmer i vilken ordning interaktiva element får fokus när användare navigerar med tangentbordet (Tab-tangenten). En logisk fokusordning är avgörande för tangentbordsanvändare.
Grundregler för fokusordning
- Fokus ska följa den visuella läsordningen (oftast vänster till höger, topp till botten)
- Använd aldrig
tabindexmed positiva värden (t.ex.tabindex="1")
- Interaktiva element ska vara fokuserbara som standard
- Fokusindikator måste vara tydligt synlig
❌ Dåligt exempel (manipulerad fokusordning)
Problem: Fokusordningen matchar inte den visuella ordningen, vilket förvirrar användare.
✅ Bra exempel (naturlig fokusordning)
Interaktiva element och ARIA
När du skapar anpassade interaktiva komponenter måste du göra dem fokuserbara och tillgängliga.
❌ Dåligt exempel (icke-semantisk knapp)
Problem: Inte fokuserbara med tangentbord, ingen semantisk betydelse.
✅ Bra exempel (semantisk knapp)
✅ Acceptabelt exempel (ARIA-komplement)
Använd endast när semantiska element inte räcker till.
Formulär och fokusordning
❌ Dåligt exempel
Problem: Inga synliga etiketter, oklart vad fälten är för.
✅ Bra exempel
Hopp över länk (Skip link)
En "hoppa till huvudinnehåll"-länk låter tangentbordsanvändare hoppa över upprepat innehåll som navigation.
✅ Bra exempel
Modaler och fokushantering
När en modal öppnas måste fokus flyttas till modalen och fångas där tills den stängs.
✅ Bra exempel (fokusfälla)
Testa din fokusordning
Manuell testning
- Navigera genom sidan med endast Tab-tangenten
- Kontrollera att fokusordningen är logisk
- Verifiera att fokusindikatorn är synlig
- Testa att du kan aktivera element med Enter eller Space
Verktyg för testning
- axe DevTools — Automatiserad tillgänglighetstestning
- WAVE — Visuell utvärdering av tillgänglighet
- Lighthouse — Inbyggt i Chrome DevTools
- Skärmläsare — NVDA (Windows), JAWS (Windows), VoiceOver (Mac/iOS)
Checklista för semantik och fokusordning
Använd semantiska HTML-element istället för generiska
<div> och <span>Skapa en logisk rubrikhierarki (h1-h6) utan att hoppa över nivåer
Se till att fokusordningen följer den visuella ordningen
Använd aldrig positiva
tabindex-värdenGör anpassade komponenter fokuserbara med
tabindex="0"Implementera tangentbordshantering för anpassade kontroller
Inkludera "hoppa till innehåll"-länk
Hantera fokus korrekt i modaler och dialoger
Använd synliga fokusindikatorer (undvik
outline: none utan ersättning)Testa med tangentbord och skärmläsare
Sammanfattning
Genom att använda semantisk HTML och följa en logisk fokusordning skapar du webbgränssnitt som är tillgängliga för alla användare. Kom ihåg:
- Semantik först — Använd rätt HTML-element för rätt syfte
- Naturlig ordning — Låt DOM-ordningen bestämma fokusordningen
- Testa aktivt — Använd tangentbordet och skärmläsare regelbundet
- Synligt fokus — Gör det tydligt var användaren befinner sig
Med dessa praktiska exempel har du en solid grund för att skapa tillgängliga webbupplevelser som följer WCAG-riktlinjerna.