Tillgänglighet på webben: en praktisk guide
Tillgänglighet är skillnaden mellan en webbplats alla kan använda och en som utestänger en del av besökarna utan att någon märker det. De flesta kraven är enkla och billiga om de hanteras under bygget.
Den här guiden täcker vad du kontrollerar, hur du testar utan dyra verktyg, och vad som är lagkrav snarare än god praxis.
Grunderna, ordnade efter effekt#
Att uppfylla dessa punkter tar bort merparten av de verkliga hindren, och ingen är dyr under bygget.
- Semantisk HTML. Rubriker, listor, knappar och länkar med rätt element — det är grunden för allt.
- Tangentbordsnavigering. Allt som går med mus måste gå med Tab och Enter.
- Synlig fokusmarkering. Ta aldrig bort konturen utan att sätta något bättre i stället.
- Tillräcklig kontrast. 4,5:1 för vanlig text, 3:1 för stor text.
- Alt-text på bilder. Beskrivande på informativa, tom på dekorativa.
- Etiketter i formulär. Kopplade till fältet, inte bara platshållartext.
- Tydliga fel. Vid fältet, som säger vad som ska rättas, inte bara i rött.
- Använd inte enbart färg för att förmedla information.
- Undertexter i video, och transkription i ljud.
Semantisk HTML löser på egen hand en enorm andel av problemen. En knapp som är en <div> fallerar direkt med tangentbord och skärmläsare.
Att testa utan dyra verktyg#
Fem tester vem som helst kan göra och som fångar merparten av problemen.
| Test | Så gör du | Vad det avslöjar |
|---|---|---|
| Bara tangentbord | Lägg undan musen och navigera med Tab | Fokusfällor, otillgängliga element |
| Zoom till 200 % | Förstora i webbläsaren | Layout som går sönder, avklippt text |
| Automatisk granskare | Gratis tillgänglighetstillägg | Kontrast, etiketter, struktur |
| Skärmläsare | Den som redan finns i operativsystemet | Om sidan blir begriplig uppläst |
| Gråskala | Systemfilter | Information som förmedlas enbart med färg |
Automatiska granskare fångar ungefär en tredjedel av problemen. Tangentbordstestet fångar många av de övriga och tar två minuter.
Vanliga fel#
Mönster som återkommer gång på gång och som är enkla att undvika.
- Att ta bort fokuskonturen av estetiska skäl — gör webbplatsen obrukbar med tangentbord.
- Att använda <div> med klickhanterare istället för <button>, vilket förlorar tangentbord och semantik.
- Platshållartext istället för etikett: den försvinner när du börjar skriva.
- Låg kontrast i sekundär text, mycket vanligt med ljusa gråtoner.
- Bilder med inbränd text, oläsbara för skärmläsare och för översättning.
- Automatiska karuseller utan möjlighet att pausa.
- Modaler som inte återför fokus till elementet som öppnade dem.
- Ikoner utan tillgänglig etikett, särskilt i menyer och stängningsknappar.
Lagkrav och omfattning#
Ramverket varierar mellan länder och organisationstyper, men riktningen är densamma överallt.
| Sammanhang | Läge |
|---|---|
| Offentlig sektor i EU | Obligatoriskt, med tillgänglighetsredogörelse |
| Digitala tjänster och handel | I ökande grad omfattat av EU-lagstiftning |
| Leverantörer till staten | Krävs ofta i upphandling |
| Referensstandard | WCAG 2.1 nivå AA |
| Privata webbplatser utan offentliga avtal | God praxis, med ökande juridisk risk |
| Mobilappar | Omfattas av samma riktlinjer |
Oavsett lagkrav är det praktiska argumentet enkelt: en betydande del av befolkningen har någon begränsning, och tillfälliga begränsningar drabbar alla någon gång.
Vanliga frågor
Fördyrar tillgänglighet projektet?
Under bygget knappt — det mesta handlar om att skriva korrekt HTML och välja färger med tillräcklig kontrast. Att rätta efter att webbplatsen är klar kostar betydligt mer, eftersom det innebär att ändra i redan byggd struktur. Därför bör det stå i kraven, inte i en granskning efteråt.
Räcker automatiska verktyg?
Nej. De fångar ungefär en tredjedel av problemen: kontrast, saknade etiketter, rubrikstruktur. De kan inte bedöma om en alt-text är användbar, om tabbordningen är logisk, eller om sidan är begriplig uppläst. Kombinera automatiskt med tangentbordstest och skärmläsare.
Hjälper tillgänglighet SEO?
Det hjälper, genom verklig överlappning: semantisk HTML, välbyggda rubriker, alt-text och undertextad video tjänar båda syftena. Det är ingen SEO-taktik, men båda drar åt samma håll eftersom båda bygger på att innehållet är begripligt oberoende av den visuella presentationen.
Behöver jag full efterlevnad?
Har du lagkrav — ja, på den nivå som krävs. I övrigt, arbeta efter prioritet: rätta först det som blockerar användning — tangentbord, kontrast, etiketter, formulär — och ta de finare punkterna sedan. En webbplats med grunderna lösta är användbar; full formell efterlevnad är nästa steg.
tillgänglighet webbwcagtillgänglig webbplatstangentbordsnavigeringkontrast tillgänglighetskärmläsare
