Was ist das Ziel dieses Kriteriums?
Stell dir vor, du betrittst ein fremdes Bürogebäude und alle Türschilder, Wegweiser und Stockwerk-Angaben wären unsichtbar – aber trotzdem da. Genau so fühlt es sich für Menschen an, die mit Screenreadern oder anderen assistiven Technologien arbeiten, wenn Websites nur visuell strukturiert sind.
Menschen sehen auf einer Website sofort: Das ist eine Überschrift (größer, fett), das eine Liste (mit Aufzählungszeichen), das ein Formular (Felder mit Beschriftungen). Aber was, wenn diese visuellen Hinweise für dich nicht zugänglich sind?
Das Ziel von Erfolgskriterium 1.3.1 ist es, dass alle Informationen und Beziehungen, die visuell oder akustisch vermittelt werden, auch im Code verfügbar sind. So können assistive Technologien die Struktur verstehen und an ihre Nutzer weitergeben – unabhängig davon, wie die Seite aussieht oder klingt.
Was fordert das Erfolgskriterium genau?
Ganz konkret fordert WCAG 1.3.1: Alle Informationen, Strukturen und Beziehungen, die durch das Design vermittelt werden, müssen entweder programmatisch erkennbar oder als Text verfügbar sein.
Das bedeutet:
Überschriften müssen als echte HTML-Überschriften (h1, h2, h3…) ausgezeichnet sein – nicht nur größer und fetter gestylt.
Listen brauchen korrektes Listen-Markup (ul, ol, dl) – nicht nur Bindestriche oder Aufzählungszeichen.
Tabellen müssen semantisch strukturiert sein mit Tabellenköpfen (th), die klar zu ihren Datenzellen (td) zugeordnet sind.
Formularfelder benötigen programmatisch verknüpfte Labels, die erklären, was eingegeben werden soll.
Wichtige Bereiche einer Seite (Navigation, Hauptinhalt, Footer) sollten durch Landmark-Rollen oder semantische HTML5-Elemente gekennzeichnet sein.
Beziehungen zwischen Elementen – wie gruppierte Formularfelder oder zusammengehörige Inhalte – müssen im Code erkennbar sein.
Wenn die verwendete Technologie keine programmatische Auszeichnung unterstützt, muss die Information als Text bereitgestellt werden – zum Beispiel: „Alle Pflichtfelder sind mit einem Sternchen (*) markiert.“
Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du hörst einen Radiobeitrag über eine komplexe Tabelle – aber der Moderator erklärt nicht, welche Zahlen zu welchen Kategorien gehören. Genau diese Verwirrung entsteht, wenn Strukturinformationen nur visuell verfügbar sind.
Semantische Auszeichnung schafft Barrierefreiheit, weil sie:
- Screenreader-Nutzern ermöglicht, durch Überschriften zu navigieren und Inhalte zu überspringen
- Menschen mit kognitiven Einschränkungen hilft, die Struktur und den Aufbau einer Seite zu verstehen
- Nutzer mit motorischen Einschränkungen beim effizienten Navigieren unterstützt (z.B. durch Sprungmarken)
- Menschen mit Sehbehinderungen erlaubt, eigene Stylesheets zu verwenden, ohne dass Bedeutung verloren geht
- Braille-Displays die korrekte Darstellung von Strukturelementen ermöglicht
Und nicht zuletzt: Saubere semantische Struktur macht Inhalte robuster für verschiedene Ausgabeformate – von Sprachausgabe bis hin zu zukünftigen Technologien.
So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Semantisches HTML ist keine Hexerei – aber es erfordert konsequentes Denken vom Inhalt her. Hier die wichtigsten Grundregeln:
Für Überschriften:
- Nutze h1-h6 für echte Überschriften, nicht für große Texte
- Halte die Hierarchie logisch ein: h1 → h2 → h3 (nicht h1 → h4)
- Jede Seite sollte genau eine h1 haben
Für Listen:
- Verwende
<ul>für ungeordnete Listen,<ol>für nummerierte Listen - Nutze
<dl>für Begriffslisten (Begriff-Definition-Paare) - Stylewarte nicht visuell nach – nutze CSS für das Aussehen
Für Tabellen:
- Kennzeichne Spalten- und Zeilenköpfe mit
<th> - Nutze
scope-Attribute für komplexere Zuordnungen - Biete eine
<caption>für den Tabelleninhalt - Verwende Tabellen nur für tabellarische Daten, nicht für Layout
Für Formulare:
- Verknüpfe Labels explizit mit
<label for="feldname"> - Gruppiere zusammengehörige Felder mit
<fieldset>und<legend> - Nutze
aria-describedbyfür zusätzliche Hinweise - Markiere Pflichtfelder programmatisch mit
requiredoderaria-required
Für Seitenbereiche:
- Nutze HTML5-Elemente wie
<nav>,<main>,<aside>,<header>,<footer> - Oder verwende ARIA-Landmark-Rollen:
role="navigation",role="main"etc. - Biete Sprunglinks für wichtige Bereiche
Technische Umsetzung:
- Prüfe deine Seite mit einem Screenreader (z.B. NVDA, kostenlos)
- Nutze Browser-Tools wie die Accessibility-Registerkarte in den Entwicklertools
- Teste die Tastaturbedienung ohne Maus
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Saubere semantische Struktur ist nicht nur Pflicht – sie ist ein echter Business-Booster. Hier drei handfeste Gründe, warum sich 1.3.1 auch wirtschaftlich lohnt:
1. Reichweite vergrößern
Eine semantisch korrekte Website schließt niemanden aus. Du erreichst Menschen mit Behinderungen, aber auch ältere Nutzer, Menschen in mobilen Situationen oder mit temporären Einschränkungen. Plus: Nutzer können ihre eigenen Stylesheets verwenden, ohne dass deine Inhalte kaputt gehen.
2. Suchmaschinenoptimierung verbessern
Suchmaschinen lieben semantische Struktur! Richtige Überschriften-Hierarchien, saubere Listen und strukturierte Daten helfen Google & Co., deine Inhalte besser zu verstehen und zu ranken. Semantisches HTML ist eines der wichtigsten SEO-Grundlagen.
3. Entwicklungskosten senken
Sauberer, semantischer Code ist wartungsfreundlicher und robuster. Weniger CSS-Tricksereien bedeuten weniger Bugs, einfachere Responsive-Umsetzung und klarere Zuständigkeiten im Entwicklerteam. Das spart Zeit und Geld bei Updates und Änderungen.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen
Das Erfolgskriterium im Wortlaut der W3
Success Criterion 1.3.1 Info and Relationships
(Level A)Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.