Toegankelijke filters in uw webshop: productfilters voor iedereen

Een klant zoekt een regenjas. Hij vinkt “Heren” aan en de pagina herlaadt. Hij staat weer bovenaan, tabt opnieuw door het menu, de zoekbalk en de kruimelpad naar de filters, en vinkt “Maat L” aan. Weer herladen, weer bovenaan. Na “Blauw” en “Waterdicht” heeft hij zo’n tweehonderd keer op Tab gedrukt. Voor een muisgebruiker kost hetzelfde vier klikken. Zo voelt een webshopfilter dat niet is gebouwd met toetsenbord en screenreader in gedachten. Toegankelijke filters in uw webshop maken dit verschil weer klein.

Wat er meestal misgaat

Filters zijn een van de complexere onderdelen van een webshop. De problemen die we het vaakst zien:

• Nep-checkboxes. Een gestileerd vierkantje in een <div> of een link die eruitziet als vinkje. Niet bereikbaar met Tab, of voorgelezen als “link” zonder te zeggen of hij aan of uit staat.
• Automatisch herladen bij elke keuze, waardoor de focus verloren gaat.
• Geen groepsnaam. Een screenreader hoort “L, selectievakje, niet ingeschakeld”, maar niet dat het om de maat gaat.
• Kleur alleen als kleurvlak. Een rood bolletje zonder tekst is voor een screenreader en voor mensen met kleurenblindheid geen informatie.
• Geen terugkoppeling. Na filteren verandert de productlijst, maar niemand vertelt hoeveel producten er over zijn.
• Prijsschuiven die alleen met slepen werken.

De basis: echte checkboxes in een groep

Een filter is in wezen een formulier. Gebruik daarom gewone formulierelementen. Een groep keuzes krijgt een <fieldset> met een <legend>:

<fieldset>
  <legend>Maat</legend>
  <input type="checkbox" id="maat-m" name="maat" value="m">
  <label for="maat-m">M <span class="aantal">(12)</span></label>
  <input type="checkbox" id="maat-l" name="maat" value="l">
  <label for="maat-l">L <span class="aantal">(8)</span></label>
</fieldset>

Een screenreader leest nu “Maat, groep. M, 12, selectievakje, niet ingeschakeld”. Het label is klikbaar, wat ook het klikgebied groter maakt. U kunt de checkbox visueel helemaal restylen, zolang het echte element in de code blijft en de focus zichtbaar is.

Moet er maar één keuze tegelijk mogelijk zijn, zoals bij sorteren, gebruik dan radioknoppen of een keuzelijst. Klapt een filtergroep in en uit, gebruik dan een knop met aria-expanded als kop van de groep.

Direct filteren of eerst kiezen?

Hier zit de belangrijkste ontwerpkeuze. WCAG-criterium 3.2.2 (bij invoer) zegt dat het veranderen van een instelling geen onverwachte verandering van context mag veroorzaken, tenzij de gebruiker vooraf is gewaarschuwd. Een volledige paginaherlaad na het aanvinken van één vakje is zo’n contextwijziging.

Aanpak	Voordeel	Let op
Knop “Toon resultaten” na het kiezen	Eenvoudig en voorspelbaar, meerdere filters tegelijk	Eén klik extra voor muisgebruikers
Direct filteren zonder herladen	Snel voor iedereen	Focus moet op het vakje blijven, resultaat moet worden gemeld
Direct filteren met herladen	Simpel te bouwen	Focus gaat verloren, in strijd met verwachting

De derde variant is de lastigste. Kunt u er niet omheen, zet dan na het laden de focus terug op de filtergroep of op een melding met het aantal resultaten, en zeg vooraf dat de pagina herlaadt. Op mobiel, waar filters vaak in een paneel staan, is een knop “Toon 24 producten” onderaan het paneel meestal het prettigst voor iedereen.

Het aantal resultaten melden

Filtert u zonder herladen, dan verandert de productlijst stil. Voeg een live-regio toe die het nieuwe aantal meldt:

<p role="status" id="filter-melding"></p>
<!-- na filteren gevuld met: -->
<!-- "24 producten gevonden" -->

Houd de melding kort, en laat niet de hele productlijst voorlezen. Bij “0 producten gevonden” helpt een tip, zoals welk filter u kunt weghalen. Hoe live-regio’s werken en wat er mis kan gaan, staat in statusberichten die een screenreader meldt.

De aantallen achter elke keuze, zoals “(12)”, zijn ook nuttig. Dan weet de bezoeker vooraf of een filter iets oplevert.

Kleur, prijs en actieve filters

Kleurfilters

Een rij gekleurde bolletjes is mooi, maar zet de kleurnaam erbij, als zichtbaar label of in elk geval in het label voor de screenreader. “Donkerblauw” en “Marineblauw” zijn voor veel mensen niet van elkaar te onderscheiden op het scherm. Zie ook kleur als enige informatie.

Prijsfilters

Een prijsschuif met twee bolletjes moet ook zonder slepen werken, bijvoorbeeld met twee invoervelden “van” en “tot”. Dat vraagt WCAG 2.2 met criterium 2.5.7, en het is voor veel bezoekers sowieso sneller.

Actieve filters tonen

Laat boven de producten zien welke filters aan staan, met per filter een knop om hem te verwijderen: “Maat L verwijderen”. Een knop “Alle filters wissen” erbij scheelt veel tabben.

Het filterpaneel op mobiel

Op een telefoon staan filters meestal achter een knop “Filteren”, in een paneel dat over de pagina schuift. Dat paneel is in feite een modaal venster. Geef de knop een duidelijke naam, zet de focus na het openen in het paneel, houd hem daar zolang het open is en zorg dat Escape en een zichtbare sluitknop het paneel sluiten. Na het sluiten hoort de focus terug te komen op de knop “Filteren”, niet bovenaan de pagina. Toon op die knop eventueel hoeveel filters er actief zijn, bijvoorbeeld “Filteren (2 actief)”.

WooCommerce en filterplugins

WooCommerce heeft eigen filterblokken, en daarnaast zijn er diverse filterplugins. Hun toegankelijkheid verschilt sterk per plugin en per versie. Sommige gebruiken echte checkboxes en melden resultaten, andere tekenen alles met links en herladen bij elke klik. Test vóór u kiest, met de stappen hieronder. Bij die keuze speelt ook snelheid een rol: zware filters kunnen een categoriepagina flink vertragen. Daarover gaat productfilters in WooCommerce snel houden.

Filters en zoeken horen bij elkaar: wie niet vindt wat hij zoekt via de filters, typt het in. Zorg dat ook dat zoekveld voor iedereen werkt, zie een toegankelijke zoekfunctie.

Toegankelijke filters in uw webshop zelf testen

1. Ga naar een categoriepagina en leg de muis weg.
2. Tab naar de filters. Ziet u steeds waar de focus staat?
3. Vink met de spatiebalk een filter aan. Blijft de focus op dat vakje, of springt hij weg?
4. Zet een screenreader aan en luister: hoort u de groepsnaam, de optie en of die aan staat?
5. Hoort u na het filteren hoeveel producten er zijn?
6. Stel een prijsbereik in zonder te slepen.
7. Herhaal op een telefoon: kunt u het filterpaneel openen, gebruiken en weer sluiten?

Filters zijn een onderdeel van de bredere aanpak voor webshops. Op de pagina uw webshop toegankelijk maken leest u hoe filters samenhangen met productpagina, winkelwagen en checkout. Voor het totaalbeeld is er onze pagina over een toegankelijke website.