Een zoekfunctie toegankelijk maken: zoeken dat voor iedereen werkt

“Bij ons is het zoekveld alleen een vergrootglas, met een vak dat openklapt als u erop klikt. Is dat een probleem?” Die vraag krijgen we regelmatig van webshops. Het korte antwoord: het hoeft geen probleem te zijn, maar meestal is het dat wel. Het vergrootglas heeft geen naam, het vak heeft geen label, en na het zoeken weet een screenreadergebruiker niet of er iets gevonden is. Een zoekfunctie toegankelijk maken gaat over vier dingen: het veld, de knop, de resultaten en de fouten die mensen maken.

Het zoekveld: een label dat blijft

Elk invoerveld heeft een label nodig dat een screenreader voorleest. Bij zoekvelden ontbreekt dat vaak, omdat ontwerpers het visueel overbodig vinden. De placeholder “Zoeken…” in het vak lijkt een label, maar verdwijnt zodra iemand begint te typen, heeft vaak te weinig contrast en wordt niet door alle hulpmiddelen als naam gebruikt. Waarom dat lastig is, leest u in de placeholder als label.

Een nette basis:

<form role="search" action="/">
  <label for="zoek">Zoeken op de site</label>
  <input id="zoek" type="search" name="s">
  <button type="submit">Zoeken</button>
</form>

Wilt u het label niet zichtbaar, verberg het dan visueel met een klasse als sr-only, maar laat het in de code staan. Een zichtbaar label is wel de beste keuze. Het helpt ook mensen met een cognitieve beperking en spraakbediening: wie “klik Zoeken” zegt, moet een veld of knop vinden die zo heet.

role="search" op het formulier, of het nieuwere <search>-element, maakt de zoekfunctie een herkenningspunt. Screenreadergebruikers springen er dan met één toets naartoe.

De knop: een echte knop met een naam

Het vergrootglas moet een <button> zijn. Heeft het geen zichtbare tekst, geef het dan een verborgen naam, bijvoorbeeld “Zoeken”. Een icoon in een link, of een icoon zonder naam, wordt voorgelezen als “knop” of “link” en verder niets.

Klapt het zoekveld pas open na een klik op het vergrootglas, dan zijn er twee knoppen: één om het veld te openen en één om te zoeken. Geef de eerste een naam als “Zoekveld openen” en aria-expanded, en zet de focus na het openen direct in het veld. Eenvoudiger is het om het zoekveld gewoon altijd zichtbaar te maken. Bij een webshop, waar een groot deel van de bezoekers zoekt, is dat vaak ook commercieel de betere keuze.

Zorg dat Enter in het veld de zoekopdracht verstuurt. Dat gaat vanzelf als het veld in een <form> staat; bij zelfgebouwde zoekvakken zonder formulier wordt het nog wel eens vergeten.

Suggesties tijdens het typen

Veel zoekvelden tonen suggesties terwijl u typt. Dat is handig, maar technisch het lastigste deel. Een paar eisen:

• De suggesties zijn met de pijltjestoetsen te kiezen, en Escape sluit de lijst.
• Een screenreader hoort dat er suggesties zijn, bijvoorbeeld “5 suggesties beschikbaar”.
• De focus springt niet vanzelf naar de lijst; de gebruiker blijft gewoon typen tot hij zelf kiest.
• Een suggestie kiezen voert niet ongevraagd een actie uit die de gebruiker niet verwachtte.

Het patroon hiervoor heet een combobox. Het is lastig goed te bouwen. Gebruikt u een zoekplugin met suggesties, test die dan met een screenreader voordat u erop vertrouwt. Werkt het niet goed, dan is een gewoon zoekveld zonder suggesties beter dan een kapotte lijst.

De resultaten aankondigen

Na het zoeken moet duidelijk zijn wat er gebeurd is. Twee situaties:

De pagina herlaadt

Dan komt de bezoeker op een nieuwe pagina. Zorg voor een duidelijke paginatitel, zoals “Zoekresultaten voor ‘pannenset’ (14)”, en een kop bovenaan met dezelfde informatie. Dan hoort een screenreadergebruiker het meteen. Zo’n titel helpt ook wie meerdere tabbladen open heeft.

De resultaten verschijnen zonder herladen

Dan verandert er voor een screenreader niets, tenzij u het meldt. Gebruik een live-regio met een korte tekst: “14 resultaten voor pannenset”. Hoe dat werkt, leest u in statusberichten die een screenreader meldt.

In beide gevallen: geef de resultaten een duidelijke opbouw, bijvoorbeeld als lijst met een kop per resultaat, zodat iemand er snel doorheen kan.

Typfouten en geen resultaten

Een zoekfunctie die alleen exacte woorden herkent, sluit meer mensen uit dan u denkt. Mensen met dyslexie, mensen die Nederlands als tweede taal spreken, en iedereen die op een telefoon typt, maken spelfouten. Wie “pannenzet” intypt en “Geen resultaten” krijgt, denkt dat u het niet verkoopt.

• Vang veelgemaakte fouten en synoniemen op. “Bank” en “sofa”, “fiets” en “rijwiel”. Veel zoekplugins hebben hier instellingen voor.
• Bied een suggestie. “Bedoelde u: pannenset?”
• Maak de pagina zonder resultaten nuttig. Geen dood eind, maar tips, populaire categorieën en een manier om contact op te nemen.
• Laat de zoekterm in het veld staan, zodat de bezoeker hem kan aanpassen zonder alles opnieuw te typen.

De standaard zoekfunctie van WordPress is vrij letterlijk: geen tolerantie voor typfouten en een eenvoudige volgorde. Voor een site met veel inhoud of een webshop kan een betere zoekplugin het verschil maken. Kijk dan wel naar de toegankelijkheid van wat die plugin op het scherm zet.

Is uw zoekfunctie toegankelijk? Nalopen in vijf minuten

1. Tab naar het zoekveld. Komt u er gemakkelijk, en ziet u de focus?
2. Luister met een screenreader: wordt het veld voorgelezen met een naam, en de knop ook?
3. Zoek iets wat bestaat. Hoort of ziet u hoeveel resultaten er zijn?
4. Zoek iets met een typfout. Wat krijgt u te zien?
5. Zoek iets wat niet bestaat. Kunt u verder?

Het zoekveld is ook een formulierveld, en volgt dus dezelfde regels als de rest. Meer daarover op de pagina over formulieren die voor iedereen werken. Voor de andere onderdelen van uw site is de overzichtspagina over een toegankelijke website het vertrekpunt.