ARIA: heading-Rolle
Die heading
-Rolle definiert dieses Element als eine Überschrift für eine Seite oder einen Abschnitt, wobei das aria-level
-Attribut für mehr Struktur sorgt.
Beschreibung
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>
Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften
aria-level
-
Das
aria-level
-Attribut gibt die Überschriftsebene in der Dokumentstruktur an. Wenn kein Level vorhanden ist, ist der Standardwert 2.
Tastaturinteraktionen
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 JavaScript-Funktionen
- 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.
Beispiele
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>
Barrierefreiheitshinweise
Warnung: Die Verwendung von aria-label
oder aria-labelledby
wird den Inhalt Ihrer Überschrift vor unterstützenden Technologien verstecken, da stattdessen das Label gelesen wird.
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.
Beste Praktiken
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:
Zusätzliche Vorteile
Keine.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # heading |
Unknown specification # when_to_use_structural_roles |
Prioritätenreihenfolge
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.