Label in naam

Wat het vraagt

Als een knop op het scherm „Aanvraag indienen“ staat, moet een gebruiker van stembesturing „klik op Aanvraag indienen“ kunnen zeggen en de klik laten landen. Dat werkt alleen wanneer het zichtbare label deel uitmaakt van de toegankelijke naam — bij voorkeur als de eerste woorden. Als de toegankelijke naam „Formulier verzenden“ is terwijl de zichtbare tekst „Aanvraag indienen“ luidt, mislukt de spraakopdracht stilzwijgend.

WCAG vereist dat het zichtbare tekstlabel deel uitmaakt van de toegankelijke naam. De toegankelijke naam mag meer bevatten (verduidelijkende context), maar de zichtbare tekst moet er in staan, in dezelfde woordvolgorde.

Hoe te voldoen

• Doe voor knoppen en links met tekst niets bijzonders — de tekstinhoud wordt automatisch de toegankelijke naam.
• Wanneer u een aria-label toevoegt aan een besturingselement dat al zichtbare tekst heeft, neem dan de zichtbare tekst aan het begin op: <button aria-label="Aanvraag indienen — opent bevestiging">Aanvraag indienen</button>.
• Laat voor knoppen met pictogram en tekst de tekst de naam bepalen. Overschrijf deze niet met een pictogram-enkel aria-label.
• Voor links waarvan de tekst „Lees meer“ luidt, breidt u de toegankelijke naam uit met aria-label="Lees meer over WCAG 2.2 — volledig artikel" zodat het zichtbare „Lees meer“ nog steeds het voorvoegsel is.
• Wanneer het zichtbare label van een besturingselement een afbeelding is (pictogram met tekstoverlay, logo), zorg dan dat de alt-tekst exact overeenkomt met de zichtbare tekst.

Veelvoorkomende fouten

• Een knop met de tekst „Zoeken“ met aria-label="Vinden". Stemgebruikers zeggen „klik op Zoeken“ en er gebeurt niets.
• Knoppen „Toevoegen aan winkelwagen“ met aria-label="Blauw T-shirt maat M aan uw winkelwagen toevoegen" — uitgebreide naam, het zichtbare „Toevoegen aan winkelwagen“ is niet langer het voorvoegsel. De spraakopdracht „klik op Toevoegen aan winkelwagen“ mist.
• Knoppen met pictogram en tekst waarbij de ontwerper aria-label="winkelwagenpictogram" heeft toegevoegd en de zichtbare tekst „Afrekenen“ heeft overschreven.
• Gelokaliseerde sites waar de zichtbare tekst is vertaald maar het aria-label nog steeds in het Engels is.
• Zwevende actieknoppen die zichtbaar „Chat“ tonen maar aria-label="Ondersteuningswidget openen" bevatten.

Waarom het belangrijk is

Dit is het succescriterium dat toegankelijkheid bepaalt voor gebruikers van stembesturing — mensen die Dragon NaturallySpeaking, Spraakbesturing op iOS/macOS, Voice Access op Android of Windows-spraakherkenning gebruiken. Voor deze gebruikers is het zichtbare label de opdracht. Een discrepantie is niet een kleine ongemak; het is het verschil tussen bedienbaar en niet bedienbaar. Het helpt ook schermlezergebruikers om mee te volgen wanneer een ziende helper zegt „klik op de knop Opslaan“ — de aankondiging komt overeen met de woorden op het scherm. 2.5.3 is eenvoudig te repareren en eenvoudig over het hoofd te zien, omdat geautomatiseerde tools het zelden signaleren: een ontwikkelaar die de code leest, ziet een aria-label en neemt aan dat dat goed is. Controleer altijd de toegankelijke naam aan de hand van de zichtbare tekst.