Prüfpunkt 1.3.2Stufe AÜberschriften, Tabellen und Reihenfolge
Warum muss die Reihenfolge der Inhalte im Code stimmen?
Die Reihenfolge im Code muss stimmen, weil Vorleseprogramme eine Seite genau in dieser Reihenfolge vorlesen — unabhängig davon, wie die Inhalte auf dem Bildschirm angeordnet sind. Steht im Code der Preis vor dem Produktnamen, hört ein blinder Besucher zuerst „89 Euro“ und weiß nicht, wofür. Sichtbare Ordnung und Code-Ordnung müssen zusammenpassen.
Zwei Ansichten derselben Seite
Jede Website existiert doppelt: einmal als sichtbare Gestaltung auf dem Bildschirm und einmal als Code, in dem die Inhalte hintereinanderstehen. Moderne Gestaltungstechniken können beides entkoppeln — ein Element, das im Code ganz unten steht, kann optisch oben links erscheinen. Für sehende Besucher ist das unsichtbar. Ein Vorleseprogramm aber folgt stur dem Code. Ein Beispiel: Ihre Preisliste zeigt drei Pakete nebeneinander, im Code stehen aber erst alle drei Titel, dann alle drei Preise, dann alle drei Beschreibungen. Der blinde Besucher hört „Basis, Komfort, Premium, 29 Euro, 59 Euro, 99 Euro“ — und kann die Preise den Paketen nicht mehr zuordnen.
So prüft unser Messkern die Reihenfolge
Das Prüfwerkzeug axe-core erkennt einzelne technische Signale, die auf eine gestörte Reihenfolge hindeuten — etwa Auszeichnungen, die Elemente aus dem Lesefluss reißen. Ob die Vorlese-Reihenfolge einer konkreten Seite inhaltlich Sinn ergibt, kann eine Maschine jedoch grundsätzlich nur begrenzt beurteilen: Dazu muss man den Inhalt verstehen. Unser Messkern folgt hier seinem Grundsatz, dass ein unauffälliger Durchlauf kein Freibrief ist — was die Automatik nicht sicher entscheiden kann, weist der Bericht als „manuell prüfen“ aus. Beim Gold-Standard lässt sich ein Prüfer die Seite in Code-Reihenfolge ausgeben und beurteilt, ob der Inhalt so verständlich bleibt.
Beispiele
Reihenfolge per CSS umgestellt
<div style="display:flex; flex-direction:column-reverse">
<p>Schritt 2: Termin bestätigen</p>
<p>Schritt 1: Termin wählen</p>
</div><div>
<p>Schritt 1: Termin wählen</p>
<p>Schritt 2: Termin bestätigen</p>
</div>Vorleseprogramme lesen den Quelltext in seiner Reihenfolge. Was optisch umgedreht wird, kommt falsch herum an.
So gehen Sie es an
- Bitten Sie Ihre Agentur, die wichtigsten Seiten einmal ohne Gestaltung — nur als Code-Reihenfolge — durchzusehen.
- Prüfen Sie Preislisten und Vergleichstabellen besonders genau: Dort trennt die Gestaltung zusammengehörige Angaben am häufigsten.
- Achten Sie bei Umbauten darauf, dass Inhalte im Code dort eingefügt werden, wo sie inhaltlich hingehören — nicht dort, wo es technisch bequem ist.
- Testen Sie nach größeren Design-Änderungen mit der Tab-Taste: Springt die Markierung kreuz und quer, stimmt meist auch die Code-Reihenfolge nicht.
- Nehmen Sie die Vorlese-Reihenfolge als Abnahmekriterium in Verträge mit Ihrer Agentur auf.
Weiter im Prüfbereich Barrierefreiheit
- Warum reichen Hinweise wie „der grüne Knopf rechts“ auf Websites nicht aus?Anweisungen dürfen sich nie allein auf Farbe, Form oder Position stützen — blinde Besucher und Vorleseprogramme können ihnen sonst nicht folgen.
- Muss meine Website im Hochformat und im Querformat funktionieren?Ja — Inhalte dürfen die Bildschirm-Ausrichtung nicht erzwingen. Wer sein Tablet am Rollstuhl montiert hat, kann es oft nicht drehen.
- Was bringt das autocomplete-Attribut in Website-Formularen?Das autocomplete-Attribut sagt dem Browser, was ein Formularfeld erwartet — er füllt E-Mail oder Telefonnummer dann automatisch und fehlerfrei aus.
- Warum brauchen Fehlermeldungen und Links mehr als nur eine Farbe?Viele Menschen sehen Farben eingeschränkt. Information muss deshalb immer doppelt getragen werden: durch Farbe plus Text, Symbol oder Unterstreichung.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Clem Onojeghuo, CC0
.jpg){kind=link}