Barrierefreiheit bei Webseiten

Eine barrierefreie Website ist für alle Menschen nutzbar, unabhängig von körperlichen oder technischen Einschränkungen. Das betrifft nicht nur Menschen mit Behinderungen, sondern auch ältere Nutzer, Menschen mit temporären Einschränkungen oder solche mit langsamen Internetverbindungen. In diesem Ratgeber erfahren Sie, warum Barrierefreiheit wichtig ist und wie Sie Ihre Website zugänglich gestalten.

Was bedeutet Barrierefreiheit im Web?

Barrierefreiheit, englisch Accessibility, bedeutet, dass alle Menschen eine Website nutzen können. Das schließt Menschen mit Sehbehinderungen, Hörbeeinträchtigungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen ein. Es geht aber auch um situationsbedingte Einschränkungen wie grelles Sonnenlicht, laute Umgebungen oder eingeschränkte Bewegungsfreiheit.

Eine barrierefreie Website passt sich verschiedenen Nutzungssituationen an. Sie funktioniert mit Screenreadern, lässt sich per Tastatur bedienen und bleibt auch ohne JavaScript oder Bilder verständlich.

Warum ist Barrierefreiheit wichtig?

Die Gründe für barrierefreie Webgestaltung sind vielfältig und gehen über moralische Verpflichtungen hinaus.

Größere Reichweite

Etwa 15 Prozent der Weltbevölkerung leben mit einer Form von Behinderung. Dazu kommen ältere Menschen mit nachlassender Seh oder Hörkraft. Eine barrierefreie Website erreicht diese Zielgruppen, die von nicht zugänglichen Angeboten ausgeschlossen sind.

Bessere Nutzererfahrung

Barrierefreiheit verbessert die Nutzererfahrung für alle. Klare Strukturen, gut lesbare Texte und intuitive Navigation helfen jedem Besucher. Was für Menschen mit Einschränkungen notwendig ist, ist für andere oft angenehm.

Suchmaschinenoptimierung

Viele Maßnahmen zur Barrierefreiheit verbessern auch das Suchmaschinenranking. Aussagekräftige Überschriften, beschreibende Linktexte und alternative Texte für Bilder helfen Suchmaschinen, den Inhalt zu verstehen.

Rechtliche Anforderungen

In vielen Ländern gibt es gesetzliche Vorgaben zur Barrierefreiheit. In der EU verpflichtet die European Accessibility Act Unternehmen ab 2025 zu barrierefreien digitalen Angeboten. Öffentliche Stellen müssen bereits heute barrierefreie Websites bereitstellen.

Grundprinzipien der Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) definieren vier Grundprinzipien für barrierefreie Websites.

Praktische Umsetzung

Die folgenden Maßnahmen verbessern die Barrierefreiheit Ihrer Website konkret.

Alternativtexte für Bilder

Jedes informative Bild braucht einen Alternativtext, der den Inhalt beschreibt. Screenreader lesen diesen Text vor, wenn Nutzer das Bild nicht sehen können. Der Text sollte prägnant und aussagekräftig sein.

• Beschreiben Sie, was auf dem Bild zu sehen ist
• Vermeiden Sie Formulierungen wie Bild von oder Foto zeigt
• Dekorative Bilder erhalten einen leeren Alternativtext
• Komplexe Grafiken brauchen ausführlichere Beschreibungen

Semantisches HTML

Verwenden Sie HTML Elemente entsprechend ihrer Bedeutung. Überschriften strukturieren den Inhalt hierarchisch. Listen kennzeichnen Aufzählungen. Tabellen sind für tabellarische Daten, nicht für Layouts. Diese semantische Struktur hilft assistiven Technologien, den Inhalt korrekt zu interpretieren.

Tastaturzugänglichkeit

Alle Funktionen der Website müssen per Tastatur erreichbar sein. Viele Nutzer können keine Maus verwenden und navigieren ausschließlich mit der Tastatur. Testen Sie, ob sich alle Links, Buttons und Formulare mit Tab und Enter bedienen lassen.

Farbkontraste

Text muss sich ausreichend vom Hintergrund abheben. Die WCAG empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Online Tools helfen, Kontrastverhältnisse zu prüfen und geeignete Farbkombinationen zu finden.

Schriftgrößen

Texte sollten vergrößerbar sein, ohne dass die Website unbenutzbar wird. Vermeiden Sie feste Schriftgrößen in Pixeln. Relative Einheiten wie em oder rem ermöglichen die Anpassung an Nutzereinstellungen. Die Website sollte bei 200 Prozent Vergrößerung noch funktionieren.

Formulare

Formulare brauchen klare Beschriftungen für jedes Eingabefeld. Fehlermeldungen sollten verständlich sein und konkret angeben, was falsch ist und wie es korrigiert werden kann. Pflichtfelder müssen eindeutig gekennzeichnet sein.

Screenreader Kompatibilität

Screenreader sind Programme, die Bildschirminhalte vorlesen. Sie interpretieren die Struktur der Website und navigieren durch die Elemente. Eine screenreaderfreundliche Website folgt bestimmten Konventionen.

Überschriftenhierarchie

Verwenden Sie Überschriften in logischer Reihenfolge. Nach einer H1 folgt H2, dann H3. Überspringen Sie keine Ebenen. Screenreader Nutzer orientieren sich an Überschriften und springen zwischen ihnen hin und her.

Sprunglinks

Ein Link am Seitenanfang, der direkt zum Hauptinhalt führt, spart Screenreader Nutzern das wiederholte Durchhören der Navigation. Dieser Skip Link kann für sehende Nutzer visuell versteckt, aber für Tastaturbedienung und Screenreader zugänglich sein.

