Das Aria-Label ist ein Attribut, das in der WAI-ARIA- Spezifikation der W3C definiert ist. Diese Spezifikation erweitert natives HTML und ermöglicht es, die Art und Weise zu ändern, wie ein HTML-Element in den Zugänglichkeitsbaum «übersetzt» wird.

Standardmässig verwendet ein HTML-Element seinen Textinhalt als Accessibility-Label. Wenn ein Element über ein Aria-Label verfügt, wird der barrierefreie Name zu der Zeichenkette, die in dem Attribut übergeben wird. Es lassen sich also Elemente beschreiben, die nicht zwingend eine sichtbare Textausgabe auf dem Bildschirm haben, aber trotzdem relevant sind für die Lesenden. Zum Beispiel ein Button.

Beispiel

Ohne Aria-Label:

<button>Senden</button>
// accessible name: Senden

Mit Aria-Label:

<button aria-label="E-Mail senden">Senden</button>
// accessible name: E-Mail senden

Aria-Lables mit Elementor

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.