5 vanligaste WCAG-överträdelserna och hur du åtgärdar dem

Varje år analyserar WebAIM de en miljon mest besökta webbplatserna ur tillgänglighetssynpunkt. Resultaten är konsekventa: 94,8 % av alla startsidor har påvisbara WCAG-brister. Men samma fem problem återkommer på de allra flesta sajter. Åtgärda dessa fem och du eliminerar merparten av dina automatiskt detekterade överträdelser.

1. Bristande textkontrast

Finns på 79,1 % av alla startsidor. Det vanligaste WCAG-problemet med bred marginal.

WCAG 2.1 kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text (18px fetstil eller 24px vanlig). Ljusgrå text på vita bakgrunder, platshållartext i formulär och fotlänkar är de vanligaste syndarna.

Så fixar du det

/* Före — underkänd kontrast (2,5:1) */
.subtitle { color: #999999; background: #ffffff; }

/* Efter — godkänd kontrast (7:1) */
.subtitle { color: #595959; background: #ffffff; }

2. Saknad alt-text på bilder

Finns på 55,5 % av alla startsidor. Bilder utan alt-attribut är osynliga för skärmläsaranvändare.

Så fixar du det

<!-- Före — saknad alt -->
<img src="team-photo.jpg">

<!-- Efter — beskrivande alt-text -->
<img src="team-photo.jpg" alt="WCAGAlert-teamet på kontoret i Stockholm">

<!-- Dekorativ bild — använd tom alt -->
<img src="decorative-line.svg" alt="">

3. Saknade formuläretiketter

Finns på 48 % av alla startsidor. Formulärfält utan tillhörande etiketter gör det omöjligt för skärmläsaranvändare att veta vad de ska fylla i.

Så fixar du det

<!-- Före — ingen etikett -->
<input type="email" placeholder="Ange din e-post">

<!-- Efter — korrekt kopplad etikett -->
<label for="email">E-postadress</label>
<input type="email" id="email">

4. Tomma länkar

Finns på 48,6 % av alla startsidor. Länkar utan text — ofta ikon-länkar utan alt-text.

Så fixar du det

<!-- Efter — tillgänglig ikonlänk -->
<a href="/twitter" aria-label="Följ oss på Twitter">
  <svg aria-hidden="true">...</svg>
</a>

5. Saknat dokumentspråk

Finns på 17,1 % av alla startsidor. Utan ett lang-attribut på <html>-elementet kan skärmläsare inte avgöra rätt uttal.

Så fixar du det

<html lang="sv">

Helhetsbilden

Dessa fem problem står för merparten av alla automatiskt detekterade WCAG-överträdelser. De är väl förstådda, har tydliga lösningar och kan hittas tillförlitligt med automatiska verktyg. Sätt upp automatisk övervakning för att fånga problemen när de uppstår.