Gör din webb mer tillgänglig: 5 åtgärder du kan genomföra redan idag
Tillgänglighet handlar om mer än att uppfylla krav. Det handlar om att öppna din webb för fler – och samtidigt göra upplevelsen bättre för alla. Läs mer i vår artikel om ökad tillgänglighet på webben. Här går vi igenom fem insatser du kan göra direkt, med praktiska exempel, vanliga fallgropar och verktyg som hjälper dig hela vägen.
1) Texta video och publicera transkriptioner
Utan textning går viktigt innehåll förlorat för många användare – och för dem som tittar utan ljud. Transkriptioner gör dessutom materialet sökbart och återanvändbart.
Så gör du
- Lägg till undertexter på alla videor (de flesta plattformar stödjer textning – använd den inbyggda funktionaliteten). Och du – korrekturläs alltid auto-genererad text, det kan bli så fel annars…
- Publicera en transkription under videon. Ange tydligt var läsaren hittar den.
- Säkerställ att textningen inte skymmer viktig grafik och att den fungerar på mobilen.
Fallgropar
- Automattextning utan manuell kontroll – a big no-no!
- Transkriptioner som göms bakom otydliga länkar eller som PDF.
Verktyg som kan hjälpa dig
- WAVE – snabbkontroll av tillgänglighetsfel
- Lighthouse i Chrome DevTools – tillgänglighetsrapport
- ChatGPT – låt modellen föreslå korta sammanfattningar/transkriptioner
2) Använd semantisk HTML och korrekta rubriker
Skärmläsare och andra hjälpmedel navigerar via sidans struktur. Rätt semantik gör innehållet begripligt – även utan visuell presentation.
Enkelt sagt: semantisk HTML handlar om att skriva kod som berättar vad något är, inte bara hur det ser ut.
Så gör du
- Följ en logisk rubrikhierarki:
<h1><h2><h3>… (hoppa inte över nivåer). - Använd rätt element för sitt avsedda syfte:
<nav>för navigation,<main>för huvudcontent,<section>för att dela upp innehållet i tematiska delar. - Markera listor och tabeller korrekt:
<ul>/<ol>det vill säga unordered list eller ordered list. - Lägg in en “skip link” överst på sidan för tangentbordsanvändare. Detta görs på olika vis i olika publiceringsverktyg eller CMS, men så här kan de se ut i HTML-koden:
<a class="skip-link" href="#main">Hoppa till innehåll</a>
<main id="main">...</main>Fallgropar
- Rubriker som enbart är
<div>med fetstil. - Dubbla
<h1>eller rubriker i sidfot/menyer som stör logiken.
Verktyg och riktlinjer
3) Skriv beskrivande alt-texter för bilder
Alt-texten förklarar bildens syfte när den inte kan uppfattas visuellt. OBS – Dekorativa bilder ska däremot ha tom alt-text så att hjälpmedel kan hoppa över dem.
Så gör du
- Beskriv vad bilden visar och varför den finns: “Diagram som visar 18 % ökning av leads Q2–Q3”.
- Håll det kort (cirka 125 tecken är ett bra riktmärke) och undvik texter typ, “bild av…”.
- För rena dekorationsbilder:
alt="". Dvs en tom alt-text - För komplex grafik: lägg gärna en längre beskrivning i brödtext nära bilden.
Fallgropar
- Alt-texter som upprepar rubriken ordagrant. Det blir bara kaka-på-kaka.
- Alt-texter som lämnas tomma på bilder som förmedlar budskap eller ger mening.
Verktyg och hjälp
Exempelprompt till ChatGPT
Skriv en alt-text enligt bästa praxis (max 125 tecken) som beskriver denna bild:
[klistra in bilden].4) Säkerställ tillräcklig färgkontrast
Låg kontrast gör text svårläst – särskilt i mobilen och i starkt ljus. Säkra minst WCAG AA-nivå för text och UI-element (user interface).
Så gör du
- Testa brödtext, länkstilar, knappar, formulär och hover/fokus-tillstånd.
- Undvik text ovanpå brusiga bilder/gradienter – eller lägg en platta bakom texten, som ökar kontrasten.
- Låt inte färg vara enda bärare av information (lägg till ikon/text). Ca 5% av Sveriges befolkning är färgblinda.
Verktyg för kontrast
5) Gör all funktionalitet möjlig via tangentbord
Många navigerar utan mus. Alla interaktiva element måste gå att nå och använda med tangentbord – med tydlig fokusmarkering.
Så gör du
- Testa hela flödet med Tab, Shift+Tab, Enter, Space, piltangenter och Esc.
- Se till att fokusindikatorn syns (det är ofta en ram runt objektet).
Verktyg och test
Implementera smart: så får du effekt snabbt
Börja med en snabbskanning av ett par nyckelsidor. Åtgärda uppenbara fel (rubriker, alt-texter, kontrast) och bygg sedan in tillgänglighet i din vanliga arbetsprocess – mallar, komponenter, contentrutiner och kodgranskningar. Det är mycket lättare att göra saker tillgängliga från början än att göra det i efterhand.
Här är en miniplan
- Kör en snabb audit med WAVE och Lighthouse.
- Rätta rubrikstrukturer och lägg till
skip-link - Gå igenom bilderna: skriv alt-texter eller använd
alt=""för dekorativa. - Justera färgerna tills allt klarar WCAG AA i WebAIM Contrast Checker.
- Testa tangentbordsflöden och skärmläsare (NVDA/VoiceOver), fixa fokus, modaler och menyer.
