Knoppen en links die puur uit een icoontje bestaan, zoals een vergrootglas of een prullenbak, maken een ontwerp modern en strak.
Voor mensen met een visuele beperking die schermlezers gebruiken, levert dit 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.
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.