aria-level

Verwendung

Auf role="heading" wird damit die Tiefe einer Überschrift deklariert — das ARIA-Äquivalent zur Wahl zwischen <h1> und <h6>. Native Überschriftselemente sollten die erste Wahl sein; role="heading" + aria-level empfiehlt sich nur dann, wenn eine Ebene jenseits von 6 benötigt wird oder wenn ein Framework die Verwendung eines echten Überschriftselements nicht zulässt.

Gültig ist das Attribut außerdem auf role="treeitem" (Tiefe im Baum, beginnend bei 1 für Einträge auf oberster Ebene) sowie auf role="listitem" innerhalb einer verschachtelten role="list", sofern die Verschachtelung nicht über die DOM-Struktur ausgedrückt wird.

Verhalten

Der Wert ist eine positive Ganzzahl. Bei Überschriften entsprechen 1–6 den Elementen <h1>–<h6>; Werte über 6 sind in ARIA zulässig, werden jedoch nur von wenigen Screenreadern als solche ausgegeben — auf Level 7 und höher sollte man sich daher nicht verlassen.

Bei Baumeinträgen entspricht die Ebene der Tiefe: Die Wurzel eines Baums hat Level 1, ihre direkten Kinder haben Level 2 und so weiter. Die Ebenennummer ermöglicht es Screenreader-Nutzenden, ihre Position in der Hierarchie zu erkennen, ohne die Einrückung zu sehen.

Das Attribut hat keinen Einfluss auf die visuelle Darstellung. Soll ein „ARIA-Überschriften-Level 4“ wie ein <h4> aussehen, muss die Formatierung separat per CSS festgelegt werden.

Häufige Fehler

• role="heading" und aria-level="3" verwenden, anstatt einfach <h3> zu schreiben. Das native Element liefert Rolle, Ebene, Standard-Tastaturnavigation und Dokumentgliederungs-Integration kostenlos.
• aria-level auf ein Element ohne role="heading", role="treeitem" oder role="listitem" setzen. Das Attribut hat beispielsweise auf einem <button> oder einem <div> ohne Rolle keine Wirkung.
• Ebenen überspringen — auf Level 2 folgt Level 4. Das verwirrt die Dokumentgliederung und löst Prüfungen gegen SC 1.3.1 aus.
• Falsche Ebene bei Baumeinträgen: Jedes Kind eines Level-2-Eintrags muss Level 3 haben. Off-by-one-Fehler brechen die Ansagen „eine Ebene höher“ / „eine Ebene tiefer“.
• Nicht-ganzzahlige oder Null-Werte. Nur positive Ganzzahlen sind gültig; aria-level="0" wird ignoriert.
• Vergessen, aria-level zu aktualisieren, wenn Einträge in einem verschiebbaren Baum umgehängt werden.

Beispiel

<!-- Überschrift tiefer als h6 (selten; bei komplexen Gliederungen nötig) -->
<div role="heading" aria-level="7">Unter-Unter-Unterabschnitt</div>

<!-- Baumeinträge drücken Tiefe über aria-level aus -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Dokumente
    <ul>
      <li role="treeitem" aria-level="2">Rechnungen</li>
      <li role="treeitem" aria-level="2">Verträge</li>
    </ul>
  </li>
</ul>