Was ist das DOM?
Das DOM (Document Object Model) ist die strukturierte, technische Repräsentation einer Webseite, wie sie von einem Browser interpretiert wird. Es bildet die Grundlage dafür, dass Inhalte durch Programme – etwa Screenreader, Suchmaschinen, oder Automatisierungstools – gelesen, analysiert und verarbeitet werden können.
Das DOM stellt die HTML-Elemente einer Seite in Form eines hierarchischen Baums dar – bestehend aus Knoten wie <html>, <head>, <body>, <nav>, <main>, <section>, <h1> usw.
Warum ist das DOM wichtig für Barrierefreiheit?
Was ein Mensch visuell auf dem Bildschirm sieht, ist nicht unbedingt das, was z. B. ein Screenreader „sieht“. Letzterer greift auf den DOM zu – genauer: auf die daraus abgeleitete Struktur im Accessibility Tree.
Nur wenn das DOM semantisch korrekt aufgebaut ist, können assistive Technologien die Inhalte verstehen und sinnvoll wiedergeben.
Beispiele:
Eine Überschrift, die nur visuell fett dargestellt, aber nicht als
<h2>ausgezeichnet ist, wird nicht als Überschrift erkannt.Ein Link, der per JavaScript als klickbar gemacht wurde, aber im DOM nur ein
<div>ist, wird nicht als interaktives Element erkannt.
Eigenschaften eines barrierefreien DOM
Ein barrierefreies DOM ist:
logisch aufgebaut mit klarer Struktur
semantisch korrekt (z. B. Nutzung von echten Überschriften, Listen, Formularfeldern)
vollständig zugänglich per Tastatur und Screenreader
anpassbar (z. B. durch Textvergrößerung, Zoom, alternative Eingabemethoden)
Die Qualität des DOMs entscheidet darüber, ob digitale Barrierefreiheit überhaupt technisch möglich ist.
Was beeinflusst das DOM?
Das DOM entsteht beim Laden einer Seite und verändert sich ggf. durch:
HTML- und CSS-Code (Struktur, Layout)
JavaScript-Interaktionen (z. B. Dropdown öffnen, Inhalte nachladen)
Frameworks (z. B. React, Angular, Vue – generieren DOM-Strukturen dynamisch)
ARIA-Attribute (zur Ergänzung fehlender Semantik)
Wichtig: Versteckte Inhalte per display: none oder aria-hidden="true" erscheinen nicht im DOM bzw. im Accessibility Tree – und sind für Screenreader-Nutzer:innen nicht verfügbar.
Tools zur DOM-Analyse
Browser-Entwicklertools (z. B. in Chrome, Firefox, Safari)
Accessibility Inspector in Firefox oder Chrome
axe, WAVE, Lighthouse – zeigen DOM-basierte Accessibility-Probleme
Screenreader-Test mit NVDA oder VoiceOver – zeigt, wie das DOM interpretiert wird
DOM und gesetzliche Standards
Ein korrekt aufgebautes DOM ist Voraussetzung für die Einhaltung vieler Richtlinien:
WCAG 1.3.1 (Info and Relationships) – verlangt strukturierte Inhalte im Code
WCAG 4.1.1 / 4.1.2 (Parsing / Name, Role, Value) – fordern, dass das DOM maschinenlesbar ist
BITV, EN 301 549 – beziehen sich auf semantische Strukturierung im DOM
