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. Etwa 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:

Wie-definiere-ich-ein-Aria-Label.png.webp

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.

<aside> <img src="notion://custom_emoji/1a754e67-cd4e-43d1-8f79-ab76e5d4d3d4/1fcb6b8a-5bbb-8029-b8e1-007a4cd52ee0" alt="notion://custom_emoji/1a754e67-cd4e-43d1-8f79-ab76e5d4d3d4/1fcb6b8a-5bbb-8029-b8e1-007a4cd52ee0" width="40px" />

Hinweis:

Elemente, die für Screenreader nicht relevant sind, sollten als «Artefakte» gekennzeichnet werden, um sie für assistive Technologien «unsichtbar» zu machen. Dies ist ein wichtiger Aspekt bei der barrierefreien Gestaltung von Webinhalten.

Wenn zum Beispiel ein Element rein dekorativ ist oder keine bedeutsame Information vermittelt, sollte es vor Screenreadern verborgen werden. Dies kann mithilfe des Attributs aria-hidden="true" erfolgen, wodurch das Element nicht in den Accessibility-Tree aufgenommen wird.

</aside>