Seit 2020 müssen öffentliche Websites und Apps bereits barrierefrei zugänglich sein. Aber ab dem 28. Juni 2025 betrifft diese Anforderung auch Unternehmen aus der Privatwirtschaft. Das Barrierefreiheitsstärkungsgesetz (BFSG) macht das zur Pflicht. Klingt schlimmer als es ist, denn eine technisch einwandfreie Website hilft allen Nutzern und allen Maschinen. Das Auge isst schließlich mit und eine ansprechende Garnierung auf dem Teller befruchtet die Gaumenfreude ungemein! Wir zeigen dir die wichtigsten Punkte, auf die du achten solltest!
Barrierefreiheit ist wichtig für deine Nutzer und für die Auffindbarkeit deiner Website (SEO). Zudem werden Teile hiervon ab Mitte 2025 verpflichtend! Die WCAG fungiert dabei alsGrundlage nationaler Regeln, ist allerdings ein freiwilliger, internationaler Standard. Die BITV 2.0 basiert auf diesen Regelungen, ist allerding eine rechtliche Vorgabe in Deutschland – insbesondere für öffentliche Stellen.
Die BITV 2.0 ist ein wichtiges Instrument, um die digitale Inklusion in Deutschland zu fördern und sicherzustellen, dass alle Menschen gleichermaßen von digitalen Diensten und Informationen profitieren können. Sie dient der Umsetzung des Behindertengleichstellungsgesetzes und trägt zur Schaffung einer inklusiven Gesellschaft bei.
- Anwendungsbereich: Die BITV 2.0 gilt seit 2020 für öffentliche Stellen des Bundes und Einrichtungen, die dem Bund zugeordnet sind. Sie müssen sicherstellen, dass ihre digitalen Angebote barrierefrei sind. Ab 28. Juni 2025 wird dies auf Unternehmen der Privatwirtschaft angewandt.
- Anforderungen an Websites: Websites müssen so gestaltet sein, dass sie von Menschen mit unterschiedlichen Behinderungen, wie Seh- oder Hörbeeinträchtigungen, genutzt werden können. Dazu gehören zum Beispiel alternative Texte für Bilder, klare Strukturen und Verlinkungen sowie verständliche Inhalte.
- Dokumente und Multimedia: Auch Dokumente, wie PDFs, müssen barrierefrei sein. Das bedeutet, dass sie beispielsweise mit Screenreadern vorgelesen werden können. Multimedia-Inhalte sollten Untertitel oder Audiodeskriptionen bieten.
- Barrierefreie Apps und Software: Wenn öffentliche Stellen Apps oder Software entwickeln lassen, müssen diese ebenfalls barrierefrei sein. Das erleichtert Menschen mit Behinderungen die Nutzung.
- Prüfung und Monitoring: Die Einhaltung der BITV 2.0 muss regelmäßig überprüft werden. Es ist wichtig, sicherzustellen, dass die Barrierefreiheit aufrechterhalten bleibt.
- Ausnahmen: In bestimmten Fällen können Ausnahmen von den Anforderungen gewährt werden, wenn sie unverhältnismäßig hohe Kosten verursachen würden.
Die WCAG wurde von der Web Accessibility Initiative (WAI) des W3C (World Wide Web Consortium) entwickelt. Sie ist ein internationaler Standard für barrierefreie Webinhalte. Die W3C Accessibility Guidelines 3.0 werden die Nachfolger der WCAG 2.2 sowie früherer Versionen sein, jedoch diese nicht vollständig ersetzen. Sie integrieren Inhalte aus den Richtlinien für die Barrierefreiheit von Benutzeragenten (UAAG 2.0) und Autorentools (ATAG 2.0) und erweitern diese teilweise.
Grundlegendes:
- Flexibel und weltweit gültig: Die WCAG richtet sich an alle, die barrierefreie Websites erstellen wollen – unabhängig von nationalen Gesetzen.
- Drei Konformitätsstufen: Sie ist in die Stufen A, AA und AAA unterteilt (A = grundlegende Anforderungen, AAA = maximale Barrierefreiheit).
- Schwerpunkt auf Web- und digitale Inhalte: Sie legt fest, wie Websites, Apps und andere digitale Inhalte zugänglicher gestaltet werden können.
- Ergänzungen gegenüber WCAG 2.0: Die WCAG 2.1 berücksichtigt neue Aspekte, wie die Nutzung mobiler Geräte oder Anforderungen von Menschen mit kognitiven Einschränkungen.
- Ergänzungen der WCAG 2.2: Sie führt neun zusätzliche Erfolgskriterien ein, die sich auf die Konformitätsstufen verteilen. Zwei dieser neuen Kriterien gehören zur Stufe A, vier zur Stufe AA und drei zur Stufe AAA. Zudem wurde das Erfolgskriterium 4.1.1 als obsolet gekennzeichnet. Insgesamt umfasst die WCAG 2.2 somit 86 Erfolgskriterien.1
Ab wann ist eine Website barrierefrei?
Im Prinzip ist das Internet so gemacht, dass es für jeden Menschen offen ist, ganz egal, woher sie kommen, welche Sprache sie sprechen, welche Technik sie nutzen oder welchen Hintergrund sie haben. Eine Webseite ist barrierefrei, wenn sie so gestaltet ist, dass es keine Nachteile gibt, wenn man Einschränkungen beim Sehen, Hören, Bewegen oder der Informationsverarbeitung hat. Das bedeutet, dass wir das Internet ohne Probleme nutzen können, unabhängig von unseren individuellen Fähigkeiten oder Einschränkungen. Um dies nachvollziehen zu können, müssen wir dringend die Perspektive verändern und mögliche Barrieren beleuchten.
- Menschen mit einer Sehbehinderung erkennen Texte schlechter, wenn sie sich nur gering vom Hintergrund abheben. Besonders innerhalb von Formularfeldern kann dies zu Schwierigkeiten für den Betreiber der Website und dem Nutzer führen.
- Blinde Menschen nutzen Websites nicht korrekt, wenn Bilder, Buttons oder Formulare nicht textlich beschrieben sind. Also der Alternative Titel der Elemente fehlt.
- Gehörlose und schwerhörige Menschen nutzen Videos nicht, wenn sie keine Untertitel enthalten.
- Motorisch beeinträchtigte Menschen werden die Website mittels Tastatur und entsprechenden Kürzeln bedienen.
- Kognitive Barrierefreiheit möchte durch eine einfache Struktur des Inhalts die Nutzung erleichtern.
Vier Prinzipien der Barrierefreiheit
Wahrnehmbarkeit
Text-Alternativen, zeitgesteuerte Medien, Anpassbarkeit, Unterscheidbarkeit
Bedienbarkeit
Tastaturbedienbarkeit, Ausreuchend Zeit, Anfälle vermeiden, Ortientierung unterstützen, Eingabemodalitäten
Verständlichkeit
Lesbarkeit, Vorhersehbarkeit, Hilfe um Fehler zu vermeiden
Robustheit
Kompatabilität
Die Tests erfolgen nach dem internationalen „Web Content Accessibility Guidelines“-Standard (WCAG) oder der deutschen Barrierefreie-Informations-Technik-Verordnung (BITV). Die Richtlinien der WCAG bestehen aus drei Konformitätsstufen: A, AA und AAA, die derzeit nach Version 2.2 insgesamt 86 Erfolgskriterien besitzen.
Konformitätsstufe A – Grundlegende Barrierefreiheit
Das ist sozusagen die Mindestanforderung und sollten längst zum Web-Standard gehören. Inhalte müssen zugänglich sein, sodass niemand komplett ausgeschlossen wird. Egal ob Mensch oder Maschine. Unter anderen – 32 Kriterien existieren – müssen folgende Dinge gewährleistet werden:
- Bilder brauchen Alternativtexte (Alt-Texte).
- Die Website ist über die Tastatur bedienbar, ohne Maus. (Hierzu wird die Tabulator-Taste genutzt und der Cursor springt weiter)
- Nutzer werden nicht durch blinkende Inhalte gefährdet (z. B. keine epileptischen Anfälle auslösenden Effekte).
Konformitätsstufe AA – Verbesserte Barrierefreiheit
Hier geht es einen Schritt weiter, um möglichst vielen Menschen den Zugang zu erleichtern. Diese Stufe wird oft von gesetzlichen Vorgaben gefordert. 3 Beispiele der insgesamt 24 Kriterien:
- Der Farbkontrast zwischen Text und Hintergrund muss ausreichend hoch sein.
- Navigationsmenüs sind konsistent aufgebaut, damit niemand den Überblick verliert.
- Formularfelder sind klar beschriftet und mit Anweisungen versehen.
Konformitätsstufe AAA – Höchste Barrierefreiheit
Diese Stufe ist ideal, mit seinen 31 Erfolgrskriterien aber nicht immer realistisch, da sie extrem hohe Anforderungen stellt. Beispiele:
- Alle Audioinhalte müssen zusätzlich als Text zur Verfügung stehen.
- Die Lesbarkeit ist so gestaltet, dass sie für Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten optimal ist.
- Inhalte sind in Gebärdensprache verfügbar.
WordPress barrierefrei einsetzen
Kein technischer Grund spricht dagegen, WordPress als Basis für barrierefreie Websites einzusetzen. Allerdings müsstest du dein Theme und die verwendeten Plugins kritisch prüfen, um deine WordPress-Website barrierefrei umzusetzen.
Barrierefreie Themes verwenden
Selbstverständlich musst du nicht zwingend Bio zertifiziertes Obst kaufen, um gesunde Lebensmittel zu erhalten. Kommt dein Obst aus dem Garten, weißt du recht genau, mit welchen Stoffen dieses in Berührung gekommen ist. Ähnlich ergeht es den „accessibility ready“ Themes im offiziellen Theme-Verzeichnis. Suche mittels Filter nach „für Barrierefreiheit geeignet“en Themes und die Überprüfung nach den Richtlinien der Barrierefreiheit wurden bereits für dich durchgeführt. Die Grundlage für den Test basiert auf den Leitlinien zur Barrierefreiheit von WordPress2, die wiederum auf die Web Content Accessibility Guidelines (WCAG) verweisen. Allerdings erfolgt daher die Prüfung nicht gemäß der BITV, wodurch nicht zwingend die gesetzlichen Anforderungen für Deutschland erfüllt werden. Zudem kann es sein, dass du dich in einer falschen Sicherheit wiegst, wenn du diese Hauptzutat (das Theme) verwendest.
Die Rolle von Plugins in der Barrierefreiheit
WordPress bietet eine Fülle von Plugins, die dir bei der Verbesserung der Barrierefreiheit deiner Website helfen können. Hier sind einige nützliche:
1. WP Accessibility: Dieses Plugin fügt deiner Website Verbesserungen zur Barrierefreiheit hinzu und bietet Optionen zur Anpassung von Schriftgrößen und Kontrast.
2. Accessibility Widget: Mit diesem Widget kannst du leicht zugängliche Schaltflächen für Barrierefreiheitsoptionen hinzufügen, um die Bedienung deiner Website zu erleichtern.
3. WP ADA Compliance Check Basic: Es bietet eine einfache Möglichkeit, deine Website auf ADA-Konformität (Americans with Disabilities Act) zu überprüfen und Anpassungen vorzunehmen.
Einschränkungen und Barrieren
Einschränkungen können permanent, zeitweise und situativ auftreten.
1. Permanent: Bei permanenten Einschränkungen handelt es sich um dauerhafte Beeinträchtigungen, die die Zugänglichkeit von Websites betreffen können. Beispiele sind:
- Blindheit: Ein dauerhaft blinder Nutzer, der auf Screenreader-Software angewiesen ist, um Websites zu durchsuchen und Informationen zu erhalten.
- Motorische Behinderung: Eine Person, die aufgrund einer dauerhaften motorischen Behinderung Schwierigkeiten hat, die Maus präzise zu steuern und auf die Tastatur als Hauptnavigationsmittel angewiesen ist.
2. Zeitweise: Zeitweise Einschränkungen können sporadisch auftreten und die Fähigkeit zur Nutzung von Websites vorübergehend beeinflussen. Hier sind Beispiele:
- Migräne: Ein Nutzer, der gelegentlich unter schweren Migräneanfällen leidet und in solchen Momenten Schwierigkeiten hat, auf Websites zu surfen.
- Arthritis: Eine Person mit intermittierender Arthritis, die zeitweise Schwierigkeiten hat, die Maus präzise zu bedienen.
3. Situativ: Situative Einschränkungen treten in bestimmten Kontexten oder Situationen auf. Hier sind Beispiele:
- Lärmempfindlichkeit: Ein Nutzer, der empfindlich auf laute Umgebungen reagiert und in solchen Situationen Schwierigkeiten hat, sich auf den Inhalt einer Website zu konzentrieren.
- Kontrastempfindlichkeit: Eine Person mit eingeschränkter Kontrastempfindlichkeit, die in hell beleuchteten Umgebungen Schwierigkeiten hat, Text auf Websites zu lesen.
Visuelle Einschränkungen
mangelhafte Farbkontraste
visuell versteckte Inhaltsbereiche
zu kleine Schrift
unpassende Schriftart
Bei der Farbwahl der Schriften und des Hintergrunds ist die WordPress automatisch behilflich. Wählst du unpassende Farben, wird dir eine Information im Backend angezeigt. Dann solltest du diese dahingehend verwenden, bis die Warnmeldung verschwindet.
„Diese Farbkombination ist unter Umständen für manche Menschen schwer lesbar. Wähle eine hellere Hintergrundfarbe und/oder eine dunklere Textfarbe.“
Dein WordPress Backend
„Visuell versteckte Inhaltsbereiche“ sind Teile einer Webseite, die für den durchschnittlichen Benutzer nicht sichtbar sind, aber dennoch für bestimmte Gruppen von Nutzern von Bedeutung sein können. Diese Bereiche werden oft durch spezielle HTML- oder CSS-Techniken ausgeblendet oder verdeckt, sind aber für assistive Technologien wie Bildschirmlesegeräte oder Sprachausgaben wichtig, um den Inhalt der Website zugänglicher zu machen. Denke zum Beispiel an versteckte Beschreibungen für Bilder (Alternative-Angabe = ALT) oder Hinweise für Tastaturnavigation (Aria-Label), die für sehbehinderte oder motorisch eingeschränkte Benutzer entscheidend sind. Diese visuell versteckten Inhaltsbereiche tragen zur Verbesserung der Barrierefreiheit einer Webseite bei.
GenerateBlocks liefert dir beispielsweise innerhalb der erweiterten Optionen bei Buttons die Möglichkeit ein Aria-Label zu verwenden. Generell ist das Aria Feld immer dann notwendig, wenn es keine eindeutige Bezeichnung gibt.
Empfehlung: Verwende als Schriftgröße mindestens 14px aber verwende im Idealfall relative Angaben, also 0.9 em.
Die Mindestgröße ist allerdings von vielen Faktoren abhängig, wodurch die Details individuell entschieden werden müssen.
- Welche Schriftart verwendest du?
- Mit welcher Bildschirmgröße (Auflösung) betrachten die meisten Nutzer deine Website?
- Welches Endgerät wird genutzt?
- Wie hoch ist der Abstand des Nutzers zum Ausgabegerät?
Achte zudem darauf, dass deine Nutzer die Inhalte auf 200% der Ausgangsgröße zommen können.3
Empfehlung: ALT-Angaben und aria-label parallel nutzen
Beschreibungen sollten ausreichend Kontext bieten, aber nicht zu lang sein
Icons und Bilder berücksichtigen, sollen visuelle Elemente verständlich machen
Redundanz vermeiden, indem bereits sichtbare Inhalte nicht im Alternativtext wiederholt werden
Schlüsselwörter können nicht nur die Barrierefreiheit, sondern auch die Suchmaschinenoptimierung unterstützen
Mit Screenreadern testen, um sicherzustellen, dass sie sinnvoll sind
Um Inhalte im Web barrierefrei zugänglich zu machen, ist es entscheidend, Alternativtexte für nicht-textuelle Elemente wie Bilder und Icons bereitzustellen. Zwei häufig genutzte Attribute hierfür sind alt und aria-label. Beide verfolgen das gleiche Ziel, weisen jedoch einige Unterschiede auf. Das alt-Attribut liefert Alternativtexte für nicht-textuelle Inhalte, während aria-label Elementen ohne sichtbare Beschriftung eine Bedeutung gibt. Beide Attribute sind essenziell, um Webinhalte barrierefrei zu gestalten.4
Das alt-Attribut dient als Textbeschreibung für Bilder und andere nicht-textuelle Inhalte. Es ermöglicht Screenreadern und unterstützenden Technologien, den Zweck des Bildes zu verstehen. Besonders bei der Nutzung des img-Elements ist dieses Attribut obligatorisch, aber auch bei anderen nicht-textuellen Inhalten empfiehlt sich die Verwendung.
<img src="bildname-kuechenutensilien.jpg" alt="3 Küchenutensilien liegen auf einer Arbeitsplatte">
Das aria-label-Attribut hingegen wird verwendet, um ein Element zu beschreiben, das keinen sichtbaren Text besitzt. Dieses Attribut kann auf jedes Element angewendet werden, was es besonders flexibel macht. Es ist ideal, um Screenreadern eine textliche Beschreibung von Elementen bereitzustellen.
<button aria-label="Schließen">X</button>
Spezialisierung:
altist speziell für Bilder und nicht-textuelle Inhalte konzipiert und ein Pflichtattribut für dasimg-Element.aria-labelkann universell auf jedes Element angewendet werden und ist optional.
Anwendung:
aria-labelgibt einem Element ohne sichtbare Beschriftung einen Textaltbeschreibt den Inhalt eines Bildes.
Eine sinnvolle Kombination beider Attribute kann die Barrierefreiheit deutlich verbessern. Zum Beispiel, wenn ein Bild als Link dient:
<a title="Kontaktaufnahme" href="/ueber-uns/#kontakt"><br> <img aria-label="Link zur deinwp-Kontaktseite" src="deinwp-konterfei.jpg" alt="WordPress-Logo in der deinwp-Gestaltung"><br></a>
Akustische Einschränkungen
Videos ohne Untertitel
Tonaufnahmen ohne Transkript oder weiterführenden Erläuterungen
laute Umgebung
Akustische Einschränkungen können beispielsweise auch dann vorliegen, wenn in unpassenden Situationen Videos geschaut werden. Der Partner möchte im Bett nicht gestört werden, aber das Video möchtest du noch zu Ende sehen. Dann freust du dich über Untertitel, denn dann kannst du den Inhalt lesen und musst ihn nicht hören. Ähnlich verhält es sich bei Podcasts oder anderen Audioformaten. Ein Transkript des Inhalts hilft dem Betrachter dabei, das passende Format für seine Situation auszuwählen.
Die meisten Tipps verrät dir bereits der qualitative Impuls. Tonaufnahmen sollten in einer ruhigen Umgeung angefertigt werden, damit sich der Hörer auf das gesprochene Wort konzentrieren kann. Das Herausfiltern von Umgebungsgeräuschen ist für alle Menschen mindestens anstrengend.
Motorische Einschränkungen
Tastaturnavigation nicht oder nur eingeschränkt möglich
Fokus ist nicht sichtbar
koordinativ instabile Situation
Besonders innerhalb von Formularen liebe ich es mittels Tabulator die einzelnen Felder anzuspringen. So können Felder ausgefüllt werden, ohne die Maus benutzen zu müssen. Andere Menschen surfen fast gänzlich ohne Maus, wodurch die Tastaturnavigation wichtiger wird. Diese Funktion solltest du kontinuierlich prüfen.
Kognitive Einschränkungen
Verwendung fremder Sprache
schwere Lesbarkeit durch Fachbegriffe, Fachjargon oder unpassende Ausdrucksweise
nicht intuitive Struktur
Fachtermini und die Verwendung fremder Sprachen kann eine Einschränkung für den Nutzer bedeuten, daher bietet es sich an einen Umschalter auf „Einfache Sprache“ bereitzustellen. Was es damit genau aufsich hat, werden wir noch ergänzen.
Verwende Tools zur Überprüfung der Lesbarkeit deiner Inhalte und mache sie so verständlich wie möglich.
Testen
Diese Passage wirkte im Kopf so einfach und stringent. Nutze einen Test, folge den Anweisungen und alles wird schmecken. Allerdings zeigt schon die W3C Werkzeugliste über 51 unterschiedliche Gerätschaften. Viele Aspekte können/müssen/sollen einzeln geprüft werden. Insbesondere Screenreader-Testsysteme halten wir für sinnvoll, denn hier werden meist sehr viele (allgemeine) Kriterien ebenfalls betrachtet.
Zu bedenken ist zudem, dass du alle unterschiedlichen Inhaltetypen deiner Website prüfen musst.
Welche Erkentnisse erlangten wir?
Kein Koch ist jemals vom Himmel gefallen. Üben und verkosten gehören zum Alltag dazu. Und daher wollen wir dich auf diese Reise mitnehmen, damit du von unseren Erfahrungen (Fehlern) profitieren kannst.
Vergessenes Aria-Label innerhalb der Beitragsnavigation | Wurde am 25. Januar 2025 gefixt