Een ARIA-label is het aria-label-attribuut, een klein stukje HTML dat een element een naam geeft die door hulptechnologie wordt uitgesproken. Als een knop geen eigen zichtbare tekst heeft, heeft een schermlezer niets om aan te kondigen en zegt hij misschien alleen “knop”, zodat de gebruiker moet gokken. Het ARIA-label vult dat gat met een duidelijke naam als “Menu sluiten” of “In winkelwagen”.
Het klassieke voorbeeld is een knop met alleen een icoon, zoals een vergrootglas voor zoeken of een X om een pop-up te sluiten. Voor een ziende bezoeker is de betekenis duidelijk, maar een schermlezer ziet helemaal geen woorden. aria-label="Zoeken" toevoegen is als de naam onder een woordloos pictogram op een vliegveld schrijven: het symbool blijft, en nu weet iedereen wat het betekent. Het is een van de meest gebruikte onderdelen van ARIA, en het zit direct in je HTML-markup.
Het label is onzichtbaar op het scherm. Het verandert niets aan het uiterlijk van de pagina en beïnvloedt alleen wat er wordt voorgelezen, dus het kost niets in het ontwerp terwijl het icoon-gedreven interfaces bruikbaar maakt voor mensen die ze niet kunnen zien.
Er is een goede en een verkeerde manier om het te gebruiken. De naam beschrijft de actie, “Sluiten” in plaats van “X-icoon”, en herhaalt geen tekst die al zichtbaar is, want dan leest de schermlezer hetzelfde twee keer voor. Er bestaat ook een zusje, aria-labelledby, dat verwijst naar tekst die al op de pagina staat in plaats van een nieuwe tekst te typen. Met een beetje zorg ingezet is het label een van de goedkoopste verbeteringen in UX-design.
Bij TopDevs voegen we ARIA-labels toe aan elke icoonknop en elk onduidelijk element dat we bouwen, zodat een strakke, minimale interface volledig bruikbaar blijft voor bezoekers met een schermlezer.
