Accessibility beyond Basics
Wie Sie komplexe Inhalte barrierefrei machen
in Webdesign
Barrierefreiheit ist kein Bonus, sondern ein Muss – und sie endet nicht bei Farbkontrasten, Tastaturnavigation oder der Beschreibung von Bildern. Je komplexer die Inhalte einer Website werden, desto höher die Anforderungen an ein inklusives Design. Nutzerinnen und Nutzer, die auf assistive Technologien wie Screenreader oder Tastatursteuerung angewiesen sind, stoßen gerade bei dynamischen Elementen oder datenlastigen Strukturen regelmäßig an Grenzen. Dabei lassen sich auch komplexe Inhalte barrierefrei gestalten – wenn Planung, Technik und Design von Anfang an ineinandergreifen.
Tabellen: Struktur sichtbar machen
Tabellen dienen der strukturierten Darstellung von Daten – und genau das muss auch für alle Benutzergruppen erfassbar bleiben. Screenreader-Nutzer*innen brauchen klare Hinweise auf Spalten- und Zeilenüberschriften. Dies gelingt durch semantisch korrektes HTML: thead, tbody, th, scope, caption und gegebenenfalls aria-describedby sind unverzichtbare Werkzeuge.
Auch die visuelle Darstellung muss mit der semantischen Struktur übereinstimmen. Werden beispielsweise Zellen visuell als Gruppen zusammengefasst (etwa per Hintergrundfarbe oder Linien), aber nicht programmatisch beschrieben, bleiben diese Zusammenhänge für Screenreader verborgen.
Große Tabellen sollten zusätzlich filterbar und in kleinere Bereiche unterteilbar sein – nicht nur aus Gründen der Übersichtlichkeit, sondern auch im Sinne der kognitiven Barrierefreiheit.
Dynamische Inhalte zugänglich machen
Single Page Applications, modale Dialoge, Lazy-Loaded Content oder dynamische Filterkomponenten sind aus modernen Interfaces nicht wegzudenken – für Nutzer*innen mit Screenreader oder alternativer Navigation bedeuten sie jedoch häufig eine Sackgasse.
Die wichtigste Regel lautet: Änderungen im DOM müssen kommuniziert werden. aria-live-Regionen, rollenbasierte Attribute (role="dialog", role="alert") und der gezielte Fokuswechsel per JavaScript stellen sicher, dass neue Inhalte auch wahrgenommen werden. Modale Dialoge müssen z. B. den Fokus aufnehmen, beim Schließen den vorherigen Fokus zurückgeben und per Escape-Taste schließbar sein.
Auch die Tastaturnavigation muss konsistent möglich bleiben. Oft wird vergessen, dass sich dynamisch eingeblendete Komponenten wie Akkordeons, Tabs oder Karussells in die natürliche Tab-Reihenfolge einfügen müssen. Ansonsten kommt es zu Frustration oder gar Funktionsverlust auf Seiten der Nutzer*innen.
Interaktive Komponenten mit Verantwortung gestalten
Dropdowns, Sortierfunktionen, Formularvalidierungen oder Drag-and-Drop: Interaktion ist oft das Herzstück einer Anwendung. Doch gerade hier kommt es auf Details an.
Dropdowns müssen auch per Pfeiltasten steuerbar sein, Formulare ihre Fehlermeldungen sowohl visuell als auch akustisch kommunizieren. Für Drag-and-Drop-Funktionalitäten empfiehlt sich ein paralleler Mechanismus, der dieselbe Aktion auch per Tastatur ermöglicht.
Genauso entscheidend wie Technik ist der Umgangston. Fehlermeldungen oder Statusnachrichten sollten nicht belehrend oder ironisch formuliert sein – das betrifft insbesondere Nutzergruppen mit kognitiven Einschränkungen oder Sprachbarrieren.
Accessibility von Anfang an gedacht
Als Digitalagentur begleiten wir Unternehmen beim Aufbau zugänglicher Webangebote – von der Konzeption bis zum Testing. Wir verwenden unter anderem:
- HTML mit semantischem Anspruch
- ARIA-Richtlinien nach WCAG 2.1 und dem European Accessibility Act
- Testverfahren mit Tastatur, Screenreader (NVDA, JAWS, VoiceOver) und mobilen Geräten
- Integration barrierefreier Komponenten in TYPO3, Symfony und React
Barrierefreiheit ist kein einmal erreichter Zustand, sondern ein kontinuierlicher Gestaltungsprozess – und dieser beginnt mit der bewussten Entscheidung, alle Nutzergruppen einzubeziehen.