Was du über barrierefreie Websites wissen musst

1. Definition: Was ist digitale Barrierefreiheit?

2. Recht: Was gilt für die Barrierefreiheit?

3. Praxis: Wie du deine Website barrierefreie umsetzt

1.1 Barrierefreie Website – einfach erklärt

Eine barrierefreie Umsetzung, ermöglicht auch Menschen mit körperlichen, geistigen oder sprachlichen Einschränkungen eine Website ohne fremde Hilfe zu nutzen. Der Besucher sollten in der Lage sein, unabhängig von individuellen oder technischen Hindernissen, alle Inhalte zu erfassen und mit ihnen zu interagieren. Dafür muss sie nicht nur inhaltlich und optisch entsprechend aufbereitet sein, sondern auch technisch so umgesetzt werden, dass assistive Technologien (zum Beispiel Screenreader, Vergrößerungs-Software, Vorlese-Software oder alternative Eingabegeräte) sie verarbeiten können. Nur so kannst du gewährleisten, dass der Inhalt deiner Website auch beeinträchtigten Nutzer zugänglich ist, die auf diese Technologien angewiesen sind.

1.2 Typische Barrieren einer Website

Geht es um den Besuch einer Website, können Menschen auf verschiedene Weise eingeschränkt sein. Sehbehinderungen, angefangen von einer leichten Sehschwäche, über Farbsehstörungen bis hin zu vollständigen Blindheit können bei der Nutzung einer Website zu einer echten Herausforderung werden oder gar unmöglich machen. Personen, die taub sind, oder Hörbeeinträchtigungen haben, sind komplett anders herausgefordert, wenn die Inhalte abhängig davon sind, gehört zu werden. Nicht selten sind aber auch motorische Einschränkungen vorhanden, beispielsweise durch fehlende Gliedmaßen. Solche Fällen können die Nutzung der Maus oder Tastatur unmöglich machen, was den Zugang zu Webinhalten extrem erschwert. An eine Personengruppe denkt man beim Thema Barrierefreiheit aber so gut wie nie: Personen, die nur für eine bestimmte Zeit eingeschränkt sind. Eine gebrochene Hand, ein vorübergehend verlorenes Gehör etc. kommen nicht selten vor.

2.1 Wer regelt die Barrierefreiheit?

Ich weiß, der nächste Abschnitt liest sich schwer. Aber für die, die es genau wissen wollen, ein paar Sätze dazu, wer die Barrierefreiheit fordert und die Standards dafür entwickelt.

Die Web Content Accessibility Guidelines (WCAG) bilden die global anerkannten Standards für barrierefreies Webdesign, die vom World Wide Web Consortium (W3C) festgelegt werden. Initiiert werden sie durch die Web Accessibility Initiative (WAI), eine spezielle Gruppe innerhalb des W3C.

Obwohl die Vorgaben der WAI keine gesetzliche Bindung haben, dienen sie als Richtlinie für nationale Regelungen zur Barrierefreiheit, wie zum Beispiel die Barrierefreie-Informationstechnik-Verordnung (BITV) in Deutschland. Diese Regelungen beziehen sich insbesondere auf alle öffentlich zugänglichen Online-Angebote der Bundesbehörden. Private und kommerzielle Websites sind zwar nicht direkt einbezogen, dennoch wird empfohlen, sich an den WCAG des W3C zu orientieren.

2.2 Was gilt seit/ab wann?

Seit 2002

Seit 2002 schreibt der nachfolgende Paragraph 3 des Deutschen Behindertengleichstellungsgesetzes vor, dass Webangebote ohne Barrieren gestaltet sein müssen.

Seit 2016

Mit dem Inkrafttreten der EU-Richtlinie 2016/2102 im Jahr 2016 wurde ein barrierefreier Zugang zu Webseiten und mobilen Anwendungen öffentlicher Stellen vorgeschrieben. Die EU-Mitgliedsstaaten hatten bis 2018 Zeit, diese Vorgaben umzusetzen, was unter anderem zu einer Überarbeitung der BITV 2.0 führte. Seitdem ist es erforderlich, dass alle digitalen Inhalte, einschließlich Office-Dokumente und PDFs, barrierefrei sind. Für nicht-webbasierte mobile Apps gilt diese Anforderung seit Mitte 2021.

Ab 2025

Ab dem Jahr 2025 wird die Norm EN 2019/882 im Rahmen des Barrierefreiheitsstärkungsgesetzes (BSFSG) angewendet, um einen einheitlichen Zugänglichkeitsstandard für Dienstleistungen und Produkte im Internet zu schaffen.

