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. Wanneer de gebruiker iets in de zoekbalk typt, verschijnt er een 'x' aan de rechterkant van het invoerveld. Als je op deze 'x' klikt, wordt de eerder getypte tekst gewist en kun je de placeholder in het invoerveld weer zien. Het probleem is dat gebruikers die een toetsenbord of schermlezer gebruiken, nooit de focus op deze 'x' kunnen plaatsen. Ze kunnen wel de focus op de zoekbalk zetten en daarna op de Zoeken-knop, maar nooit op de 'x'. Als ze dus willen verwijderen wat ze eerder hebben getypt, moeten ze dit handmatig wissen.
Mogelijke verbeteringen: Voeg een toegankelijke naam toe aan de 'X'-knop met behulp van een toegankelijk label of door aria-label='Zoekopdracht wissen' te gebruiken. Zorg ervoor dat gebruikers deze 'X'-knop kunnen bereiken via tab-navigatie. Als er geen standaard button-element wordt gebruikt voor het 'X'-element, voeg dan role='button' toe aan het element dat als knop fungeert, zodat het duidelijk is dat het als knop werkt voor hulptechnologieën.
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 2.1.1 Keyboard
Level A
Referentieafbeelding:
Referentienummer: A161
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. Wanneer de gebruiker iets in de zoekbalk typt, verschijnt er een 'x' aan de rechterkant van het invoerveld. Als je op deze 'x' klikt, wordt de eerder getypte tekst gewist en kun je de placeholder in het invoerveld weer zien. Het probleem is dat gebruikers die een toetsenbord of schermlezer gebruiken, nooit de focus op deze 'x' kunnen plaatsen. Ze kunnen wel de focus op de zoekbalk zetten en daarna op de Zoeken-knop, maar nooit op de 'x'. Als ze dus willen verwijderen wat ze eerder hebben getypt, moeten ze dit handmatig wissen.
Mogelijke verbeteringen: Voeg een toegankelijke naam toe aan de 'X'-knop met behulp van een toegankelijk label of door
aria-label='Zoekopdracht wissen'te gebruiken. Zorg ervoor dat gebruikers deze 'X'-knop kunnen bereiken via tab-navigatie. Als er geen standaard button-element wordt gebruikt voor het 'X'-element, voeg danrole='button'toe aan het element dat als knop fungeert, zodat het duidelijk is dat het als knop werkt voor hulptechnologieën.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 2.1.1 Keyboard
Level A
Referentieafbeelding:
Referentienummer: A161