Webseite barrierefrei gestalten: So erreichen Sie alle Nutzer problemlos

Eine barrierefreie Website ist entscheidend, um vielen Menschen den Zugang zu Ihren Inhalten zu ermöglichen. Jeder Besucher sollte in der Lage sein, die Informationen auf Ihrer Unternehmenswebseite zu lesen, zu verstehen und zu nutzen, ganz gleich, ob individuellen oder technischen Hindernisse vorliegen. Besonders Menschen, die auf unterstützende Technologien angewiesen sind, profitieren von barrierefreien Webangeboten. Wir zeigen Ihnen, worauf Sie bei der Erstellung barrierefreier Webinhalte achten sollten und wie Sie die Barrierefreiheit der Seite Ihres Unternehmens überprüfen können – einschließlich einer Checkliste, die alle wichtigen Vorgaben berücksichtigt.

Was ist eine barrierefreie Webseite?

Eine barrierefreie Website ist ein Online-Angebot, das ohne zusätzliche Installationen oder technische Hürden für jeden zugänglich ist. Dies bedeutet nicht nur, dass Menschen mit körperlichen oder geistigen Einschränkungen die Seite problemlos nutzen können, sondern auch, dass die Website für viele Besucher unabhängig von ihren individuellen Bedürfnissen und technischen Voraussetzungen zugänglich ist.

Ziel einer barrierefreien Website ist es, vielen Nutzern den Zugang zu sämtlichem Content sowie allen Interaktionsmöglichkeiten zu erleichtern, unabhängig von ihren individuellen Bedürfnissen oder technischen Voraussetzungen. Für Sie als Betreiber bedeutet das, dass Sie die Anforderungen der Barrierefreiheit berücksichtigen und dabei auch die verschiedenen Nutzerbedürfnisse einbeziehen müssen. Ihre Website sollte für sehende Menschen visuell ansprechend und gleichzeitig auch für Menschen, die Hilfsmittel zur Nutzung benötigen, leicht verständlich und zugänglich sein.

Welche sind die häufigsten Hürden für Nutzer von Webseiten?

Zu den Barrieren gehören sowohl technische Hindernisse als auch körperliche, geistige und emotionale Schranken, welche im §3 des österreichischen Behindertengleichstellungsgesetzes (BGStG) festgehalten sind. Darüber hinaus gibt es zahlreiche Hürden, die nur vorübergehend bestehen. Nachfolgend finden Sie eine Liste der Barrieren, die bei der Gestaltung Ihrer Website berücksichtigt werden müssen.

Technische Hürden:

• Langsame Ladezeiten

• Fehlende Mobiloptimierung

• Inkompatibilität mit verschiedenen Browsern

Visuelle Barrieren:

• Unzureichender Kontrast: Texte und Hintergründe mit niedrigem Kontrast sind für sehbehinderte Nutzer schwer lesbar.

• Kleine Schriftgröße: Eine zu kleine Schrift erschwert das Lesen für Menschen mit eingeschränktem Sehvermögen.

• Fehlende Bildbeschreibungen (Alt-Text): Bilder ohne Textalternativen sind für sehbehinderte Nutzer, die Screenreader verwenden, nicht zugänglich.

Motorische Barrieren:

• Komplexe Navigation: Webseiten mit einer komplizierten oder schlecht strukturierten Navigation.

• Mangelnde Tastatursteuerung: Viele Webseiten sind nicht vollständig mit der Tastatur navigierbar.

Kognitive Hürden:

• Überfrachtete Inhalte: Zu viele Informationen auf einer Seite oder schwer verständliche Texte ohne zusätzliche Erklärungen können es Nutzern mit kognitiven Einschränkungen erschweren, die Inhalte zu verstehen.

• Unklare Sprache: Komplexe oder technische Sprache kann Nutzer mit Lernschwierigkeiten oder Nicht-Muttersprachlern verwirren.

Akustische Barrieren:

• Autoplay von Medieninhalten: Wenn Videos oder Audiodateien automatisch starten, kann dies Menschen mit Hörbehinderungen oder diejenigen, die auf eine bestimmte Reihenfolge angewiesen sind, stören.

• Fehlende Untertitel: Videos ohne Untertitel machen es für gehörlose oder schwerhörige Nutzer schwierig, den Inhalt zu verstehen.

Zeitliche Barrieren:

• Temporäre Zeitlimits

Barrieren durch unzugängliche Formulare:

• Unklarer Formularaufbau

Gesetzliche Grundlagen zur barrierefreien Website

Ab dem 28. Juni 2025 tritt eine verbindliche Frist für barrierefreie Websites und digitale Dienstleistungen in Kraft. Unternehmen und öffentliche Einrichtungen sind dann verpflichtet, ihre Web- und App-Angebote an die neuen Barrierefreiheitsstandards anzupassen. Die Regelungen gelten sowohl für neu veröffentlichte als auch für wesentlich überarbeitete digitale Angebote. Bei Nichteinhaltung drohen rechtliche Konsequenzen, Abmahnungen und spürbare Wettbewerbsnachteile.

