Alleen-pictogramknop

Silktide zoekt naar knoppen en links die alleen met een pictogram zijn gelabeld — zoals een kruisje om te sluiten, een hamburgermenu of een vergrootglas voor zoeken — zonder tekstnaam voor mensen die het pictogram niet kunnen zien.

<!-- Probleem: niets kondigt aan wat deze knop doet -->
<button><svg>…</svg></button>

<!-- Oplossing: geef de knop een naam -->
<button aria-label="Menu openen"><svg>…</svg></button>

Waarom dit belangrijk is

Ziende gebruikers begrijpen aan de hand van de vorm en context wat een pictogramknop doet. Gebruikers van een hebben geen vergelijkbare terugvaloptie: zonder een kondigt hun software een naamloze ‘knop’ of ‘link’ aan, of leest achtergebleven code voor, zoals de CSS-klassenaam van een pictogram. Elke alleen-pictogramknop zonder naam is een knop die deze gebruikers blind moeten activeren of helemaal moeten overslaan — en dit zijn vaak de belangrijkste knoppen op de pagina: menu’s, zoeken, sluiten en volgende.

Zo los je dit op

Voeg een -label toe waarin wordt beschreven wat de knop doet, niet hoe het pictogram eruitziet: aria-label="Zoeken", niet aria-label="Vergrootglas".
Als dezelfde tekst al als zichtbare tekst in de buurt staat, verwijs er dan met aria-labelledby naar in plaats van de tekst te dupliceren.
Als het pictogram een <img> is, geef het dan betekenisvolle alt-tekst; daarmee krijgt de knop ook een naam.
Als de knop niets nuttigs doet en alleen ter decoratie aanwezig is, maak hem dan niet-interactief in plaats van hem een naam te geven.

Zo test Silktide dit

Zoek op elke pagina naar de zichtbare knoppen, links en bedieningselementen voor het weergeven of verbergen van inhoud, inclusief elementen met role="button" of role="link".
Sla elke knop over die al een naam heeft: zichtbare tekst van 2 of meer tekens, een aria-label, een aria-labelledby of een title-attribuut.
Controleer of de overgebleven knoppen een pictogram bevatten: een inline SVG, een afbeelding met lege alt-tekst of tekst die wordt weergegeven in een herkend pictogramlettertype.
Rapporteer knoppen die wel een pictogram tonen maar geen naam hebben.

Problemen oplossen

De knop heeft op een andere manier een label

Silktide houdt rekening met aria-label, aria-labelledby, title, zichtbare tekst en alt-tekst van afbeeldingen. Als je knop via een andere methode een naam krijgt — wat zelden voorkomt — controleer dan met een schermlezer of de naam daadwerkelijk wordt aangekondigd en de bevinding goed als dat zo is.

Het pictogram is decoratief en staat naast tekst

Knoppen met betekenisvolle zichtbare tekst worden niet gerapporteerd, ook niet als er naast de tekst een pictogram staat. Als een knop wel werd gerapporteerd, bestond de tekst uit minder dan 2 betekenisvolle tekens — tekst met één teken, zoals ‘×’, telt niet als label.