3.1 Prinzipien zur barrierefreien Umsetzung

Wahrnehmbar, bedienbar, verständlich und robust: Diese Anforderungen an barrierefreies Webdesign stammen aus den Web Content Accessibility Guidelines (WCAG), dem international anerkannten Standard für die Zugänglichkeit von Webinhalten. Die Einhaltung dieser Prinzipien und der zugehörigen Richtlinien stellt sicher, dass deine Webinhalte für ein breiteres Publikum zugänglich sind, einschließlich derjenigen mit Behinderungen, und verbessert gleichzeitig die Benutzerfreundlichkeit für alle Nutzer.

wahrnehmbar

Informationen und Benutzeroberflächenelemente müssen so angeboten werden, dass sie von Nutzern wahrgenommen werden können. Dies bedeutet, dass Nutzer die Inhalte auf verschiedene Weisen wahrnehmen können (z.B. visuell, auditiv, haptisch). Das erfordert bei deinen Inhalten grundsätzlich die Anpassungsfähigkeit der Darstellung (z.B. Aussehen der Texte) und in manchen Punkten das Bereitstellung von Alternativen (z.B. Text statt Bild).

bedienbar

Interaktive Elemente und die Navigation deiner Website müssen trotz Einschränkungen bedienbar sein. Dies bedeutet, dass Nutzer die Website bedienen können, unabhängig davon, ob sie eine Maus, eine Tastatur, eine Sprachsteuerung oder ein anderes Eingabegerät verwenden. Wichtige Aspekte sind hier beispielsweise die Tastaturnavigation und ausreichende Zeit für die Bedienung.

verständlich

Die bereitgestellten Inhalte und die Bedienung deiner Website müssen verständlich sein. Dies beinhaltet neben den einfach zu verstehenden Inhalten auch die Vorhersehbarkeit der Webseitennavigation und -funktionen. Ein verständlicher Aufbau berücksichtigt auch die Hilfe zur Fehlervermeidung und -korrektur.

robust

Deine Website muss robust umgesetzt sein, damit die Inhalte von einer möglichst breiten Palette an Webbrowsern und Assistenztechnologien problemlos interpretiert werden können. Dies erfordert vor allem einen sauberen, standardkonformen Code.

3.2 Deine wichtigsten To-dos

Wenn du die nachfolgenden ToDos bei der Umsetzung deiner Website berücksichtigt und abarbeitest, setzt du alle vier oben beschriebenen Anforderungen um. So wird deine Seite bestmöglich barrierefrei! Viel Spaß bei der Umsetzung!

Klare Abgrenzung zwischen Inhalt und Design

Wenn du deine Website barrierefrei umsetzen willst, ist es essenziell, eine klare Linie zwischen Inhalt und Design zu ziehen. Mach aus Inhalten keine dekorativen Elemente, indem du beispielsweise eine Überschrift als illustriertes Bilde einbindest. Was für Nutzer ohne Sehbeeinträchtigungen vielleicht richtig gut aussieht, kann beispielsweise für Menschen, die auf Screenreader angewiesen sind, eine Barriere darstellen. Eine Überschrift als Bild kann von diesen Hilfsmitteln nicht als Text erfasst und somit nicht vorgelesen werden. Außerdem geht mit fehlenden Überschriften auch die Struktur für Übersicht und Navigation verloren. Zugänglichkeit ist wichtiger als Ästhetik! Sorge dafür, dass dein Inhalt in reiner Textform vorliegt und somit von Hilfstechnologien erkannt und interpretiert werden kann.

Sauber aufgebaute Struktur

Nutze Überschriften (h1 bis h6) auf deiner Webseite in hierarchischer Reihenfolge. Beginne mit einer einzigen h1-Überschrift, die das Hauptthema angibt, gefolgt von h2 für Hauptabschnitte und h3 bis h6 für Unterabschnitte. Diese Struktur hilft nicht nur bei der Navigation und dem Verständnis der Seite, sondern ist auch für assistive Technologien wie Screenreader wichtig, um den Nutzern den Aufbau der Inhalte verständlich zu machen und bestimmte Inhalte auf einer großen Seite direkt ansteuern zu können. Das geht über Skip Links (o.a. Ankerlinks oder Sprungmarken), die du im besten Fall ganz oben einbaust.

Responsive Design