Die rechtlichen Grundlagen für barrierefreie digitale Angebote beruhen auf drei zentralen Regelwerken:

• EU-Richtlinie 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (European Accessibility Act): Diese EU-Vorgabe schafft europaweit einheitliche Mindestanforderungen an digitale Barrierefreiheit und betrifft sowohl Unternehmen als auch öffentliche Stellen.

• Laut dem Web-Zugänglichkeits-Gesetz (WZG) ist die Republik Österreich verpflichtet, die Internetseiten und mobilen Anwendungen des Bundes so zu gestalten, dass sie internationalen Standards zur Webzugänglichkeit entsprechen und insbesondere den barrierefreien Zugang für Menschen mit Behinderungen gewährleisten.

• Das Barrierefreiheitsgesetz (BaFG) setzt die europäische Barrierefreiheitsrichtlinie (RL 2019/882) um, die Anforderungen an die Barrierefreiheit von Produkten und Dienstleistungen regelt. Es gilt für Produkte und Dienstleistungen (einschließlich Webshops und Online-Terminbuchungstools), die ab dem 28. Juni 2025 auf den Markt kommen oder für Verbraucher angeboten werden.

• im Bereich der Bundesverwaltung (hinsichtlich des barrierefreien Web gibt es hier allerdings die Sonderbestimmung des WZG) und

• überall dort, wo es um den Zugang zu und die Versorgung mit Gütern und Dienstleistungen geht, die der Öffentlichkeit zur Verfügung stehen (insbesondere Handel und Dienstleistungen), wenn der Bund dafür die Regelungskompetenz hat (z. B. das Vertragsrecht).

Die technischen Anforderungen orientieren sich an den Web Content Accessibility Guidelines (WCAG) 2.1, mindestens in der Konformitätsstufe AA.

Zuständige Marktüberwachungsbehörden und Kontrollstellen wachen über die Einhaltung der Vorschriften. Zusätzlich können Verbraucherverbände oder Mitbewerber Verstöße abmahnen, was insbesondere für Unternehmen ein rechtliches und wirtschaftliches Risiko darstellt.

Wer ist verpflichtet?

Nicht alle Webseitenbetreiber sind gleichermaßen betroffen. Je nach Art und Größe des Unternehmens oder der Organisation gelten unterschiedliche Verpflichtungen:

Zum Teil müssen nachfolgende Unternehmen und Einrichtungen bereits seit September 2018 ihre Website barrierefrei gestaltet haben, zum Teil sind sie dazu erst bis Juni 2025 verpflichtet:

• Unternehmen mit digitalen Angeboten wie Online-Shops, Buchungssystemen oder Ticketportalen – sofern sie keine Kleinunternehmen sind

• Öffentliche Stellen wie Bundes- und Landesverwaltungen, Gemeinden, Universitäten, Fachhochschulen und öffentliche Gesundheitseinrichtungen

• Banken, Kammern (z. B. Wirtschaftskammer, Arbeiterkammer), Energieversorger sowie Betriebe des öffentlichen Verkehrs (z. B. ÖBB, Wiener Linien)

• Schulen und Kindergärten, sofern sie digitale Informations- oder Verwaltungsdienste anbieten

Keine Pflicht zur barrierefreien Website besteht für:

• Privatpersonen mit eigener Website oder privatem Blog

• Kleinunternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme unter 2 Millionen Euro

• Reine B2B-Unternehmen, deren Angebote sich ausschließlich an andere Unternehmen richten und nicht unter die oben genannten Kategorien fallen

Die gesetzlichen Anforderungen gelten nicht nur für klassische Websites, sondern auch für mobile Apps, digitale Serviceportale, elektronische Produktinformationen, Online-Banking-Angebote und andere digitale Schnittstellen. Entscheidend ist, ob ein Nutzer oder eine Nutzerin digital mit Ihrem Unternehmen interagiert – und ob dabei Barrieren bestehen, die bestimmte Personengruppen ausschließen.

Stellen Sie Ihre Website auf die Prüfung – wir liefern die Checkliste

Unsere Checkliste deckt grundlegende Punkte bei der Prüfung einer Webseite auf Barrierefreiheit ab, um sicherzustellen, dass sie für viele Nutzer zugänglich ist.

Die regelmäßige Nutzung von Barrierefreiheits-Tools und Feedback von tatsächlichen Nutzern mit Einschränkungen kann helfen, die Webseite weiter zu optimieren und auf verschiedene Konformitätsstufen auszurichten. An dem Schritt der Prüfung sollten sich die Festlegung von Maßnahmen und deren Umsetzung anschließen.

