Barrierefreiheit mit Semantik verbessern
WAI-ARIA ist ein Werkzeug, das die Semantik einer Website verbessert und assistiven Technologien (Screenreadern, Sprachausgabe, Braillezeilen usw.) Informationen gibt, die HTML ihnen nicht geben kann. So hilft es, die Barrierefreiheit einer Website zu verbessern.
Hinweis (Stand: September 2026): Für die Hauptblöcke einer Website gibt es die HTML-Elemente <main>, <nav>, <header> und <footer>, die ihre Rolle selbst mitbringen – das Attribut role brauchen sie nicht. Allgemein setzt man ARIA nur dort ein, wo das passende HTML fehlt. Die Beschriftung eines Formularfeldes gehört in ein Element <label for="…">, und role="tooltip" ist nur für einen aufklappenden Hinweis gedacht, nicht für eine immer sichtbare Beschriftung.
WAI-ARIA ist seit 2014 eine Empfehlung des W3C. Die Unterstützung in Browsern und assistiven Technologien ist sehr gut, es gibt also keinen Grund, es nicht zu nutzen. Nicht empfohlen ist WAI-ARIA nur bei einer so einfachen Website, dass gut geschriebenes HTML dem Nutzer alles Nötige gibt.Ich verwende WAI-ARIA in Formularen und zum Kennzeichnen der Hauptblöcke einer Website. Es kann auch den Zustand von Blöcken kennzeichnen (zum Beispiel, ob ein Tab angezeigt oder ausgeblendet ist oder ein Menü auf- oder zugeklappt ist)
<!-- Hauptblöcke der Seite -->
<div class="content" role="main">
der Block mit dem Hauptinhalt der Seite hat die Rolle main
</div>
<div class="menu" role="navigation">
die Navigation bzw. das Menü hat die Rolle navigation
</div>
<!-- in einem Formular -->
<input id="checkbox_4" class="form_check_def" type="checkbox" name="test_check" aria-describedby="test_check_4_wai-aria" value="4" />
<span class="form_label_check_radio" role="tooltip" id="test_check_4_wai-aria">Test-Checkbox 4 (mindestens 1 muss ausgewählt sein)</span>
<span class="form_label" role="tooltip" id="name_wai-aria">Name: <span class="required_mark">*</span></span>
<input class="form_input_def" type="text" name="name_fd" aria-describedby="name_wai-aria" aria-required="true" value="" />
<!--
- aria-describedby gibt an, welches Element das Feld beschreibt: aria-describedby="username-tip" bedeutet, dass die Beschreibung des Feldes im Element mit der id username-tip steht
- aria-required kennzeichnet Pflichtfelder
-->
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
Die wichtigste Quelle, wie man alles einrichtet, ist die Website des W3C selbst, die die neuesten Informationen hat. Website: https://www.w3.org/TR/wai-aria/
Weitere praktische Beispiele stehen im ARIA Authoring Practices Guide (W3C) und im Artikel ARIA in der Praxis.