De vanligaste tillgänglighetsfelen i webbutiker och hur man åtgärdar dem

Saknade alt-texter, låg färgkontrast, otillgängliga formulär — dessa är felen som automatiska kontroller upptäcker oftast. Översikt och guide för att åtgärda dem.

Publicerat:

Exempel på webbutik med fyra markerade tillgänglighetsfel: saknad alt-text, låg kontrast, omärkt formulärfält och saknad fokusindikator

Varför automatiska kontroller avslöjar mer än väntat

De flesta ägare av webbutiker antar att deras webbplats är tillgänglig. Verkligheten ser ofta annorlunda ut. En automatisk kontroll avslöjar typiskt tiotals till hundratals fynd även i en till synes normal webbutik.

Automatisering täcker ungefär 30–50 % av WCAG 2.1 AA-reglerna. Vilka är de vanligaste problemen?

Saknade alt-texter

Det mest utbredda fyndet. Bilder utan textbeskrivning (alt-attributet) är helt otillgängliga för användare med skärmläsare.

Hur det åtgärdas:

  • Funktionella bilder (produkter, illustrationer, logotyper): en meningsfull beskrivning av vad bilden visar eller vad knappen gör
  • Dekorativa bilder (bakgrunder, ornament): tomt alt-attribut så att skärmläsare hoppar över dem korrekt
  • Bilder som innehåller text: texten måste finnas i alt-attributet

Låg färgkontrast

Det näst vanligaste problemet. WCAG 2.1 AA kräver ett minsta kontrastförhållande på 4,5:1 för normal text och 3:1 för stor text (18 pt eller 14 pt fet). Dålig kontrast drabbar personer med synnedsättning.

Typiskt problematiska element: en ljus knapp 'Lägg i kundvagn' på vit bakgrund, grå beskrivande text, felmeddelanden i blekfärg, text på bildbanners.

Hur det åtgärdas: verktyg som Colour Contrast Analyser eller en automatisk skanning visar omedelbart vilka ställen som inte uppfyller standarden.

Otillgängliga formulär

Formulär är en kritisk punkt i varje webbutik. De vanligaste problemen:

  • Saknad etikett (label) för ett fält: ett E-postfält utan programmatiskt kopplad etikett är oigenkännbart för en skärmläsare
  • Felmeddelanden som inte tillkännages via ARIA: en användare med skärmläsare ser inte att ett fel inträffade
  • Obligatoriska fält utan markering: en asterisk (*) utan textförklaring räcker inte
  • Knappar utan meningsfull text: 'Bekräfta' är bättre än bara en ikon utan beskrivning

Problem med tangentbordsnavigering

Din nationella lag som genomför EAA kräver att hela webbutiken kan användas utan mus. De vanligaste problemen:

  • Saknad synlig focus ring: när en användare navigerar med Tab-tangenten måste de alltid kunna se var de befinner sig
  • Keyboard trap: användaren fastnar i ett modalt fönster eller en meny och kan inte ta sig ut med tangentbordet
  • Dålig fokusordning: Tab hoppar på ett onaturligt sätt runt sidan

Otillgängliga interaktiva element

Knappar och länkar måste ha ett tillgängligt namn så att hjälpmedel meddelar dem korrekt. Problematiska mönster:

  • Knapp med bara en ikon utan text eller aria-label
  • Länk 'Klicka här' eller 'Mer' utan sammanhang
  • Interaktiv div eller span utan role='button' och tangentbordsstöd

Hur man börjar åtgärda

Rekommenderat tillvägagångssätt:

  1. Kör en automatisk skanning — identifiera de mest inflytelserika problemen snabbt och kostnadsfritt
  2. Prioritera efter allvarlighetsgrad: åtgärda kritiska (critical) och allvarliga (serious) fynd först
  3. Rätta tekniska fel: alt-texter, kontrast och formuläretiketter är relativt enkla åtgärder
  4. Beställ en manuell revision: återstående regler (läsbarhet, beteende vid skärmläsare) kräver mänsklig bedömning

Kom ihåg: automatiska kontroller upptäcker ungefär 30–50 % av WCAG-reglerna. Att åtgärda automatiskt upptäckta fel är ett nödvändigt, men inte tillräckligt, steg för att uppfylla din nationella lag som genomför EAA.

Automatisk tillgänglighetskontroll (som denna på Inkluzo) täcker ungefär 30–50 % av WCAG 2.1 AA-reglerna. Den kontrollerar maskindetekterbara fel — alternativa texter, kontrast, rubrik- och formulärstruktur, ARIA-attribut. Återstående 50–70 % av kriterierna kräver manuell bedömning.

Fler guideartiklar

Vanliga frågor

Hur många fel är normalt?
De flesta webbutiker har tiotals till hundratals automatiskt detekterbara fynd. Allvarlighetsgraden är viktigare än antalet — åtgärda kritiska och allvarliga fel först.
Hur vet jag vad jag ska åtgärda först?
Fokusera på fynd markerade som kritiska (critical) och allvarliga (serious) — de har störst inverkan på användare med funktionsnedsättning.
Räcker det att åtgärda automatiskt upptäckta fel?
Nej. Automatisering upptäcker ungefär 30–50 % av WCAG 2.1 AA-reglerna. För en fullständig bild — och för att uppfylla din nationella lag som genomför EAA — krävs en manuell revision.

Vill du testa din webbplats tillgänglighet nu?

Starta tillgänglighetskontroll