1. Textalternativen (Alternativtexte) für Bilder und Medien

• Sind alle Bilder mit einem beschreibenden Alt-Text versehen? (Wichtig für Screenreader)

• Wurde der Alt-Text für dekorative Bilder entfernt oder leer gelassen (alt=““)?

• Sind Videoinhalte mit Untertiteln oder Transkripten versehen?

• Gibt es Audiomaterial mit Transkripten?

2. Navigationsmöglichkeiten

• Ist die Tastaturnavigation vollumfänglich nutzbar? (Tab-Taste, Enter, Pfeiltasten)

• Können alle interaktiven Elemente (z. B. Formulare, Links, Buttons) ohne Maus bedient werden?

• Existieren klare und einfache Möglichkeiten, zu wichtigen Inhalten zu springen (z. B. Skip-Links)?

3. Farbkontraste und Textgestaltung

• Gibt es ausreichend Farbkontrast zwischen Text und Hintergrund (mindestens 4.5:1 für normalen Text)?

• Ist der Text auf der Seite skalierbar und bleibt lesbar, auch wenn er vergrößert wird (z. B. auf 200 %)?

• Werden alternative Darstellungsmöglichkeiten für farbliche Markierungen angeboten (z. B. zusätzliches Symbol bei Farbcodierungen)?

4. Formularzugänglichkeit

• Sind alle Formularfelder eindeutig beschriftet und enthalten sinnvolle Label?

• Sind Hinweise zu Fehlern beim Ausfüllen der Formulare verfügbar und verständlich?

• Können Formulare sowohl mit Tastatur als auch mit Screenreader bedient werden?

5. Kontraste und Farbdarstellung

• Wurde die Verwendung von Farben für die Kommunikation von Informationen minimiert (z. B. bei Fehlermeldungen oder Statusanzeigen)?

• Können Leser die Farbeinstellungen der Seite anpassen, um die Wahrnehmbarkeit zu erhöhen (z. B. durch Browser-Erweiterungen)?

6. Struktur und Layout

• Wird die Struktur der Webseite durch richtige HTML-Tags (z. B. Überschriften H1 bis H6, Absätze, Listen) klar und logisch gegliedert?

• Wird die Reihenfolge der Elemente beim Navigieren mit der Tastatur und mit einem Screenreader sinnvoll dargestellt?

• Wurden ARIA (Accessible Rich Internet Applications)-Labels korrekt verwendet, um interaktive Elemente zugänglicher zu machen?

7. Multimediale Inhalte

• Gibt es eine Möglichkeit, Videos und Audioinhalte zu pausieren, anzuhalten und zu steuern?

• Werden automatische Medien (z. B. Videos, Musik) mit einer klaren Möglichkeit zur Steuerung versehen (Play/Pause)?

• Wurde bei bewegten Inhalten (z. B. Animationen) eine Option zum Stoppen angeboten?

8. Fehlererkennung und -korrektur

• Werden Benutzer bei der Eingabe von fehlerhaften Formulardaten auf die Fehler hingewiesen?

• Gibt es klare, verständliche Fehlermeldungen mit Lösungen zur Korrektur?

• Sind Formulare und interaktive Elemente so gestaltet, dass Nutzer die Eingabefelder leicht ausfüllen können?

9. Mobiles und responsives Design

• Ist die Webseite auf mobilen Endgeräten vollständig zugänglich (z. B. Touchscreen-freundliche Navigation)?

• Wird der Inhalt auf verschiedenen Bildschirmgrößen korrekt und lesbar dargestellt?

• Kann die Webseite auf mobilen Geräten mit allen Funktionen verwendet werden wie auf Desktop-Geräten?

10. Technische Überprüfung

• Wird die Webseite mit Screenreadern (z. B. JAWS, NVDA) gut lesbar?

• Funktioniert die Webseite in verschiedenen gängigen Browsern (Chrome, Firefox, Safari, Edge)?

• Sind die grundlegenden SEO- und Barrierefreiheitsstandards (z. B. Meta-Tags, Title-Attribute) erfüllt?

Backendgrundlagen für barrierefreie Navigation

Für die barrierefreie Nutzung einer Website müssen Anpassungen in HTML und JavaScript vorgenommen werden, welche eine durchdachte Reihenfolge von Links und Steuerelementen ermöglichen. Dies erreichen Sie unter anderem durch das tabindex-Attribut. Zusätzlich sollten Sie ARIA (Accessible Rich Internet Applications) einsetzen, um die Zugänglichkeit für Screenreader-Nutzer zu verbessern.

tabindex

