Hur tillgängliga är kundkorgarna?

På hälften av de granskade webbplatserna fanns text med otillräcklig kontrast mot bakgrunden.

Kontrast på text är viktig av flera skäl. Det gör att texten blir lättare att se och läsa. Om texten och bakgrunden är för lika i färg kan det bli svårt att urskilja orden. Bra kontrast är till hjälp för personer med synnedsättningar och de som inte kan se färger riktigt bra, men god kontrast på text är bra för de allra flesta.

Många människor idag använder mobiltelefoner som förväntas gå att använda utomhus i olika miljöer med till exempel solljus mot skärmen. Goda kontraster gör det enklare att uppfatta text på liten skärm som annars riskerar att bländas bort av ljuset från solen.

• 1.4.3 Contrast (minimum) AA

På hälften av de granskade webbplatserna fanns meningsbärande grafiska objekt med otillräcklig kontrast mot bakgrunden.

Alla meningsbärande objekt på sidan måste ha tillräckliga kontraster. Med meningsbärande objekt menas till exempel

• knappar
• formulärfält
• grafik
• ikoner
• diagram
• fokusmarkeringar

Bra kontrast är till hjälp för personer med synnedsättningar och de som inte kan se färger riktigt bra, men god kontrast på text är bra för de allra flesta.

Många människor idag använder mobiltelefoner som förväntas gå att använda utomhus i olika miljöer med till exempel solljus mot skärmen.

• 1.4.11 Non text contrast (AA)

Färg används på ett otillgängligt sätt på 3 av de 12 granskade webbplatserna.

Ett vanligt problem är att länkar enbart markeras ut med en annan färg. Länkarna kan då bli svåra att skilja från vanlig brödtext, speciellt om du har nedsatt färgseende.

I Sverige idag har en halv miljon människor nedsatt färgseende i någon grad och hos män är det ungefär en av tolv.

• Use of color (AA)

Fler än hälften av de granskade webbplatserna hade bristande alt-texter på bilder.

Många av webbplatserna har flera olika problem med alt-texterna. Bristerna kan vara bland annat

• bilder som helt saknar alt-texter
• tomma alt-texter för informationsbärande bilder
• obegripliga alt-texter
• missvisande alt-texter som snarare beskriver bildens motiv än berättar vad bilden ska förmedla i sitt sammanhang

Alt-texter är viktiga för att personer som använder skärmläsare ska kunna förstå vad bilder visar. På en e-handelssida kan det vara viktigt eftersom kunder annars kan missa viktig information om produkter.

• 1.1.1 Non text content (A)

Fler än hälften av webbplatserna uppfyllde inte kravet på tillgängliga statusmeddelanden.

Statusmeddelanden är små bekräftelser eller uppdateringar som visar att något har hänt på sidan – till exempel att en vara lagts till i varukorgen. För att de ska vara tillgängliga måste de också läsas upp för personer som använder skärmläsare. Annars händer något på sidan utan att användaren får veta det.

Många av webbplatserna gav ingen information om att något lagts till i inkorgen.

• 4.1.3 Status messages (AA)

Fler än hälften av webbplatserna hade brister kopplat till detta. För att hjälpmedel som skärmläsare ska förstå och kunna förmedla vad olika knappar, länkar och fält på en webbplats gör, behöver de ha rätt namn, roll och värde. Det betyder till exempel att en knapp måste tala om att den är en knapp, vad den heter (t.ex. "Lägg i varukorg") och vilket läge den är i (till exempel om menyn är expanderad eller kollapsad).

Om den informationen saknas eller är fel blir webbplatsen svår eller omöjlig att använda för många som navigerar med hjälpmedel.

• 4.1.2 Name, Role, Value (A)

Fler än hälften av de granskade webbplatserna hade problem kopplat till semantik och struktur.

Att webbplatsen har en korrekt struktur och semantik betyder kortfattat att information och hur saker hänger ihop på en webbsida ska vara tydligt – både för ögat och för hjälpmedel som till exempel skärmläsare.

Om något ser ut som en rubrik, ska det också vara kodat som en rubrik – med rätt tagg, till exempel <h1> eller <h2>. Då kan hjälpmedel återge strukturen på sidan och veta vad som är rubriker och vad innehållet handlar om.

• 1.3.1 Info and relationships (A)

Hälften av webbplatserna saknade möjlighet att hoppa över återkommande innehåll så som till exempel menyer. På en e-handelssajt kan det till exempel innebära att snabbt komma förbi toppmenyn och direkt till produktlistan.

Det är särskilt viktigt för personer som använder tangentbord då man som användare tabbar sig fram genom varje interaktivt objekt på sidan. Om det inte finns möjlighet att hoppa över innehåll innebär det ibland väldigt många tabbsteg tills att du kommit rätt på sidan.

• 2.4.1 Bypass blocks (A)

Fler än hälften av webbplatserna hade en ologisk fokusordning.

När användaren trycker på tabb-tangenten ska fokus flyttas mellan alla interaktiva element på sidan i en förutsägbar ordning. Om ordningen är ologisk blir det svårt eller omöjligt att navigera.

Ett vanligt problem var att det gick att lämna täckande fönster och komma åt innehåll bakom fönstret, eller att fokus inte flyttas till nya områden som öppnas.

• 2.4.3 Focus order (A)

Fler än hälften av de granskade webbplatserna hade bristande fokusmarkering.

Alla knappar, länkar och interaktiva objekt som får fokus med tangentbordet måste ha en tydlig visuell fokusmarkering, till exempel en färgad ram eller en understrykning.

Att ta bort fokusmarkeringen kan jämföras med att dölja muspekaren för någon som navigerar med mus. Det blir nästan omöjligt att ta sig runt på sidan.

• 2.4.7 Focus visible (AA)