Een zoekveld dat op kleine schermen buiten beeld valt

Een zoekveld valt meestal om één van drie redenen buiten beeld. Het zit in een rij met vaste breedtes die samen breder zijn dan het scherm. Een label of knoptekst is in een andere taal langer en duwt het veld weg. Of de pagina laat horizontaal scrollen toe, waardoor het veld bestaat maar buiten het zichtbare deel valt.

Het is een bruikbaarheids- en toegankelijkheidsprobleem, geen puur esthetische kwestie. De toegankelijkheidstutorials van het W3C leggen uit dat inhoud moet werken voor mensen met verschillende beperkingen en dat dit ook de gebruikservaring voor iedereen verbetert (toegankelijkheidstutorials). Een zoekveld dat je niet bereikt, is voor een bezoeker met vergrote tekst of een kleinere telefoon hetzelfde als een veld dat niet bestaat.

Let ook op laadgedrag. De algemene prestatiedocumentatie van MDN beschrijft hoe browsers een pagina opbouwen en dat zowel gemeten als ervaren snelheid telt (webprestaties). Een zoekveld dat pas laat verschijnt of nog verspringt, wordt ook als traag ervaren.

Test niet op één apparaat. Stel een kleine testmatrix op en loop die af in je eigen browser en op echte toestellen als je die hebt.

1. Open de pagina op de smalste schermbreedte die je ondersteunt. Gebruik de apparaatemulatie van je browser en bevestig bij twijfel op een echt toestel.
2. Zoom de pagina in tot tekstvergroting. Controleer of het zoekveld in beeld blijft zonder horizontaal te scrollen.
3. Wissel van taalversie, bijvoorbeeld Nederlands naar Frans, en kijk of labels en knoppen het veld wegduwen.
4. Draai het scherm tussen staand en liggend.
5. Noteer per combinatie: veld zichtbaar, veld bereikbaar, horizontale scroll aanwezig, label afgekapt.

Schrijf de bevindingen per combinatie op. Zo zie je meteen of het probleem breed speelt of alleen bij één taal of breedte, en kun je gericht herstellen in plaats van gokken.

Reflow betekent dat inhoud zich aanpast aan de beschikbare breedte zonder horizontaal te hoeven scrollen. Een zoekveld met een vaste breedte in pixels is de klassieke boosdoener. Controleer in de stijlen van je thema of plugin of het veld een vaste breedte heeft, of de container een minimumbreedte afdwingt, en of elementen naast het veld krimpen of mogen terugvallen naar een volgende regel.

Het veld of de container moet zich kunnen aanpassen. Een veld dat op smalle schermen de volledige beschikbare breedte inneemt en een knop die eronder mag komen, is robuuster dan alles op één rij te dwingen. Laat het label ook toe om af te breken over meerdere regels in plaats van af te kappen.

Een tweede punt is verborgen inhoud. Verbergt je site het zoekveld achter een pictogram op mobiel, dan moet dat pictogram zelf in beeld en bedienbaar zijn, en moet het uitgeklapte veld daarna ook zichtbaar blijven. Test beide toestanden apart.

Een zichtbaar veld is niet automatisch bruikbaar. Loop de bediening zonder muis na. Kun je met de tabtoets bij het zoekveld of het zoekpictogram komen? Is duidelijk zichtbaar waar de focus staat? Opent het veld met Enter of spatie als het achter een knop zit, en sluit het weer netjes?

Het veld heeft ook een betekenisvol label nodig, ook als je visueel alleen een pictogram toont. Een schermlezer kondigt anders mogelijk alleen 'knop' of 'invoerveld' aan. Controleer of de naam van de knop overeenkomt met wat er gebeurt, en of die naam in elke taalversie vertaald is. De toegankelijkheidstutorials van het W3C bieden voorbeelden voor formulieren en knoppen die je als referentie kunt gebruiken (toegankelijkheidstutorials).

Test minstens één keer met een schermlezer op je eigen toestel, en wees eerlijk over de grens daarvan: één test dekt niet alle combinaties van lezer en browser. Een publieke scan of een snelle blik meet bovendien geen volledige implementatie, dus dit blijft handmatig werk. Deze controle bewijst bovendien geen volledige WCAG-conformiteit.

Gebruik de tabel om vast te stellen welke ingreep bij welke bevinding past.

Een fictief voorbeeld, zonder echte resultaten: een webshop heeft een Nederlandse en een Franse versie. Het overdrachtsblad voor de ontwikkelaar bevat als invoer: 'zoekveld op de smalste breedte, standaard en met vergrote tekst, in beide talen, staand en liggend'. De verwachte controles zijn: veld zichtbaar zonder horizontale scroll, label niet afgekapt, bereikbaar met tab, knop heeft een vertaalde naam. Wat de uitkomst wordt, hangt van de eigen site af en wordt pas na de test genoteerd.

Herhaal na elke wijziging exact dezelfde testmatrix, anders weet je niet of je iets hebt opgelost of verplaatst. Vink per combinatie af, en test ook de pagina's die het zoekveld delen, zoals de startpagina, categoriepagina's en de zoekresultaten zelf.

Let op een bijwerking. Een flexibele breedte kan elders in de header iets laten verspringen. Controleer daarom ook of de pagina nog stabiel laadt. De prestatiecursus van web.dev behandelt onder meer hoe de kritieke weergavevolgorde en resourcelading de ervaring van een pagina bepalen (cursus over prestaties). Die bron helpt bij het begrijpen waarom een laat ingeladen element kan verspringen, maar geeft geen vast stappenplan voor jouw thema.

Wil je eerst zien welke signalen van je site publiek zichtbaar zijn, bekijk ze dan via Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt de handmatige test op toestellen en met toetsenbord niet.