Sorge dafür, dass deine Website sich automatisch an verschiedene mobile Endgeräte wie Handys und Tablets anpasst. Bilder, Texte und Menüs müssen bei jeder Bildschirmgröße ausreichend groß und leicht zu bedienen sein. Mach Buttons und Links groß genug, damit sie auch auf Touchscreens mit dem Finger einfach zu tippen sind, und stelle sicher, dass auch die Abstände zwischen Buttons groß genug sind, damit es nicht zu Fehlklicks kommt.

Navigation

Eine einfache und intuitive Navigation ist der Schlüssel zu einer barrierefreien Webseite. Stelle sicher, dass dein Menü übersichtlich und logisch strukturiert ist, sodass Nutzer schnell und ohne Umwege zu den gewünschten Informationen kommen. Verwende klare und verständliche Bezeichnungen für alle Navigationspunkte und vermeide Fachjargon, der für Außenstehende schwer verständlich sein könnte. Es ist auch wichtig, eine konsistente Navigation über die gesamte Webseite hinweg beizubehalten, damit Nutzer sich nicht neu orientieren müssen, wenn sie von einer Seite zur anderen wechseln. Hilfreich bei großen Seiten ist auch die Bereitstellung einer Breadcrumb-Navigation oder einer Sitemap, die einen Überblick über die Struktur der Webseite gibt und die Orientierung erleichtert. Vergiss nicht, dass die Navigation auch für Nutzer zugänglich sein muss, die keine Maus verwenden können. Stelle sicher, dass alle Navigationspunkte über die Tastatur erreichbar sind und dass dynamische Menüs oder Dropdowns ebenfalls vollständig über Tastaturbefehle bedient werden können.

Suche

Vor allem bei umfangreichen Websites ist eine gut zugängliche Suchfunktion wichtig, um die Barrierefreiheit deiner Webseite zu verbessern. Stelle sicher, dass die Suchleiste prominent platziert und auf allen Seiten deiner Webseite leicht zu finden ist. Die Suchleiste sollte einfach zu bedienen sein und klare Anweisungen oder Hinweise enthalten, die den Nutzern helfen, ihre Suchanfragen effektiv zu formulieren. Es ist auch wichtig, dass die Suche tolerant gegenüber Rechtschreibfehlern ist und sinnvolle Ergebnisse liefert, selbst wenn Nutzer nicht genau den richtigen Begriff oder die exakte Schreibweise verwenden. Darüber hinaus kann die Integration von Filter- und Sortieroptionen in die Suchergebnisse Nutzern helfen, die relevantesten Informationen schneller zu finden.

Sprache

Verwende auf deiner Webseite eine einfache Sprache und vermeide komplexe Satzstrukturen sowie den übermäßigen Gebrauch von Fremdwörtern. Wähle klare, direkte Ausdrucksweisen und reduziere Fachjargon. Sollten spezifische Begriffe notwendig sein, erwäge die Einbindung eines Glossars oder die Bereitstellung von Erläuterungen direkt im Kontext.

Schrift

Wähle eine Schrift, die auch bei kleineren Größen oder auf verschiedenen Bildschirmen sehr gut lesbar ist. Vermeide Schriftarten, die zu verspielt oder verziert sind. Serifenlose Schriftarten sind hier wegen ihrer Klarheit und Einfachheit für Bildschirmtexte ganz klar im Vorteil. Die Standard-Schriftgröße deiner Website sollte grundsätzlich nicht zu klein sein. Für eine barrierefreie Website solltest du aber auch die Möglichkeit anbieten, die Schriftgröße durch eine implementierte Funktion nach individuellen Bedürfnissen anzupassen. Dafür ist es zum einen entscheidend, Schriftgrößen mit relativen Größeneinheiten wie Prozent oder em statt fester Pixelwerte einzubauen. Teste zudem die Lesbarkeit deiner Website bei verschiedenen Schriftgrößen und stelle sicher, dass Inhalte stets vollständig und ohne Überlappungen dargestellt werden.

Texte

Texte sollten nicht über die gesamte Bildschirmbreite laufen, insbesondere bei Desktop-Computern und Notebooks. Stattdessen sind sie linksbündig in Flattersatz zu setzen, um die Lesbarkeit zu verbessern. Achte auf lesefreundliche Abstände zwischen Buchstaben, Wörtern, Zeilen und Absätzen, um das Lesen zu erleichtern und die Textstruktur übersichtlich zu gestalten. Darüber hinaus ist es wichtig, Verlinkungen innerhalb deiner Texte deutlich zu markieren. Dies kann durch Unterstreichungen und/oder die Verwendung einer eigenen Farbe erfolgen, die sich vom restlichen Text abhebt. Solche visuellen Hinweise helfen Nutzern, Links schnell zu identifizieren und fördern eine intuitive Navigation auf deiner Seite.

