the searchbar has a hidden label and disappearing placeholder

[savitris]

Dit probleem kan op meerdere pagina's aanwezig zijn, waaronder:
Developer Portal van de Nederlandse Overheid

Probleembeschrijving:
Probleem: Er is een zoekbalk in een Hero-component. De zoekbalk heeft een placeholder in het invoerveld en ook een label met dezelfde informatie, maar het label is verborgen. Dit betekent dat de informatie in de placeholder niet altijd zichtbaar is voor de gebruiker, omdat deze verdwijnt zodra ze beginnen met typen. En omdat de inhoud van het label niet zichtbaar is, weet de gebruiker dan niet meer waar het veld voor dient.

Mogelijke verbeteringen: Zorg ervoor dat het label gedurende het hele interactieproces zichtbaar blijft door de 'visual-hidden' klasse niet te gebruiken. Plaats het label duidelijk boven of naast het invoerveld.

Een alternatief is om een zwevend label te implementeren, waarbij de placeholdertekst verandert in een zichtbaar label boven het veld zodra de gebruiker begint met typen (een voorbeeld hiervan is te zien in de 'Registreren' modal van het Developer's Overheid Discourse forum).

Referentiecode:
<form action="/zoeken" method="get" class="heroSearch_pBtb"><label class="visual-hidden" for="banner-search">Zoek in de Kennisbank, API- en OSS-register</label><input name="q" id="banner-search" placeholder="Zoek in de Kennisbank, API- en OSS-register" type="search" class="utrecht-textbox utrecht-textbox--html-input heroSearchInput_H9uK" dir="auto"><button class="utrecht-button utrecht-button--submit utrecht-button--subtle rhc-button rhc-button--icon-only heroSearchButton_d3N8" type="submit"><span class="rhc-button__sr-only">Zoeken</span><svg xmlns="http://www.w3.org/2000/svg" id="Laag_1" viewBox="0 0 24 24" width="1em" height="1em" data-icon-name="zoek-inline"><defs><clipPath id="clippath"><path d="M0 0h24v24H0z" class="cls-1"></path></clipPath><clipPath id="clippath-1"><path d="M0 0h24v24H0z" class="cls-1"></path></clipPath><style>.cls-1{fill:none}</style></defs><g style="clip-path:url(#clippath)"><path d="m20.59 17.77-4.54-4.53c.52-.96.81-2.07.81-3.24 0-3.78-3.07-6.85-6.85-6.85S3.16 6.22 3.16 10s3.07 6.85 6.85 6.85c1.15 0 2.24-.29 3.2-.8l4.55 4.55c.71.71 1.87.71 2.58 0l.25-.25c.71-.71.71-1.87 0-2.58M5.87 10c0-2.29 1.86-4.15 4.15-4.15s4.15 1.86 4.15 4.15-1.86 4.15-4.15 4.15S5.87 12.29 5.87 10" style="clip-path:url(#clippath-1)"></path></g></svg></button></form>

Gerelateerde WCAG:
WCAG 3.3.2 Labels or instructions
Level A

Referentieafbeelding:

Referentienummer: A162