ARIA Attribute

ARIA (Accessible Rich Internet Applications) Attribute ergänzen HTML um zusätzliche Informationen für assistive Technologien. Sie beschreiben Rollen, Zustände und Eigenschaften von Elementen, die nicht durch natives HTML ausgedrückt werden können. ARIA sollte sparsam und korrekt eingesetzt werden.

Videos und Multimedia

Multimediale Inhalte erfordern besondere Aufmerksamkeit für die Barrierefreiheit.

Untertitel

Videos mit gesprochenem Inhalt brauchen Untertitel für gehörlose und schwerhörige Nutzer. Automatische Untertitel sind ein Anfang, sollten aber auf Korrektheit geprüft werden.

Audiodeskription

Für blinde Nutzer beschreibt eine Audiodeskription, was im Video visuell passiert. Das ist besonders wichtig, wenn visuelle Elemente für das Verständnis relevant sind.

Transkripte

Ein Texttranskript des gesamten Audio und Videoinhalts bietet eine Alternative für alle, die das Medium nicht direkt konsumieren können oder wollen. Transkripte sind auch für Suchmaschinen wertvoll.

Mobile Barrierefreiheit

Mobile Geräte bringen eigene Herausforderungen für die Barrierefreiheit mit sich.

Touch Ziele

Buttons und Links brauchen ausreichend große Trefferflächen. Die WCAG empfehlen mindestens 44 mal 44 Pixel für Touch Ziele. Zu kleine Elemente sind für Menschen mit motorischen Einschränkungen oder Sehbehinderungen schwer zu treffen.

Bildschirmlesemodus

Mobile Betriebssysteme haben eingebaute Bildschirmleser wie VoiceOver (iOS) und TalkBack (Android). Testen Sie Ihre Website mit diesen Tools, um die mobile Zugänglichkeit zu prüfen.

Responsive Design

Ein responsives Layout passt sich verschiedenen Bildschirmgrößen an und ist grundlegend für mobile Barrierefreiheit. Inhalte sollten nicht horizontal scrollen und bei jeder Größe gut lesbar sein.

Testen der Barrierefreiheit

Regelmäßige Tests stellen sicher, dass die Website tatsächlich zugänglich ist.

Automatisierte Tests

Werkzeuge wie WAVE, axe oder Lighthouse prüfen automatisch auf häufige Barrierefreiheitsprobleme. Sie finden fehlende Alternativtexte, Kontrastprobleme und strukturelle Fehler. Automatische Tests decken etwa 30 Prozent der möglichen Probleme auf.

Manuelle Tests

Ergänzende manuelle Tests sind unverzichtbar. Navigieren Sie die Website nur mit der Tastatur. Verwenden Sie einen Screenreader. Prüfen Sie, ob alle Inhalte auch bei vergrößerter Ansicht oder deaktivierten Bildern verständlich bleiben.

Nutzertests

Die wertvollsten Erkenntnisse kommen von Menschen, die assistive Technologien täglich nutzen. Wenn möglich, beziehen Sie Menschen mit verschiedenen Behinderungen in die Tests ein.

Häufige Fehler vermeiden

Diese Probleme treten häufig auf und lassen sich meist einfach beheben.

• Bilder ohne Alternativtext
• Links mit nichtssagendem Text wie hier klicken
• Unzureichender Farbkontrast
• Fehlende Formularfelder Beschriftungen
• Inhalte nur per Maus erreichbar
• Automatisch abspielende Videos oder Audios
• Zeitlimits ohne Verlängerungsmöglichkeit
• Fehlende Dokumentensprache

Barrierefreiheit und Performance

Barrierefreie Websites sind oft auch performanter. Sauberer Code, optimierte Bilder und effiziente Strukturen verbessern sowohl die Zugänglichkeit als auch die Ladezeit.

Barrierefreiheit im CMS

Content Management Systeme können Barrierefreiheit unterstützen oder erschweren. Wählen Sie ein CMS und Theme, die auf Zugänglichkeit ausgelegt sind. Schulen Sie Redakteure im Umgang mit Alternativtexten, Überschriften und anderen barrierefreien Inhalten.

Schrittweise Verbesserung

Eine vollständig barrierefreie Website von Anfang an ist ideal, aber auch nachträgliche Verbesserungen sind wertvoll. Beginnen Sie mit den wichtigsten Bereichen und erweitern Sie schrittweise.

Prioritäten setzen

1. Navigation und Hauptinhalte zugänglich machen
2. Alternativtexte für alle wichtigen Bilder
3. Formulare korrekt beschriften
4. Farbkontraste prüfen und anpassen
5. Tastaturzugänglichkeit sicherstellen
6. Multimedia Inhalte mit Alternativen versehen

Dokumentation und Erklärung

Eine Barrierefreiheitserklärung informiert Nutzer über den Stand der Zugänglichkeit. Sie beschreibt, welche Maßnahmen getroffen wurden, welche Einschränkungen bestehen und wie Nutzer Feedback geben können. Für öffentliche Stellen ist eine solche Erklärung in vielen Ländern Pflicht.

Langfristiges Engagement

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Neue Inhalte müssen zugänglich erstellt werden. Änderungen am Design oder an der Technik erfordern erneute Prüfungen. Regelmäßige Audits helfen, den Standard zu halten.

Barrierefreie Websites sind bessere Websites für alle. Die Investition in Zugänglichkeit zahlt sich durch größere Reichweite, bessere Nutzererfahrung und Rechtssicherheit aus.

Weiterführende Informationen finden Sie in unseren Ratgebern zur Website Performance und zu Kontaktformularen.