WCAG 2.2 · Level AAA · WahrnehmbarBarrierefreiheit als Cloud-Service
1.3.6 Zweck bestimmen
UI-Komponenten, Icons und Bereiche sind maschinenlesbar zweckbestimmt.
Auf einen Blick
Was bedeutet dieses Kriterium?
Kurz gesagt
UI-Komponenten, Icons und Bereiche sind maschinenlesbar zweckbestimmt.
Aufwand
Mittel umzusetzen, mittel erledigt
Betrifft Rolle
Entwicklung
Konformitätsstufe
Level AAA
EN 301 549
Abschnitt 9.1.3.6 (nicht referenziert, AAA) · BITV 2.0 · BFSG
Verständlich erklärt
Was heißt 1.3.6 für die Praxis?
UI-Komponenten, Icons und Bereiche sind maschinenlesbar zweckbestimmt.
Verwenden Sie ARIA-Landmarks (nav, main, aside, footer) und semantische HTML5-Elemente, damit assistive Technologien Seitenbereiche identifizieren können.
Technisch formuliert: Der Zweck von Benutzeroberflächen-Komponenten, Symbolen und Bereichen kann programmatisch bestimmt werden.
Wer ist betroffen?
Ein Alltagsbeispiel
Wenn Websites Inhalte nur auf einem einzigen Weg anbieten — etwa nur als Bild oder nur als Audio — schließen sie Menschen aus, die diesen einen Weg nicht nutzen können. Das Erfolgskriterium 1.3.6 verhindert solche Ausschlüsse und sorgt dafür, dass Informationen in alternativen Formen zugänglich sind. Besonders betroffen sind: Blinde Menschen, Menschen mit Screenreadern, Screenreader-Nutzer.
Die Lösung
So setzen Sie es richtig um
Verwenden Sie ARIA-Landmarks (nav, main, aside, footer) und semantische HTML5-Elemente, damit assistive Technologien Seitenbereiche identifizieren können.
Der Zweck von Benutzeroberflächen-Komponenten, Symbolen und Bereichen kann programmatisch bestimmt werden.
Umsetzung
Schritt für Schritt
Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.
- 1
ARIA-Landmarks einsetzen
<nav>, <main>, <aside>, <footer>, <header> oder role="navigation" etc.
- 2
UI-Komponenten semantisch auszeichnen
<button> für Aktionen, <a> für Navigation, role="tab" für Tabs. Zweckbestimmung folgt aus der Rolle.
- 3
autocomplete-Attribute erweitern
Über 1.3.5 hinaus: umfassende Zweckbestimmung aller interaktiven Elemente.
Praxisbeispiele
So nicht — sondern so
So nicht
<div class="header">
Sondern so
<header>
Warum?
Semantische HTML5-Elemente machen den Zweck programmatisch bestimmbar.
Typische Fehler
Das wird häufig falsch gemacht
Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.
Darauf verlassen, dass alle gleich wahrnehmen
Entwickler gehen oft davon aus, dass alle Nutzer die Inhalte genauso sehen oder hören wie sie selbst. Das ist ein grundlegender Denkfehler — viele Menschen nutzen Hilfsprogramme, die Inhalte ganz anders präsentieren.
Nur an die Mehrheit der Nutzer denken
80%-Lösungen sind keine Lösung, wenn die verbleibenden 20% die Seite überhaupt nicht nutzen können. Barrierefreiheit bedeutet: niemand wird ausgeschlossen.
Selbst prüfen
So testen Sie dieses Kriterium
Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.
Screenreader-Test
VoiceOver (Mac: Cmd+F5), NVDA (Windows, kostenlos) oder TalkBack (Android). Navigieren Sie durch die Seite und prüfen Sie, ob alle Inhalte sinnvoll vorgelesen werden.
CSS deaktivieren
In Chrome DevTools oder über Browser-Erweiterungen CSS ausschalten. Ist die Seite noch strukturiert und verständlich lesbar?
Automatisierte Prüfung
Tools wie Pa11y, axe DevTools oder WAVE finden viele Probleme dieses Kriteriums zuverlässig. Ergänzende manuelle Tests bleiben wichtig.
Häufige Fragen
Fragen und Antworten
Ist Level AAA verpflichtend?▾
Wie kann ich prüfen, ob meine Seite dieses Kriterium erfüllt?▾
Welche anderen Kriterien hängen damit zusammen?▾
Verwandte Kriterien
Weiterführende Erfolgskriterien
Diese Kriterien stehen in engem Zusammenhang mit 1.3.6 und sollten gemeinsam betrachtet werden.