Kennt ihr Ariel-Labels? Nein? Ich auch nicht. Ich kenne Aria-Label. Was Aria-Labels sind und wofür sie gut sind, erkläre ich in diesem Blogpost.
Wenn Webseiten zugänglich sein sollen, so muss einiges stimmen. Zum einen sollten Bilder und Grafikelemente mit einem aussagekräftigen Alt-Text versehen werden, zum anderen benötigt es eine klare Struktur, eine saubere Titel-Hierarchie sowie eine korrekt definierte Ausgabesprache. Auch nützt es, wenn die Texte klar und verständlich formuliert sind. Was aber, wenn ein Element keinen Alt-Text aufweist oder es ein relevantes Element ist, das «nicht spricht»?
Was ist ein Aria-Label?
Ein Aria-Label ist kurz gesagt ein «Etikett», das verwendet werden kann, um eine Textalternative zu einem Element bereitzustellen, das keinen sichtbaren Text auf dem Bildschirm hat. Etwa ein Button:
<button>Senden</button>
// accessible name: Senden
Dieser Button wird als Sprachausgabe nur «Senden» weitergeben. Das nützt einer Blinden Person nicht viel.
Wie definiere ich ein Aria-Label?
Damit der Button also weitere Informationen an den Screenreader ausgibt, fügen wir ein Aria-Label in den Code ein:
<button aria-label="E-Mail senden">Senden</button>
// accessible name: E-Mail senden
Nun wird der Screenreader Folgendes vorlesen: «E-Mail senden».
Aria-Label mit Elementor für WordPress definieren
Wie sooft bei WordPress und Plug-in-Herstellern kommt es stark auf das Plug-in an, ob es barrierefrei programmiert ist und ob es Aria-Label zulässt. Wenn mit Elementor gearbeitet wird, können Aria-Label oft über Custom Attributes (Advanced → Attributes) angegeben werden:
Gib an, dass es ein Aria-Label ist: aria-label gefolgt von einem senkrechten Strich, um den Wert abzugrenzen | und gib dann den Wert also die Beschreibung an Link zu Facebook:
aria-label|Link zu Facebook
Aria-Label helfen also dabei, wichtige Elemente für Screenreader lesbar zu machen.
Hinweis: Elemente, die für Screenreader nicht relevant sind, sollten als «Artefakt» deklariert und somit «unsichtbar» gemacht werden.