ARIA: heading-Rolle

Die heading-Rolle zeigt unterstützenden Technologien an, dass dieses Element wie eine Überschrift behandelt werden soll. Screenreader würden den Text lesen und anzeigen, dass er wie eine Überschrift formatiert ist. Zusätzlich gibt das Level den unterstützenden Technologien an, welchen Teil der Seitenstruktur diese Überschrift repräsentiert. Eine Überschrift der Ebene 1, angezeigt mit aria-level="1", weist üblicherweise auf die Hauptüberschrift einer Seite hin, eine Überschrift der Ebene 2, definiert mit aria-level="2", auf den ersten Unterabschnitt, eine Überschrift der Ebene 3 ist ein Unterabschnitt davon, und so weiter.

<div role="heading" aria-level="1">This is a main page heading</div>

Dies definiert den Text im <div> als Hauptüberschrift der Seite, angezeigt als Ebene 1 durch das aria-level-Attribut. Es wird empfohlen, stattdessen das h1 (bis h6) Element zu verwenden.

<h1>This is a main page heading</h1>

aria-level

Das aria-level-Attribut gibt die Überschriftsebene in der Dokumentstruktur an. Wenn kein Level vorhanden ist, ist der Standardwert 2.

Diese Rolle erfordert keine besonderen Tastaturnavigationen. Wie bei jeder Überschrift stellt das Zuweisen einer ID sicher, dass sie von Ankerlinks referenziert werden kann, was sie über die Tastatur zugänglich macht.

Erforderliche Ereignishandler

Keine.

Ändern von Attributwerten

In der Regel nicht erforderlich, es sei denn, es wird dynamisch Inhalt eingefügt. In diesem Fall benötigen die neu hinzugefügten Überschriften aria-level-Attribute, deren Werte mit dem Rest der Dokumentstruktur konsistent sind.

Das folgende zeigt eine typische Seitenstruktur.

<div id="container">
  <div role="heading" aria-level="1">The main page heading</div>
  <p>This article is about showing a page structure.</p>
  <div role="heading" aria-level="2">Introduction</div>
  <p>An introductory text.</p>
  <div role="heading" aria-level="2">Chapter 1</div>
  <p>Text</p>
  <div role="heading" aria-level="3">Chapter 1.1</div>
  <p>More text in a sub section.</p>
</div>

Stattdessen sollten Sie jedoch Folgendes tun:

<div id="container">
  <h1>The main page heading</h1>
  <p>This article is about showing a page structure.</p>
  <h2>Introduction</h2>
  <p>An introductory text.</p>
  <h2>Chapter 1</h2>
  <p>Text</p>
  <h3>Chapter 1.1</h3>
  <p>More text in a sub section.</p>
</div>

Wenn Sie die heading-Rolle und das aria-level-Attribut verwenden müssen, sollten Sie nicht über Ebene 6 hinausgehen, um mit HTML konsistent zu bleiben. Obwohl Sie theoretisch höher gehen können und einige Screenreader dies unterstützen könnten, können die Ergebnisse bei anderen Browser- und Screenreader-Kombinationen unvorhersehbar sein.

Der beste Weg, diese Rolle zu verwenden, ist, sie überhaupt nicht zu verwenden und stattdessen die nativen Überschriften-Tags h1 bis h6 wie im obigen Beispiel gezeigt zu nutzen. Die heading-Rolle und das aria-level-Attribut sollten nur verwendet werden, um Zugänglichkeit im Nachhinein in veralteten Code einzubauen, den Sie nicht erheblich ändern können.

Statt die ARIA heading-Rolle zu verwenden, verwenden Sie das semantische HTML-Element:

Keine.

Die heading-Rolle überschreibt die native semantische Bedeutung des Elements, für das sie verwendet wird. Das aria-level-Attribut bestimmt zusätzlich, welches Überschriftsniveau angezeigt wird.

• <h1> bis <h6>: Die HTML Abschnitts-Überschriftselemente