Akronyme und Abkürzungen

Verwende das <abbr>-Element für eine klare Kennzeichnung. Das HTML-Element <abbr> wird verwendet, um Text als eine Abkürzung oder ein Akronym zu markieren, das für ein längeres Wort oder einen längeren Ausdruck steht. Browser heben solchen Text üblicherweise durch eine punktierte Unterstreichung hervor und zeigen die zugehörige Erklärung an, wenn man mit dem Mauszeiger (Hover-Effekt) drüberfährt.

Wenn Nutzer mit der Maus über diese Elemente fahren, sollte ein Tooltip erscheinen, der die vollständige Bedeutung anzeigt. Perfekt Barrierefrei ist das allerdings nicht für alle potentiell eingeschränkten Personen, da Nutzer, die keine Maus verwenden oder auf Sprachausgabe angewiesen sind, diese Informationen nicht erhalten können. Verzichte daher lieber auf eine Abkürzung, wenn die ausgeschriebene Version keinen echten Nachteil hat.

Alternative Texte

Stelle sicher, dass alle Bilder und visuellen Medien auf deiner Webseite mit alternativen Texten (Alt-Texten) versehen sind. Diese Beschreibungen sind für Nutzer, die assistive Technologien wie Screenreader verwenden, unerlässlich, da sie den Inhalt der Bilder in Worte fassen. Ein guter Alt-Text beschreibt klar und knapp, was auf dem Bild zu sehen ist, und warum es relevant ist. Dies verbessert nicht nur die Zugänglichkeit deiner Webseite, sondern unterstützt auch die Suchmaschinenoptimierung (SEO). Achte darauf, dass die Alt-Texte informativ sind und den Kontext des Bildes innerhalb deiner Inhalte widerspiegeln, um ein inklusives Erlebnis für alle Nutzer zu gewährleisten.

Farbe und Kontrast

Ein in ausreichend hoher Kontrast zwischen Text und dessen Hintergrund ist unerlässlich, um die Lesbarkeit für Nutzer mit eingeschränkter Sehkraft oder bei schlechten Lichtverhältnissen zu gewährleisten. Es gibt Tools, mit denen jeder Nutzer den Kontrast sogar individuellen Bedürfnissen anpassen kann. Bau diese im besten Fall auf deiner Website als Ergänzung ein. Grundsätzlich bist du aber schon auf einem guten Weg, denn du die Mindestkontrastverhältnisse der WCAG berücksichtigst – 3:1 für großen Text und 4,5:1 für normalen Text. Um deine Kontrastverhältnisses zu prüfen, kannst du folgendes Tool nutzen: contrastchecker.com

Farben sollten von dir so eingesetzt werden, dass sie auch für Nutzer mit Farbsehschwächen eine klare und unmissverständliche Navigation und Interaktion ermöglichen. Es ist wichtig, dass du dich zur Vermittlung von Informationen, Warnungen oder zur Unterscheidung von Elementen nicht ausschließlich auf Farben verlässt. Stattdessen solltest du zusätzliche Indikatoren wie Beschriftungen, Symbole oder Muster verwenden.

Alternative Texte

Stelle sicher, dass alle Bilder und visuellen Medien auf deiner Webseite mit alternativen Texten (Alt-Texten) versehen sind. Diese Beschreibungen sind für Nutzer, die assistive Technologien wie Screenreader verwenden, unerlässlich, da sie den Inhalt der Bilder in Worte fassen. Ein guter Alt-Text beschreibt klar und knapp, was auf dem Bild zu sehen ist, und warum es relevant ist. Dies verbessert nicht nur die Zugänglichkeit deiner Webseite, sondern unterstützt auch die Suchmaschinenoptimierung (SEO). Achte darauf, dass die Alt-Texte informativ sind und den Kontext des Bildes innerhalb deiner Inhalte widerspiegeln, um ein inklusives Erlebnis für alle Nutzer zu gewährleisten.

Audiovisuelle Inhalte

