Erfolgskriterium 1.3.1
Information und Beziehungen
[Materialsammlung]

Mai 2022

Dem visuellen Erscheinungsbild muss die entsprechende technische Kennzeichnung zu Grunde liegen. Was wie eine Überschrift aussieht, muss mit dem entsprechenden HTML-Markup realisiert sein. Gleiches gilt für Tabellen, Listen und wohl auch für Seitenregionen.

WCAG Kontext

Konformitätsstufe A

Prinzip 1. Wahrnehmbar Perceivable

Informationen und Steuerelemente müssen in einer technisch darstellbaren Weise wahrnehmbar sein.

Richtlinie 1.3 Anpassbar

Gestalte Inhalt, der auf unterschiedliche Weisen ohne Verlust von Inhalt oder Struktur dargestellt werden kann (z.B. einfacheres Layout).

Verwandte Erfolgskriterien

4.1.2 Name, Rolle, Wert

Komponenten müssen technisch korrekt und ausreichend mit einem barrierefreien Namen, der jeweiligen Rolle und gegebenenfalls dem präzisen Wert versehen sein.

2.5.3 Beschriftung im Namen

Der technisch verfügbare Name eines Steuerelements muss die sichtbare Beschriftung des Steuerelements enthalten.

1.3.6 Technisches Präzisieren des Verwendungszwecks

Konformitätsstufe AAA

Eine personalisierte Darstellung des Zwecks von Steuerelementen, Icons und Seitenbereichen ist auf Basis verfügbarer Standards technisch möglich.

Strukturierende Übersetzung des Erfolgskriteriums

Information, Struktur, und Beziehungen, welche in der Präsentation enthalten sind,

1. können programmtechnisch festgelegt werden oder
2. sind im Text verfügbar.

Zum raschen Verständnis

Was als Überschrift fungiert, muss als solche gekennzeichnet sein. Und was als Überschrift gekennzeichnet ist, muss tatsächlich eine Überschrift sein.

Ob Regionen nach diesem und auch anderen Erfolgskriterien eingebaut werden müssen, bleibt umstritten. Sie werden jedoch sehr wohl als Best Practice empfohlen.

Zielgruppen

• Menschen, die auf Screen Reader angewiesen sind.
• Menschen, die allein mit der Tastatur arbeiten.

Testverfahren

Die Prüfung auf das Erfolgskriterium 1.3.1 erfolgt zweckmäßig durch eine Kombination von maschineller Prüfung und manueller Prüfung.

Maschinelle Prüfung

Testtools liefern sowohl Fehlermeldungen als auch Warnungen, die beide erfahrungsgemäß durch eine manuelle Prüfung zu validieren sind.

Manuelle Prüfung

In einem ersten Schritt ist jedes Ergebnis der maschinellen Prüfung zu validieren. Nicht jede Fehlermeldung oder Warnung ist berechtigt. Gelegentlich ist ein erkannter Fehler auch einem anderen Erfolgskriterium zuzuordnen.

Erst ein Blick in den Quellcode und auf den Kontext im Browser führt zu Klarheit:

1. Liegt tatsächlich ein Fehler vor?
2. Ist der Fehler dem Erfolgskriterium 1.3.1 oder einem anderen zuzuordnen?

Es ist hilfreich, wenn zum Vergleich von Code und Webseite getrennte Rechner zur Verfügung stehen.

In einem zweiten Schritt ist zu prüfen, ob die einzelnen Elemente einer Webseite korrekt mit der Semantik versehen sind, welche sie visuell vorgeben:

Dieser Schritt kann effizient mit einem Screen Reader durchgeführt werden. Dieser erkennt, ob ein Element als Überschrift, Liste oder Tabellenelement gekennzeichnet ist. Screen Reader erkennen auch die technische Kennzeichnung von Seitenregionen.

Überschriften prüfen

1. Schau dir am Bildschirm an, was wie eine Überschrift aussieht.
2. Prüfe, ob die visuell als Überschrift erscheinenden Abschnitte auch im Code als Überschrift gekennzeichnet sind. Hilfreich sind dabei Funktionalitäten zum Ermitteln von Überschriften mittels Screen Reader.
3. Prüfe, ob die technisch gekennzeichneten Überschriften tatsächlich Überschriften sind. In diesem Schritt kannst du zur Formatierung missbräuchlich als Überschrift gekennzeichnete Komponenten ermitteln.

Prüfung durch betroffene Menschen (Peer Evaluation)

Da es um den Vergleich von visuellem Erscheinungsbild und technischer Darstellung geht, ist für die Prüfung ein ausreichendes Sehvermögen erforderlich.

Sehbehinderte Menschen, die mit einem Screen Reader vertraut sind, können bei der Prüfung assistieren. Sie können die Prüfung bei entsprechender Qualifikation auch selbst mit einer sehenden Assistenzperson durchführen.