Knoppen en links die puur uit een icoontje bestaan – zoals een vergrootglas of een prullenbak – maken je ontwerp modern en strak. Voor mensen met een visuele beperking die voorleessoftware gebruiken, leveren ze echter problemen op. De schermlezer ziet de visuele context niet en leest enkel “knop” voor, waardoor de bezoeker geen idee heeft wat de actie precies inhoudt.
Met deze handige ARIA-Label Generator los je dit toegankelijkheidsprobleem gelukkig razendsnel en in slechts drie simpele stappen op. De tool helpt je allereerst bepalen óf je überhaupt extra code nodig hebt voor je gekozen element. Is dat het geval? Dan genereert hij direct de juiste, foutloze HTML-code die je veilig in je website kunt kopiëren en plakken.
Genereer toegankelijke code voor iconen en knoppen.
aria-label nodig. Schermlezers lezen de zichtbare tekst al voor. Extra ARIA toevoegen zorgt voor verwarring.
ARIA staat voor Accessible Rich Internet Applications. Een aria-label is een stukje onzichtbare code dat je toevoegt aan een HTML-element. Het fungeert als een tekstueel alternatief voor visuele elementen, zodat schermlezers de context hardop kunnen voorlezen aan de gebruiker.
Nee, absoluut niet! Sterker nog: de eerste regel van ARIA is “Gebruik geen ARIA als het niet hoeft”. Heeft je knop al duidelijk zichtbare tekst, zoals “Lees meer” of “Verzenden”? Dan is een ARIA-label overbodig en kan het zelfs voor verwarring zorgen bij de voorleessoftware.
Je gebruikt het vrijwel uitsluitend wanneer de functie van een interactief element alleen visueel duidelijk is. Het klassieke voorbeeld is een “hamburger menu” (drie streepjes) of een sluit-kruisje (X) in een pop-up.
Indirect, ja. Google hecht steeds meer waarde aan de toegankelijkheid en gebruiksvriendelijkheid van websites. Daarnaast helpt een beschrijvend label de zoekmachine-bots om de context en functie van iconen-links beter te begrijpen.
Wil je sparren hoe we jouw organisatie het beste kunnen helpen? Plan een intakegesprek of vraag een offerte aan.