Ein Tag inhouse mit Roland Golla, offizieller Cypress Ambassador und seit über 20 Jahren in Testing und Refactoring zu Hause. Auf unserem YouTube Kanal zeigt er in über 70 Live Coding Tutorials, wie Cypress in echten Projekten läuft. Dazu kommt unser Open Source Plugin NCA TESTIFY: Basistests für jede Website, mit einer Zeile im CI/CD Setup. Im Workshop lernt euer Team Setup, stabile Selektoren, Custom Commands und Tests in der Pipeline.
<h1>Barrierefreie Headlines</h1>
<h2>Warum Überschriften wichtig sind</h2>
<h2>Die fünf Regeln</h2>
<h3>Eine h1 pro Seite</h3>
<h3>Keine Ebene überspringen</h3>
<h2>Häufige Fragen</h2>
type Level = 1 | 2 | 3 | 4 | 5 | 6;
export function Heading({ level, children }: { level: Level; children: React.ReactNode }) {
const Tag = `h${level}` as const;
return <Tag>{children}</Tag>;
}
// Einsatz: <Heading level={3}>Titel der Card</Heading>
describe('Barrierefreie Headlines', () => {
it('hat eine saubere Heading Hierarchie', () => {
cy.visit('/glossare/nca-glossar-barrierefreiheit/barrierefreie-headlines');
cy.injectAxe();
cy.checkA11y(null, {
runOnly: ['heading-order', 'empty-heading', 'page-has-heading-one'],
});
});
it('hat genau eine h1', () => {
cy.get('h1').should('have.length', 1);
});
});
Headings, for example are a very common way to navigate around a webpage for me.
Erfahrt, wie ihr barrierefreie Überschriftenstrukturen erstellt, die sowohl Nutzern als auch eurer SEO zugutekommen. Anleitungen für WCAG-konforme Umsetzung.
Mehr erfahren
Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.
Barrierefreie Headlines sind Überschriften, die als echte h1 bis h6 Tags im HTML stehen und eine lückenlose Hierarchie bilden. Screenreader nutzen sie zum Springen durch die Seite. 2026 gilt das in Deutschland über das BFSG für viele Onlineshops und Dienste verbindlich, geprüft wird nach WCAG 2.2, Kriterien 1.3.1 und 2.4.6.
Genau eine. HTML verbietet mehrere h1 nicht, aber Screenreader Nutzer erwarten eine einzige Überschrift, die das Thema der Seite benennt. Suchmaschinen bewerten mehrere h1 ebenfalls als unklare Struktur. Typische Fehlerquelle sind Logos oder Hero Blöcke, die zusätzlich als h1 gerendert werden.
Drei Kriterien sind relevant: 1.3.1 Info und Beziehungen (Level A) verlangt programmatisch erkennbare Struktur. 2.4.6 Überschriften und Beschriftungen (Level AA) fordert beschreibende Texte. 2.4.10 Abschnittsüberschriften (Level AAA) empfiehlt, jeden Inhaltsabschnitt mit einer Überschrift zu versehen. BFSG verlangt Level AA.
Mit axe-core Regeln wie heading-order, empty-heading und page-has-heading-one, zum Beispiel über cypress-axe in Cypress oder über Pa11y in der CI Pipeline. Die Regeln heading-order und empty-heading gelten als Best Practice und müssen im Setup aktiviert sein. Ergänzend prüft ein simpler Cypress Test, dass genau eine h1 existiert.
Suchmaschinen gewichten Inhalte entlang der Überschriftenstruktur. KI Suche und LLMs zerlegen Seiten in Abschnitte, die von Überschriften begrenzt werden. Eine saubere Hierarchie erhöht die Chance, dass ein Abschnitt als Antwort zitiert wird. Barrierefreiheit, SEO und LLMO profitieren hier von derselben Maßnahme.
Nach unten nicht. Auf eine h2 folgt eine h3, nie direkt eine h4. Nach oben ist Springen erlaubt, etwa von h4 zurück auf h2, wenn ein neuer Hauptabschnitt beginnt. Übersprungene Ebenen wirken für Screenreader Nutzer wie fehlende Kapitel und werden von axe-core als heading-order Verstoß gemeldet.
Nein. Die Ebene folgt der Gliederung, die Optik regelt CSS. Wenn eine h3 zu klein aussieht, bekommt sie eine Klasse mit größerer Schrift. Wer stattdessen eine h2 setzt, zerstört die Struktur für Screenreader. Umgekehrt ist ein fetter Absatz keine Überschrift, auch wenn er wie eine aussieht.
Die Komponente bekommt die Ebene als Property und rendert das passende Tag dynamisch. In React über ein berechnetes Tag wie h plus Level, in Vue über component :is, in Astro über eine Property. So entscheidet die Seite über die Ebene, nicht die Komponente. Fest verdrahtete h2 in Cards sind der häufigste Strukturfehler in modernen Frontends.
Eine Überschrift, die per CSS aus dem sichtbaren Bereich geschoben wird, aber im Accessibility Tree bleibt. Sie hilft Screenreader Nutzern, etwa über einer Navigationsliste ohne sichtbaren Titel. Wichtig: display none oder visibility hidden entfernen die Überschrift auch für Screenreader. Es braucht eine echte visually hidden Klasse.
Kurz, konkret und einmalig auf der Seite. Das Schlüsselwort steht am Anfang, damit es in der Überschriftenliste sofort verständlich ist. Kreative Umschreibungen oder wiederholte Texte wie Mehr erfahren sind für die Navigation nutzlos. Ein guter Test: Alle Überschriften untereinander gelesen ergeben eine sinnvolle Gliederung.
Screenreader wie NVDA, JAWS oder VoiceOver bieten eine Überschriftenliste und Schnelltasten. Die Taste H springt zur nächsten Überschrift, die Zahlen 1 bis 6 direkt zu einer Ebene. So überfliegen blinde Nutzer eine Seite ähnlich schnell wie Sehende. Ohne echte Heading Tags funktioniert keine dieser Techniken.
Nein. Automatisierung findet fehlende h1, übersprungene Ebenen und leere Überschriften zuverlässig. Ob eine Überschrift inhaltlich sinnvoll ist, erkennt kein Tool. Dafür braucht es den manuellen Test mit Screenreader oder mindestens den Blick in die Überschriftenliste des Accessibility Inspectors. Beides zusammen ergibt ein belastbares Ergebnis.
