aria-controls
Das Attribut aria-controls kann per ID-Verweis ein Element dahingehend
kennzeichnen, dass es für die Steuerung (wie ein Toggle) eines weiteren Elements
zuständig ist.
<button aria-controls="hauptnavigation"></button><div id="hauptnavigation"></div>
aria-current
Das Attribut aria-current kann auf einem Element angewandt werden, um zu
zeigen, dass es das aktuelle Element einer Gruppe darstellt. Im Falle der
M10-Teilleistung weist aria-current="page" stets darauf hin, welche Seite
aktuell dargestellt wird und visuell hervorgehoben werden soll.
<a href="html.html" aria-current="page">HTML</a>
aria-describedby
Das Attribut aria-describedby kann dafür genutzt werden, auf ein anderes
Element hinzuweisen, das die Funktion dieses Elements weiter erläutert.
<input aria-describedby="nameHelp" autocomplete="name" required name="name" maxlength="50"><div id="nameHelp">Bitte trage deinen Namen ein (max. 50 Zeichen).</div>
aria-expanded
Das Attribut aria-expanded kann dafür genutzt werden, anzuzeigen, ob ein
Steuerelement derzeit ausgeklappt (aria-expanded="true") oder eingeklappt
(aria-expanded="false") ist.
<button aria-expanded="false">Klick mich!</button>
aria-label
Das Attribut aria-label definiert einen Stringwert, der das zugehörige
HTML-Element beschreibt. Im Fall der M10-Teilleistung beschreibt das Attribut solche
Elemente, bei denen das semantische HTML-Element nicht auf die Funktion hindeutet.
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
aria-labelledby
Im Gegensatz zu aria-label definiert aria-labelledby die ID
eines weiteren HTML-Elements, welches das ursprüngliche HTML-Element beschreibt. Dies
kann beispielsweise ein Label, eine Überschrift o. Ä. sein.
<section aria-labelledby="messungUeberschrift"><h1 id="messungUeberschrift">Dezibelmessung</h1>
aria-live
Das Attribut aria-live wird Elementen vergeben, die (bspw. durch
JavaScript-Anfragen) aktualisiert werden. Das Attribut beschreibt dabei, um welche Art
von Aktualisierung es sich handelt und wie Screenreader damit umgehen sollen.
<p aria-live="polite"><h1 id="messungUeberschrift">Dezibelmessung</h1><span id="dbInteger">--</span></p>