Synskadad användare med mörka glasögon, illustration

Useit granskar e-handeln

3: Skärmläsare presenterar gränssnittet på ett användbart sätt

Ingen av de granskade e-handelswebbplatserna klarade samtliga krav kopplade till skärmläsarnavigering.

Varför är det viktigt?

En skärmläsare är ett hjälpmedel för gravt synskadade användare som omvandlar det som syns på skärmen till syntetiskt tal eller punktskrift. Användaren kan styra gränssnittet med tangentbordskommandon eller gester på en pekskärm.

För att skärmläsare ska fungera så måste webbplatser och appar vara utformade med tillgänglighet i åtanke. Det handlar om att

ge bilder ett bra textalternativ
ordna informationen i en logisk följd
se till att knappar och andra interaktiva delar är kodade korrekt.

Granskade lagkrav från EN 301 549

9.1.1.1 Non-text Content (A)
9.1.3.1 Info and Relationships (A)
9.1.3.2 Meaningful Sequence (A)
9.4.1.2 Name, Role, Value (A)

Resultat

0 % av webbplatserna klarar kraven kopplade till skärmläsare20 underkända0 godkända

De granskade webbplatserna har alla mycket stora brister kopplade till skärmläsare. Det gör det svårt och i vissa fall omöjligt för kunder med skärmläsare att handla online.

Semantisk HTML-kod

Många av webbplatserna är inte korrekt byggda med så kallad semantisk HTML-kod. Detta leder till att skärmläsaren inte kan förmedla information till användarna om vad det är för typ av innehåll och vilken typ av funktionalitet som finns.

WAI-ARIA

WAI-ARIA är ett komplement till HTML som är till för att underlätta för användare av skärmläsare. Bra ARIA kan ge information om funktionalitet och struktur, men det är lätt att det blir fel. Det vi ser är att ARIA-attribut ibland används men ofta på ett felaktigt sätt, vilket bara gör det svårare för användaren.

Det tyder på att utvecklare inte förstår vad som krävs för att skapa en tillgänglig webbplats och hur koden de skriver formar upplevelsen för användare med skärmläsare. Och det tyder även på att utvecklare behöver få mer kunskap om hur de ska testa sina lösningar med skärmläsare.

Exempel på problem

19 webbplatser har bristfälliga alternativtexter till bilder19 underkända

Textalternativ för bilder, även kallade alt-texter, är ofta en utmaning för användare med skärmläsare. Under granskningen framkom att alt-texter i de flesta fall antingen är bristfälliga alternativt saknades helt.

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.

9.1.1.1 Non-text Content (A)

Två bilder med synliga alt-texter för att sälja solglasögon där den ena inte beskriver produkten i sitt sammanhang, illustration.

12 webbplatser har brister gällande namn roll och värde för interaktiva objekt.12 underkända

De är viktigt att objekt och innehåll på webbplatsen har en angiven funktionalitet, namn och roll. Vid granskningen upptäckte vi att femton av webbplatserna använder ett generiskt HTML block-element kallat div.

Ofta används vanliga <div>-element för skapa knappar och andra interaktiva objekt. Ett div-element saknar inbyggd funktionalitet (semantisk roll) och kommer därför inte kunna presenteras på rätt sätt till användare som inte ser.

Interaktiva element saknade ofta även ett begripligt namn i koden. Detta innebär att gravt synskadade användare med skärmläsare inte får höra att knappen är en knapp och inte heller vad den är till för.