Goede praktijken

Knoppen zonder toegankelijke naam: de meest voorkomende fout van scanners

Icoonknoppen zonder toegankelijke naam (zoekglas, winkelwagen, kruis, hamburgermenu) zijn de meest gedetecteerde fout in toegankelijkheidsscans. Voor een schermlezergebruiker hoort deze alleen „knop” zonder context. Ontdek de vier technieken om ze te corrigeren.

Cijfers, methodologie en hergebruiksvoorwaarden: bekijk de citeerbare data →

La réponse courte

Een SVG-pictogramknop of afbeelding zonder het attribuut aria-label, aria-labelledby of zichtbare tekst blijft onzichtbaar voor een schermlezer. De gebruiker hoort alleen „knop”. Om dit te verhelpen: voeg aria-label toe voor een korte label, gebruik zichtbare tekst als de ruimte het toelaat, of aria-labelledby om te koppelen aan aanwezige tekst. Controleer met F12: het tabblad Toegankelijkheid moet de naam van de knop weergeven.

Waarom dit gebrek kritiek is

Knoppen zonder toegankelijke naam behoren tot de meest voorkomende WCAG-schendingen in de Verenigde Staten, volgens openbare gegevens van compliancebureaus. De specifieke W3C-regel (« Image button has non-empty accessible name ») is overal van toepassing: een zoekloep, een winkelmandje, een sluitkruis, een carrouselpijltje, een sociale-media-icoon, ze vereisen allemaal een hoorbare naam.

Dit artikel baseert zich op de Inclaria-studie 2026: van de 55 geanalyseerde Franse e-commercewebsites vertoont 94,5 % minstens één kritieke of ernstige niet-conformiteit. Slecht benoemde icoonknoppen staan bovenaan de lijst van gedetecteerde overtredingen, vaak op meerdere pagina’s van dezelfde site.

Wat een schermlezergebruiker hoort

Stel je voor dat je navigeert zonder het scherm te zien. Wanneer je bij een zoekknop zonder toegankelijke naam komt, kondigt je schermlezer simpelweg „Knop” aan, en stopt dan. Geen context, geen aanwijzing over de actie. Je moet de schermlezer verlaten, de browserinspecteur openen of externe documentatie raadplegen om te begrijpen waar het om gaat.

Hetzelfde scenario met een winkelmandje dat alleen als SVG-pictogram wordt weergegeven, een sluitkruisje van een modal of pijlen om door een carrousel te navigeren. Elke stomme knop creëert een zone van onzekerheid voor de gebruiker. Op een website met 15 of 20 slecht benoemde pictogramknoppen, bouwt de wrijving zich snel op: sommige gebruikers haken af.

De vier technieken om een knop een naam te geven

1. Zichtbare tekst met verborgen zichtbaarheid (sr-only)

Voeg een span-element met de klasse sr-only toe dat het label bevat. Onzichtbaar op het scherm, maar hoorbaar voor schermlezers.

Code

Knop met een SVG-zoekpictogram en een span-element van de klasse « sr-only » met de tekst « Zoeken ».

Voordeel: de tekst staat ook in de DOM, dus technisch gezien doorzoekbaar voor een zoekmachine. Nadeel: veronderstelt dat een CSS-klasse sr-only in uw stylesheet is gedefinieerd.

2. aria-label

Direct attribuut op de knop: aria-label=« Zoeken ». Kort, eenvoudig en heeft geen invloed op de visuele DOM.

Voordeel: minimalistisch, snel toe te voegen. Nadeel: afwezig in de zichtbare tekst, dus onzichtbaar voor kopiëren-plakken en SEO-tekst.

3. aria-labelledby

Koppelt de knop aan een ander tekstelement in de DOM via een identificator: aria-labelledby=« search-label ». Ideaal wanneer er al relevante tekst op de pagina aanwezig is.

Voordeel: verwijst naar daadwerkelijke inhoud, traceerbaar. Nadeel: vereist dat de brontekst bestaat en voorzien is van een unieke id.

4. Attribuut alt op input type=image

Als u een invoerveld van het type image gebruikt met de bron « search.png » en de alternatieve tekst « Zoeken », dient het alt-attribuut direct als toegankelijke naam.

Voordeel: native semantiek. Nadeel: verouderde oplossing in modern HTML, zelden aanbevolen.

Wanneer elk gebruiken? Beslissingsmatrix

Valkuilen

Het attribuut title volstaat niet