Achte beim Einbinden von Videos oder Audioinhalten auf deiner Webseite darauf, dass diese nicht automatisch starten oder im Hintergrund spielen. Denn manche Nutzer könnten darauf angewiesen sein, sich Inhalte vorlesen zu lassen. In diesem Fall wäre der Ton aus dem Video extrem hinderlich. Es ist wichtig, dass Nutzer die volle Kontrolle darüber haben, wann ein Video oder Audioinhalt startet und stoppt, auch um eine störende oder überwältigende Erfahrung zu vermeiden. Darüber hinaus ist es wichtig bei audiovisuellen Inhalten ein Transkript bereitzustellen und bei Videos Untertitel einzubinden. Diese Zusatzinformationen sind nicht nur für Nutzer mit Hörbehinderungen unerlässlich, sondern auch für diejenigen, die in lauter Umgebung oder in Situationen sind, in denen sie den Ton nicht einschalten können oder möchten.

Interaktive Elemente

Stelle sicher, dass alle interaktiven Elemente auf deiner Webseite, wie Menüs, Dialogfelder und Buttons, so aufbereitet sind, dass sie mit assistiven Technologien wie Screenreadern und speziellen Eingabegeräten vollständig nutzbar sind. Dies beinhaltet die korrekte Anwendung von ARIA-Rollen (Accessible Rich Internet Applications), die den Typ und den Zustand interaktiver Elemente beschreiben. Achte darauf, dass interaktive Elemente so gestaltet sind, dass sie durch Tastaturbefehle bedienbar sind und visuelle sowie textuelle Rückmeldungen geben, wenn sie aktiviert oder verändert werden.

Formularfelder

Sorge dafür, dass alle Formularfelder auf deiner Webseite klar beschriftet sind und dass jede Beschriftung eindeutig dem entsprechenden Feld zugeordnet ist. Dies hilft Nutzern, zu verstehen, welche Informationen wo eingegeben werden sollen, besonders wenn assistive Technologien wie Screenreader verwendet werden. Nutze zudem sinnvolle Platzhaltertexte, die einen Hinweis auf die erwartete Eingabe geben, aber stelle sicher, dass diese bei Fokussierung des Feldes verschwinden, um Verwirrung zu vermeiden. Implementiere außerdem Fehlermeldungen, die klar und direkt kommunizieren, was korrigiert werden muss, falls Nutzer beim Ausfüllen der Formulare auf Probleme stoßen. Ausreichend Zeit ist ein weiterer wichtiger Faktor, wenn es um das Ausfüllen eines Formulars geht. Jeder Nutzer sollte ohne Zeitdruck alle Daten eingeben und überprüfen können, auch wenn er etwas mehr Zeit braucht.

Captchas

Manche Captchas, besonders solche, die nur aus verzerrten Bildern oder Text bestehen, können für Menschen mit Sehbehinderungen oder anderen Einschränkungen schwer zu lösen sein. Am besten du verzichtest auf Captchas, oder wählst zumindest welche, die verschiedene Lösungsmöglichkeiten bieten, wie Hör-Captchas oder einfache Rätsel.

Pop-Ups

Beim Einsatz von Pop-Ups auf deiner Webseite ist die beste Wahl, ganz darauf zu verzichten. Viele Tools, wie Screenreader, haben Schwierigkeiten damit, und Pop-Ups können für Nutzer mit bestimmten Einschränkungen eine Barriere darstellen. Wenn du dennoch Pop-Ups verwenden musst, stelle sicher, dass sie leicht geschlossen werden können, insbesondere für Nutzer, die auf Tastaturbefehle angewiesen sind. Vermeide es, wichtige Informationen ausschließlich in Pop-Ups zu platzieren, da sie von einigen Nutzern oder Browsern blockiert werden könnten. Biete immer eine alternative Zugriffsmöglichkeit auf die Inhalte oder Funktionen, die du in den Pop-Ups zur Verfügung stellen möchtest. Vor allem ist es wichtig, deine Website mit verschiedenen Hilfstechnologien zu testen, um sicherzustellen, dass diese auch mit Pop-Ups funktionieren.

3.2 Tools, die dich unterstützen

Ich habe hier eine Auswahl an Tools zusammengestellt, die darauf ausgelegt sind, dir genau aufzuzeigen, inwiefern deine Webseite die Kriterien für Barrierefreiheit erfüllt. Diese nützlichen Tools ermöglichen es dir, nicht nur zu checken, wie zugänglich deine Website ist, sondern auch spezifische Schritte zu erkennen, die du umsetzen musst, um allen Nutzern eine barrierefreie und inklusive Erfahrung zu bieten.