ARIA und Landmarks

ARIA-Attribute, die Textinformationen für Screenreader hinzufügen

Die folgenden Rollen können Textinformationen für Screenreader hinzufügen:

aria-label

Ein Label, das den Inhalt eines Elements beschreibt. Es wird von Screenreadern vorgelesen, wenn das Element fokussiert ist. <button aria-label="Schließen" class="fa fa-close"></button>

aria-labelledby

Die ID eines anderen Elements, dessen Inhalt als Label für das aktuelle Element verwendet wird. <label id="label">Schließen</label>
<button aria-labelledby="label">

aria-describedby

Die ID eines anderen Elements, dessen Inhalt als Beschreibung für das aktuelle Element verwendet wird. <div id="description">Schließen Sie das Fenster</div>
<button aria-describedby="description">

ARIA-Attribute, die den Zustand von Elementen beschreiben

Die folgenden Rollen können den Zustand von Elementen beschreiben:

aria-disabled

Gibt an, ob ein Element deaktiviert ist. <button aria-disabled="true">

aria-hidden

Gibt an, ob ein Element für Screenreader sichtbar ist. <div aria-hidden="true">

aria-checked

Gibt an, ob ein Element ausgewählt ist. <input type="checkbox" aria-checked="true">

aria-pressed

Gibt an, ob ein Element gedrückt ist. <button aria-pressed="true">

aria-expanded

Gibt an, ob ein Element erweitert ist. <li aria-expanded="true">

und so weiter.

ARIA-Attribute, die beobachten, ob es am DOM Veränderungen gibt:

Die folgenden Rollen können beobachten, ob es am DOM Veränderungen gibt:

aria-atomic

Gibt an, ob ein Element atomar ist, d.h. ob es als Ganzes gelesen werden soll. <div role="alert" aria-atomic="true">
<p>Wichtige Nachricht:</p>
<p>Ihr Profil wurde erfolgreich aktualisiert.</p>
</div>

aria-busy

Gibt an, ob ein Element gerade beschäftigt ist.

aria-live

Gibt an, ob Änderungen an einem Element sofort vorgelesen werden sollen. <form aria-live="assertive">
<input type="text">...
<p>Bitte geben Sie Ihren Namen ein.</p>
</form>

aria-relevant

Gibt an, welche Art von Änderungen an einem Element vorgelesen werden sollen. <form aria-relevant="additions">
<input type="text">...
<p>Bitte geben Sie Ihren Namen ein.</p>
</form>

ARIA-Attribute, die ein Verhalten von Elementen beschreiben

Die folgenden Rollen können das Verhalten von Elementen beschreiben:

aria-haspopup

Gibt an, ob ein Element ein Popup-Menü enthält.

aria-owns

Die ID eines anderen Elements, das von diesem Element besessen wird.

aria-controls

Die ID eines anderen Elements, das von diesem Element kontrolliert wird.

aria-flowto

Die ID eines anderen Elements, das von diesem Element fokussiert wird.

aria-activedescendant

Die ID eines anderen Elements, das von diesem Element aktiviert wird.

und so weiter.

Landmarks (roles)

Landmarks sind semantische Rollen, die es Screenreadern ermöglichen, die Struktur einer Webseite zu erkennen. Sie können nicht-semantischen div-Elemente eine semantische Bedeutung geben. Sie können auch die Semantik eines HTML-Elements ändern.

role="banner"

Ein Bereich, der den Kopf einer Webseite enthält. Er kann mehrere Elemente enthalten, wie z.B. ein Logo, eine Überschrift, eine Suchfunktion und eine Navigation.

role="navigation"

Ein Bereich, der eine Navigation enthält. Er kann mehrere Elemente enthalten, wie z.B. eine Liste von Links oder eine Suchfunktion.

role="main"

Der Hauptinhalt einer Webseite. Er kann mehrere Elemente enthalten, wie z.B. Artikel, Abschnitte und Nebeninhalte.

role="complementary"

Ein Bereich, der zusätzliche Informationen enthält, die nicht zum Hauptinhalt gehören. Er kann mehrere Elemente enthalten, wie z.B. eine Sidebar, eine Werbung oder verwandte Links.

role="contentinfo"

Ein Bereich, der Informationen über die Webseite enthält. Er kann mehrere Elemente enthalten, wie z.B. ein Impressum, eine Datenschutzerklärung und eine Kontaktadresse.

role="search"

Ein Bereich, der eine Suchfunktion enthält. Er kann mehrere Elemente enthalten, wie z.B. ein Eingabefeld, eine Schaltfläche und eine Ergebnisliste.

role="form"

Ein Bereich, der ein Formular enthält. Er kann mehrere Elemente enthalten, wie z.B. Eingabefelder, Schaltflächen und Auswahllisten.

und so weiter.