En tillgänglig hemsida gör det möjligt för fler människor att förstå innehållet och använda webbplatsens funktioner. Bra tillgänglighet hjälper bland annat personer som använder tangentbord, skärmläsare eller förstoring, men förbättrar ofta också upplevelsen för mobilanvändare och personer i stressiga situationer.

Tillgänglighet bör byggas in i design, innehåll och utveckling från början. Det blir både enklare och billigare än att försöka rätta hela webbplatsen i efterhand.

1. Använd en logisk sidstruktur

Rubriker ska beskriva innehållet och följa en begriplig hierarki. H1 beskriver sidans huvudämne, medan H2 och H3 delar upp innehållet i underavsnitt.

Hoppa inte mellan rubriknivåer enbart för att få en viss visuell storlek. Utseendet ska styras av designen, inte av felaktig semantik.

2. Gör navigationen begriplig

Menyer och länkar bör ha tydliga namn. Länktext som ”Läs mer” kan vara svår att förstå utan omgivande text, särskilt för användare som navigerar via lista över länkar.

Beskriv hellre destinationen, exempelvis ”Läs om underhåll av hemsida”.

3. Testa hela webbplatsen med tangentbord

Alla centrala funktioner ska kunna användas utan mus. Testa med Tab, Shift+Tab, Enter och Escape där det är relevant.

Kontrollera särskilt:

  • huvudmeny
  • dropdown-menyer
  • formulär
  • modaler och dialoger
  • cookie-banner
  • karuseller och tabs
  • bokning eller checkout

4. Behåll tydlig fokusmarkering

När användaren tabbar genom sidan måste det synas vilket element som är aktivt. Ta inte bort webbläsarens fokusmarkering utan att ersätta den med en minst lika tydlig variant.

5. Kontrollera kontrast

Text och viktiga gränssnittselement behöver tillräcklig kontrast mot bakgrunden. Ljusgrå text på vit bakgrund kan se elegant ut men vara svår att läsa.

Använd inte heller färg som enda signal för exempelvis fel, status eller val. Kombinera färg med text, symbol eller annan tydlig markering.

6. Gör formulär begripliga

Varje fält ska ha en riktig etikett. Placeholder-text bör inte vara den enda förklaringen eftersom den försvinner när användaren börjar skriva.

Felmeddelanden ska förklara vad som behöver rättas och helst ligga nära det aktuella fältet. Vid längre formulär bör fokus flyttas eller användaren få en tydlig sammanställning av fel.

7. Skriv relevanta alt-texter

Informativa bilder behöver alternativ text som förmedlar bildens funktion eller viktigaste information. Dekorativa bilder ska normalt inte läsas upp som betydelsefullt innehåll.

Beskriv inte automatiskt varje detalj. Alt-texten ska hjälpa användaren förstå det som annars går förlorat utan bilden.

8. Texta video och ljud

Video med tal behöver normalt textning. För innehåll där viktig information också visas visuellt kan ytterligare beskrivning behövas.

Planera detta redan under produktionen så att tillgänglighet inte blir en efterhandsuppgift.

9. Kontrollera zoom och förstoring

Testa sidan med kraftigt förstorad text och webbläsarzoom. Innehåll ska inte försvinna bakom andra komponenter, och användaren ska inte behöva scrolla i två riktningar för vanlig text.

10. Gör klickytor tillräckligt användbara

Knappar, länkar och andra kontroller bör vara tillräckligt stora och ha rimligt avstånd från varandra på mobil. Små ikoner utan text eller etikett behöver också ett begripligt namn för hjälpmedel.

11. Undvik oväntade förändringar

En sida bör inte automatiskt byta innehåll, flytta fokus eller öppna nya fönster på ett sätt som överraskar användaren. Om något sker automatiskt ska användaren kunna förstå och kontrollera det.

12. Använd tabeller korrekt

Datatabeller behöver tydliga rubrikceller och en logisk struktur. Använd inte tabeller enbart för layout.

13. Kontrollera språk och sidtitel

Dokumentets språk ska vara korrekt angivet och varje sida bör ha en beskrivande titel. Det hjälper både hjälpmedel och vanlig navigation.

14. Automatiska tester är bara början

Automatiska verktyg kan hitta vissa tekniska fel men kan inte avgöra om en länktext är begriplig, om ett formulärflöde är logiskt eller om en alt-text faktiskt beskriver rätt sak.

Kombinera därför verktyg med manuell testning.

15. Testa med riktiga arbetsflöden

Gå inte bara igenom en lista över tekniska regler. Testa uppgifter som en verklig besökare behöver genomföra:

  • hitta en tjänst
  • skicka en offertförfrågan
  • anmäla sig till ett nyhetsbrev
  • köpa en produkt
  • hitta kontaktuppgifter

16. Bygg tillgänglighet i komponentbiblioteket

Om samma knapp, formulärfält eller modal används på många sidor bör tillgängligheten lösas i grundkomponenten. Då slipper samma fel upprepas över hela webbplatsen.

17. Kontrollera efter varje större release

Nya komponenter och redesign kan introducera problem även om den gamla versionen var korrekt. Ta därför med tillgänglighet i lanseringschecklistan.

18. Kombinera med prestanda och mobiltest

Tillgänglighet, mobilanvändning och prestanda går ofta hand i hand. En tydlig struktur och lättare komponenter kan förbättra flera kvalitetsområden samtidigt.

Se även snabbare hemsida och företagshemsida som konverterar.

Praktisk kontroll inför publicering

  1. Går allt viktigt att använda med tangentbord?
  2. Är fokusmarkeringen synlig?
  3. Har text och knappar tillräcklig kontrast?
  4. Har formulär riktiga etiketter?
  5. Är felmeddelanden begripliga?
  6. Har informativa bilder relevanta alt-texter?
  7. Är video textad där det behövs?
  8. Fungerar sidan vid zoom?
  9. Är rubrikordningen logisk?
  10. Har sidan testats manuellt på mobil?

Sammanfattning

En tillgänglig hemsida kräver mer än en automatisk rapport. Bygg tydlig struktur, fungerande tangentbordsnavigation, bra kontrast, begripliga formulär och rätt bildbeskrivningar. Testa verkliga användarflöden manuellt och gör tillgänglighet till en återkommande del av design, utveckling och underhåll.