De tio vanligaste WCAG-felen på kommunwebbar, och hur de rättas

Tillgänglighetsfel är inte jämnt fördelade. Ett fåtal feltyper står för den stora majoriteten av det som hittas. I WebAIM:s årliga genomgång av en miljon startsidor 2026 hade 95,9 procent av sidorna fel som gick att upptäcka automatiskt, och 96 procent av alla fel föll inom sex kategorier. Allmentas genomgång av valinformationen på Sveriges kommunwebbar inför valet 2026 visar samma mönster: kontrast, knappar och länkar utan läsbar text och bilder utan beskrivning dominerar.

Listan nedan bygger på de felen, kompletterad med några som ofta hittas på kommunwebbar i synnerhet. Ordningen följer ungefär hur vanliga de är.

1. För låg färgkontrast (WCAG 1.4.3)

Vem drabbas: personer med nedsatt syn eller nedsatt färgseende, och många äldre. I WebAIM:s genomgång fanns felet på 83,9 procent av startsidorna.

Hur det rättas: Vanlig text ska ha en kontrast på minst 4,5:1 mot bakgrunden, stor text minst 3:1. Felet sitter nästan alltid i mallens färger: grå text i sidfoten, ljusa länkfärger, datumrader och vit text på färgade knappar. Byt färgen i mallen så rättas alla sidor samtidigt.

/* Före: #8a8a8a på vitt ger cirka 3,4:1 */
.sidfot, .datum { color: #595959; } /* cirka 7:1 */

2. Länkar utan läsbar text (WCAG 2.4.4 och 4.1.2)

Vem drabbas: den som använder skärmläsare eller röststyrning. Skärmläsaren läser bara upp "länk", och det går inte att veta vart den leder.

Hur det rättas: Vanligast är länkar som bara består av en ikon eller en bild, till exempel sociala medier i sidfoten. Ge länken ett namn.

<a href="https://www.facebook.com/kommunen" aria-label="Kommunen på Facebook">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

3. Bilder utan alternativtext (WCAG 1.1.1)

Vem drabbas: den som inte ser bilden. Om en karta, ett schema eller öppettider bara finns i en bild försvinner informationen helt.

Hur det rättas: Informativa bilder får en kort text som beskriver vad bilden visar i sitt sammanhang. Dekorativa bilder får ett tomt alt-attribut, så att skärmläsaren hoppar över dem.

<img src="vallokal.jpg" alt="Entrén till Folkets hus, vallokal för distrikt Centrum">
<img src="dekor.svg" alt="">

4. Knappar utan läsbar text (WCAG 4.1.2)

Vem drabbas: skärmläsaranvändare, som bara hör "knapp". Typiska exempel är sökknappen med ett förstoringsglas, menyknappen och stängknappen i en dialogruta.

Hur det rättas:

<button type="submit" aria-label="Sök">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

5. Formulärfält utan etikett (WCAG 1.3.1 och 3.3.2)

Vem drabbas: den som använder skärmläsare, som inte får veta vad som ska fyllas i. Platshållartext i fältet räcker inte, eftersom den försvinner när man börjar skriva.

Hur det rättas: Koppla en synlig etikett till fältet.

<label for="epost">E-postadress</label>
<input id="epost" type="email" name="epost" autocomplete="email">

6. Sidans språk saknas eller är fel (WCAG 3.1.1 och 3.1.2)

Vem drabbas: skärmläsaranvändare. Utan språkangivelse kan svensk text läsas upp med engelskt uttal.

Hur det rättas: Ange språket i sidans html-element, och markera stycken på andra språk. Det senare är vanligt på kommunwebbar med information på flera språk.

<html lang="sv">
…
<p lang="en">Information in English</p>

7. Felaktig struktur: rubriker och listor (WCAG 1.3.1)

Vem drabbas: skärmläsaranvändare, som navigerar via rubriker och listor. Om rubriknivåer hoppar eller om listpunkter ligger utanför en lista blir sidan svår att överblicka.

Hur det rättas: Använd rubriknivåerna i ordning, utan att hoppa över nivåer. Använd riktiga listor. I mallen handlar det ofta om komponenter som använder en viss rubriknivå för utseendets skull. I innehållet handlar det om redaktörer som gör text fet i stället för att välja rubrik.

8. Länkar som bara skiljs ut med färg (WCAG 1.4.1)

Vem drabbas: den som har nedsatt färgseende och inte ser att texten är en länk.

Hur det rättas: Stryk under länkar i brödtext, eller markera dem på annat sätt än med färg.

main p a { text-decoration: underline; }

9. Zoom är spärrad (WCAG 1.4.4)

Vem drabbas: personer med nedsatt syn som förstorar sidan på mobilen.

Hur det rättas: Ta bort spärren i sidhuvudets viewport-inställning. Den ligger i mallen och rättas på en rad.

<!-- Före: ... maximum-scale=1, user-scalable=no -->
<meta name="viewport" content="width=device-width, initial-scale=1">

10. Felaktig ARIA (WCAG 4.1.2)

Vem drabbas: skärmläsaranvändare, som får felaktig information om vad en komponent är eller vilket läge den har. Vanligt är menyknappar som alltid säger att menyn är stängd, eller dragspelsmenyer utan tillstånd.

Hur det rättas: Låt skriptet uppdatera tillståndet när komponenten öppnas och stängs, och använd inbyggda HTML-element där det går. Felaktig ARIA är ofta värre än ingen ARIA alls.

<button aria-expanded="false" aria-controls="huvudmeny">Meny</button>
<nav id="huvudmeny" hidden>…</nav>

Det som inte syns i en automatisk mätning

Listan ovan består av fel som går att hitta automatiskt. Några av de viktigaste kraven behöver däremot en människa för att bedömas: att allt går att nå och använda med tangentbord, att fokus syns och hamnar i rätt ordning, att alternativtexterna faktiskt beskriver bilderna, att felmeddelanden i formulär är begripliga och att sidan fungerar när den förstoras till 400 procent. Gå igenom de viktigaste flödena för hand, till exempel en felanmälan eller en ansökan, med bara tangentbordet.

Börja i mallen

Sju av de tio felen ovan sitter oftast i mallen: kontrast, ikonlänkar, knappar, formulärfält i sidhuvudet, språkangivelse, zoomspärr och menyknappar. Att rätta dem är ofta ett par dagars arbete för den som förvaltar webbplatsen, och effekten syns på varje sida. Därefter återstår framför allt alternativtexter, rubriker och länktexter, som redaktörerna rättar och förebygger.

Allmenta mäter kommunwebbar mot dessa och övriga automatiskt kontrollerbara kriterier och tar fram ett kodförslag för bristerna som mätningen hittar, med plats och WCAG-kriterium.