Synonyme: Abschnittsüberschrift, Hauptüberschrift, Heading
Siehe auch: Schrift, Text, Beschriftung, Titel, Gruppe
Überschriften dienen der Gliederung von Textabschnitten. Sie beschreiben den Inhalt des jeweiligen Textabschnitts.
Darstellung
Permalink zu "Darstellung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 202 | Kontrast | Überschriften müssen ein Kontrastverhältnis von mindestens 4,5:1 bzw. 3:1 aufweisen. Hinweis: Ab einer Schriftgröße von 24 px (bzw. 18,5 px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 3:1 ausreichend. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 204 | Beschriftung | Die Überschrift muss aussagekräftig sein. Hinweis: Um das zu erreichen, soll die Überschrift den folgenden Abschnitt knapp und eindeutig beschreiben. | Muss | EN 301 549: 9.2.4.6, 11.2.4.6 |
| 205 | Beschriftung | Für die Überschrift darf keine Schriftgrafik verwendet werden, außer deren Textinhalt ist an Nutzungsbedürfnisse anpassbar (Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe). | Muss | EN 301 549: 9.1.4.5, 11.1.4.5.1 |
| 206 | Gliederung | Textabschnitte sollen mit Überschriften gegliedert werden. | Soll | WCAG 2.1: 2.4.10 (AAA) |
| 207 | Hierarchie | Die Hierarchie der Überschriften muss der logischen Gliederung der Seite entsprechen. Hinweis: In der Regel sollte die Seite eine Hauptüberschrift mit der höchsten Hierarchie besitzen. Abschnittsüberschriften sollten hierarchisch korrekt gegliedert werden; dabei sollte keine Hierarchie-Ebene übersprungen werden. | Muss | EN 301 549: 9.1.3.1, 11.1.3.1.1 |
| 208 | Fokussichtbarkeit | Erhält die Überschrift den Fokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7 |
Bedienung
Permalink zu "Bedienung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 209 | Tastaturbedienung | In Anwendungen, die den virtuellen Cursor nicht unterstützen, muss die Überschrift mit Tastatur erreicht und verlassen werden können (siehe Tabelle Tastaturbedienung). Hinweis: Wenn die Anwendung viele Überschriften enthält, die den Tastaturfokus erhalten, soll es einen Bedienmodus geben, bei dem nur interaktive Elemente den Fokus erhalten, um unnötige Navigationsschritte für sehende Tastaturnutzende zu vermeiden. | Muss | EN 301 549: 9.1.1.1, 11.1.1.1 |
Tastaturbedienung Überschrift (in einer Anwendung ohne virtuellen Cursor)
Permalink zu "Tastaturbedienung Überschrift (in einer Anwendung ohne virtuellen Cursor)"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Überschrift fokussieren | TAB | Erforderlich |
| Überschrift verlassen | TAB | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 210 | Rolle | Die Rolle „Überschrift“ und deren Hierarchie-Ebene müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.5 |
| 211 | Hierarchie | Die Hierarchie der Überschriften muss der logischen Gliederung der Seite entsprechen. Hinweis: Dabei sollte die maximale Zahl der Hierarchie-Ebenen beachtet werden (Desktop-Anwendungen: in der Regel 9, Web-Anwendungen: 6). | Muss | EN 301 549: 9.1.3.1, 11.1.3.1 |
| 212 | Desktop: Position | Größe und Position der Überschrift müssen an die Accessibility API übermittelt werden (siehe Fokusindikator). | Muss | EN 301 549: 11.5.2.5, 11.5.2.13 |
Praxistipp Überschriften in Web-Anwendungen
Permalink zu "Praxistipp Überschriften in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- JAWS: Überschrift Ebene [Zahl] [Beschriftung]
- NVDA: Überschrift Ebene [Zahl] [Beschriftung]
- Windows Sprachausgabe: Überschriftenebene [Zahl] [Beschriftung]
Überschriften werden mit den HTML-Elementen <h1>, <h2>, <h3>, <h4>, <h5> und <h6> ausgezeichnet. Dabei sollte Folgendes beachtet werden:
- Überschriften sollten knapp, eindeutig und aussagekräftig sein, weil sie die primäre Methode zur Navigation und dem Wahrnehmen der Seitenstruktur für Screenreader-Nutzende darstellen.
- Die Überschriften sollten hierarchisch korrekt verschachtelt werden, d. h. auf eine
<h1>sollten<h2>-Überschriften folgen, deren Abschnitte wiederum<h3>-Überschriften enthalten können. Gemäß HTML-Spezifikation dürfen keine Überschriften-Ebenen übersprungen werden, so darf z. B. auf eine<h2>keine<h4>,<h5>oder<h6>folgen. - Die Hauptüberschrift (
<h1>) sollte den Zweck der jeweiligen Seite beschreiben (und z. B. nicht lediglich den Anwendungsnamen enthalten).
Überschriften können innerhalb des <hgroup>-Elements zusammen mit Absätzen (<p>-Element) gruppiert werden, um z. B. einen Untertitel oder eine alternative Überschrift anzugeben. Mit keinem der Screenreader für Windows ist diese Gruppierung wahrnehmbar, d. h. der Inhalt des <p>-Elements wird als normaler Text ausgegeben, weil das <hgroup>-Element gemäß den „HTML Accessibility API Mappings“ keine Semantik besitzt.
Weitere Informationen: 4.3.6 The h1, h2, h3, h4, h5, and h6 elements - HTML Standard (whatwg.org) , 4.3.11 Headings and outlines - HTML Standard (whatwg.org) (Externer Link), Headings | Web Accessibility Initiative (WAI) | W3C
Wird die Überschrift nicht mit den HTML-Elementen umgesetzt, sollte u. a. Folgendes beachtet werden:
- Die Rolle wird mit
role=headingübermittelt. - Die Überschriften-Ebene wird mit
aria-levelübermittelt. Dabei sollten nur die Zahlen von 1 bis 6 verwendet werden.- Bei Zahlen größer als 6 gibt JAWS die Überschrift mit der Ebene 2 aus.
- Bei Zahlen größer als 9 geben NVDA und Windows Sprachausgabe die Überschrift mit der Ebene 2 aus.
- Die Beschriftung sollte per Textinhalt erfolgen.
Weitere Informationen: heading role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link)