Veel ontwikkelaars denken ten onrechte dat het attribuut title=« Zoeken » op een knop voldoende is om deze een naam te geven. In werkelijkheid is title een attribuut voor een hint bij hover (tooltip), geen toegankelijke naam. Schermlezers negeren dit, behalve in zeer beperkte gevallen. Reken er niet op.

aria-label in een vreemde taal

Als uw inhoud meerdere talen combineert, let op: aria-label gebruikt altijd de taal van de pagina. Een aria-label=« Search » op een Franse site wordt door de schermlezer in het Frans uitgesproken. Geef de voorkeur aan zichtbare tekst of zorg ervoor dat aria-label de lokale taal respecteert.

De valkuil 2.5.3: « Label in Name »

Een subtiele valkuil: als een knop zichtbare tekst heeft (bijv. « OK »), moet het aria-label beginnen met dezelfde tekst of deze bevatten. Een knop met « OK » en aria-label=« Bevestigen » creëert een inconsistentie die gebruikers van spraakopdrachten (« klik op OK ») niet kunnen activeren. Stem de toegankelijke naam af op de zichtbare tekst.

SVG zonder passende role

Een SVG op zich is slechts een afbeelding. Plaats deze altijd in een semantisch element (button, a) of voeg role=« button » toe. Zonder dit kan de schermlezer het negeren of als afbeelding aankondigen.

Hoe u het in twee minuten kunt controleren

Open uw pagina in een moderne browser (Chrome, Firefox, Safari).

• Druk op F12 (of klik met de rechtermuisknop en kies Inspecteren).
• Zoek het icoonknopje in de HTML.
• Open het tabblad Accessibility (Chrome, Edge, Firefox).
• Controleer het veld Accessible Name: dit moet een duidelijke tekst weergeven (bijv. « Zoeken », « Winkelwagen »). Als het leeg is of « button » zegt, ontbreekt een naam.

Of navigeer met het toetsenbord (Tab) naar de knop en test met een gratis schermlezer.

Test met toetsenbord en schermlezer

Op Windows is NVDA (gratis, open source) betrouwbaar. Op Mac is VoiceOver voorgeïnstalleerd (Cmd+F5). Doorloop uw site: elke icoonknop moet zijn naam duidelijk omroepen. Als u alleen « knop » hoort, corrigeer dit dan.

Praktische voorbeelden: vergrootglas, winkelwagen, kruis, pijlen

Loupe de recherche

Een knop met aria-label=« Zoeken » met een SVG-pictogram is de standaardaanpak. Kort en duidelijk. Als u verborgen tekst gebruikt: gebruik een knop met het SVG-pictogram en een span-element met de klasse « sr-only » en de tekst « Zoeken ».

Panier d'achat

Geef de voorkeur aan aria-label=« Winkelwagen » of aria-label=« Bekijk winkelwagen (2 artikelen) ». Een aantal artikelen kan de context verrijken zonder de aankondiging te overladen.

Croix de fermeture

Een knop met aria-label=« Sluiten » met een SVG-pictogram van een kruis is klassiek. Eenvoudige tekst, zonder jargon.

Chevrons de carrousel

Knoppen met aria-label=« Volgend item » en aria-label=« Vorig item » leiden de gebruiker. Vermijd generieke termen zoals « Volgende » of « Vorige » alleen; wees specifiek: « Vorige slide van de carrousel ».

Icônes sociales

Een link met aria-label=« Volg ons op X (Twitter) » of een knop met aria-label=« Delen op LinkedIn » maakt het doelnetwerk expliciet.

Intégration dans votre démarche de conformité

Knoppen zonder toegankelijke naam zijn het meest voorkomende probleem dat door geautomatiseerde scans wordt gedetecteerd. Als u een toegankelijkheidsaudit van uw website uitvoert, zal deze overtreding vrijwel zeker naar voren komen, vaak met tientallen gevallen.

Het goede nieuws: het is eenvoudig en snel te verhelpen. Zodra u het patroon begrijpt, kunt u uw codebase controleren, de pictogramknoppen binnen enkele uren repareren en de impact meten: een aanzienlijk deel van uw toegankelijkheidsscore verbetert onmiddellijk.

Een effectieve strategie: start een geautomatiseerde scan (Inclaria, aXe, WAVE), sorteer de resultaten op ernst en begin met knoppen zonder toegankelijke naam. Dit alleen al verwijdert een aanzienlijk deel van de kritieke niet-conformiteiten op veel websites. Ga vervolgens verder met handmatige tests en structurele tekortkomingen (toetsenbordnavigatie, tabvolgorde, contrasten).