Links und Steuerelemente auf einer Seite werden standardmäßig durch die Tab-Taste in einer festgelegten Reihenfolge navigiert, basierend auf der Struktur des Quellcodes. In den meisten Fällen ist eine Anpassung der Tab-Reihenfolge nicht notwendig. Sollte sie dennoch erforderlich sein, kann das HTML-Attribut tabindex genutzt werden – allerdings ist diese Vorgehensweise nicht zu empfehlen.

Obwohl das tabindex-Attribut weiterhin unterstützt wird, sieht Google es als problematisch an, da es oft fehlerhaft umgesetzt wird und negative Auswirkungen auf die Nutzererfahrung haben kann.

ARIA (Accessible Rich Internet Application)

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) ist ein Webstandard des W3C, der es Webentwickler ermöglicht, Webseiten und Anwendungen für Menschen mit Behinderungen und anderen Einschränkungen zugänglich zu machen. Mithilfe von ARIA-Elementen können Navigations-Landmarken und JavaScript-Widgets hinzugefügt sowie dynamische Inhalte barrierefrei gestaltet werden. Die meisten modernen Browser und Screenreader unterstützen bereits ARIA.

ARIA wird vor allem verwendet, wenn HTML nicht über ausreichende semantische Struktur für Barrierefreiheit verfügt. Dabei ist es wichtig, die vorhandene Semantik des HTML nicht zu überschreiben.

Fazit: Bedeutung einer Barrierefreie Website

Die barrierefreie Gestaltung einer Website ist nicht nur eine ethische Verpflichtung, sondern auch eine wichtige Voraussetzung, um vielen Nutzern unabhängig von ihren Fähigkeiten oder technischen Mitteln den Zugang zu digitalen Informationen zu ermöglichen. Durch die Umsetzung von Aspekten wie technischer Barrierefreiheit, sinnvolle Gliederung, optimierte Schriftgrößen, Bereitstellung von Alternativtexten und Farbkontraste sowie die Verwendung von Alt-Texten für Bilder können viele Hindernisse für Menschen mit unterschiedlichen Einschränkungen überwunden werden. Durch regelmäßige Tests mithilfe von Tools und betroffenen Personen sowie Anpassungen gemäß einer klar strukturierten Checkliste lässt sich die Benutzerfreundlichkeit, Bedienbarkeit und Zugänglichkeit einer Website kontinuierlich verbessern, sodass viele Nutzer gleichermaßen von den Inhalten profitieren können.

Häufig gestellte Fragen

Was ist eine barrierefreie Webseite?

Eine barrierefreie Webseite ermöglicht vielen Personen, einschließlich Menschen mit Behinderungen oder Einschränkungen, uneingeschränkten Zugang zu den Inhalten, unabhängig von deren individuellen Bedürfnissen oder technischen Voraussetzungen.

Warum ist eine barrierefreie Webseite wichtig?

Eine barrierefreie Webseite stellt sicher, dass Menschen mit verschiedenen Beeinträchtigungen (wie Seh- oder Hörbehinderungen) die Inhalte auf der Seite genauso wahrnehmbar ist wie Menschen ohne Einschränkungen. Außerdem verbessert sie die allgemeine Benutzerfreundlichkeit und erreicht eine größere Zielgruppe.

Welche gesetzlichen Vorschriften gibt es für barrierefreie Webseiten?

In Österreich gelten die gesetzlichen Bestimmungen wie das Web-Zugänglichkeits-Gesetz (WZG) und das Barrierefreiheitsgesetz (BaFG) sowie die EU-Richtlinie 2016/2102, welche öffentliche Stellen verpflichten, ihre Webseiten barrierefrei zu gestalten.

Wie kann ich eine Webseite barrierefrei gestalten?

Hier einige Tipps: Achten Sie auf klare und strukturierte Inhalte, verwenden Sie kontrastreiche Farben, stellen Sie sicher, dass alle interaktiven Elemente mit der Tastatur bedienbar sind und fügen Sie Alt-Texte für Bilder und Transkripte für Videos hinzu.

Was sind die Web Content Accessibility Guidelines (WCAG)?

Die WCAG sind die international anerkannten Richtlinien für barrierefreies Webdesign. Sie bieten spezifische Empfehlungen, wie Websites gestaltet werden sollten, um für viele Nutzer zugänglich zu sein.

Was sind ARIA-Labels und wie verbessern sie die Barrierefreiheit?

ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, die Webentwicklern helfen, Webseiten für Menschen mit Behinderungen zugänglich zu machen, insbesondere durch die Unterstützung von Screenreadern und anderen assistiven Technologien.

Was ist die Bedeutung von Alt-Texten für Bilder?

Alt-Texte (alternative Texte) sind zum Beispiel für Webseitenbesucher wichtig, welche Screenreader verwenden. Dies beschreiben Bilder und Grafiken auf einer Webseite, sodass sie für Personen mit Sehbehinderung vorstellbar werden.

Beitragsbild © mekcar – #36265403