1.3.1 Info und Beziehungen

Was bedeutet das?

Was Sie mit dem Auge an der Gestaltung erkennen, muss auch im Code stecken. Eine große fette Zeile ist für den Screenreader nur dann eine Überschrift, wenn sie als <h2> oder ähnlich ausgezeichnet ist. Eine Aufzählung mit Spiegelstrichen braucht <ul> und <li>, eine Tabelle echte Kopfzellen und ein Eingabefeld eine verknüpfte Beschriftung.

Das betrifft auch Seitenbereiche (Kopf, Navigation, Hauptinhalt, Fußbereich), zusammengehörige Formularfelder wie Radio-Buttons und Hervorhebungen, die Bedeutung tragen. So können Hilfsmittel die Struktur vorlesen und Menschen gezielt von Überschrift zu Überschrift springen.

Wem hilft das?

• Menschen, die blind sind und mit dem Screenreader über Überschriften und Bereiche navigieren
• Menschen mit Sehbehinderung, die eigene Darstellungen oder Lesemodi nutzen
• Menschen mit kognitiven Einschränkungen, die von einer klaren Gliederung profitieren

Typische Fehler

• Überschriften nur als fett gesetzter Text (<p><b>…</b></p>) oder Überschriftenebenen nach Schriftgröße gewählt
• Eingabefelder ohne <label>, nur mit Platzhaltertext
• Radio-Buttons ohne <fieldset> und <legend>, sodass die Frage fehlt
• Datentabellen ohne <th>, oder Layout mit Tabellen statt mit CSS
• Aufzählungen aus Absätzen mit Bindestrichen statt echter Listen

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Sind Überschriften, Listen, Tabellen, Formulargruppen und Landmarks als solche ausgezeichnet (nicht nur gestaltet)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<p class="big-bold">Versand</p>
<input type="email" placeholder="E-Mail">

<h2>Versand</h2>
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">
<fieldset>
  <legend>Versandart</legend>
  <label><input type="radio" name="ship" value="std"> Standard</label>
  <label><input type="radio" name="ship" value="exp"> Express</label>
</fieldset>

Überschrift, Feldbeschriftung und Gruppenfrage sind jetzt im Code verankert und werden vorgelesen.

Praxistipps

• Wählen Sie die Überschriftenebene nach der Gliederung, die Größe regeln Sie mit CSS.
• Nutzen Sie im Redaktionssystem die Formatvorlagen „Überschrift 2“ und „Liste“ statt manueller Formatierung.

Ratgeber und Muster dazu

• Formulare, die jeder ausfüllen kannAm Formular entscheidet sich, ob jemand kauft, bucht oder aufgibt. Hier lesen Sie, wie Beschriftungen, Pflichtfelder und Fehlermeldungen gebaut sein müssen, damit es mit Tastatur, Screenreader und Vergrößerung klappt.
• Der richtige Alternativtext in fünf FragenEin guter Alternativtext ersetzt, was das Bild auf dieser Seite leistet, nicht was darauf zu sehen ist. Mit fünf Fragen finden Sie für jedes Bild die passende Lösung.
• In 30 Minuten zum ersten Screenreader-TestEin Screenreader zeigt schonungslos, ob Ihre Seite sauber aufgebaut ist. Mit dieser Anleitung testen Sie Ihre wichtigsten Seiten selbst, mit kostenlosen Werkzeugen und ohne Vorkenntnisse.
• AkkordeonInhalte auf- und zuklappen, Zustand per aria-expanded.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.3.1 Info and Relationships