varför fungerar inte filtren i min webbutik med en skärmläsare

Filter saknar ofta namn, roll eller statusmeddelande

Produktfilter fungerar vanligtvis inte tillsammans med en skärmläsare eftersom det inte är tillräckligt tydligt vad ett filter är, vad dess aktuella status är, eller vad som händer när användaren gör ett val. Filter på många webbutiker består av kryssrutor eller knappar som fungerar visuellt utmärkt, men är programmatiskt ofullständigt utformade: en kryssruta utan tillhörande etikett, en knapp som endast genom en färgförändring visar att ett filter är aktivt, eller en filterpanel som öppnas utan att en skärmläsare meddelas om detta. För en seende besökare är det inget problem, eftersom denne ser förändringen. För en skärmläsare existerar denna visuella förändring inte — den behöver ett tekniskt meddelande.

Ett annat återkommande problem är att resultatlistan förändras, men att en skärmläsare inte får någon information om detta. Till exempel visas "24 resultat" under filtret, men utan att detta förmedlas som ett statusmeddelande, så användaren måste själv söka efter vad som har ändrats. Detta är starkt förknippat med hur rubriker och struktur är organiserade på sidan, eftersom en skärmläsare ofta navigerar via denna struktur för att bestämma var resultaten börjar — mer om detta finns på varför läser en skärmläsare rubrikerna på min sida inte korrekt. Även hur fokus beter sig efter att ett filter tillämpats spelar en roll: om fokus hoppar obegärt till en annan del av sidan förlorar en skärmläsaranvändare tråden, som beskrivs på varför hoppar markören eller fokus runt på min webbplats.

Vad WCAG fastställer om detta

Att filter måste kunna förmedla sitt namn, roll och status till stödteknik som en skärmläsare, och att statusändringar som ett ändrat antal resultat annonseras, följer av kriterierna om namn, roll och värde samt statusmeddelanden i WCAG 2.1 (W3C) — den nivå som i praktiken förväntas genom EN 301 549. En automatiserad skanning kan identifiera några av dessa brister, till exempel en kryssruta utan etikett, men huruvida ett statusmeddelande faktiskt är begripligt för en användare kräver en bedömning som en skanning inte kan göra — se kan en automatiserad tillgänglighetstest hitta allt.