Barrierefreie WordPress-Website

Wir erstellen barrierefreie Webseiten nach BITV

Referenz Axians

Was bedeutet barrierefreie Webseite?

Eine barrierefreie WordPress-Webseite ist so beschaffen, dass sie Menschen trotz körperlicher, geistiger oder technischer Einschränkungen unterstützt alle Inhalten zu erfassen. Die Anforderungen an eine barrierefreie Webseite ergeben sich aus der Barrierefreie-Informationstechnik-Verordnung (BITV). Diese Verordnung hat das Ziel, eine umfassend und grundsätzlich uneingeschränkt barrierefreie Gestaltung moderner Informations- und Kommunikationstechnik zu ermöglichen. Die BITV wiederum basiert auf dem deutschen Behindertengleichstellungsgesetz (BGG) und den Web Content Accessibility Guidelines des W3C- Internetkonsortiums.

Inhaltsverzeichnis

Übersicht der Einschränkungen

icon sehschwaeche
Einschränkungen des Sehens
Menschen mit Seheinschränkung können geringe Schriftgrößen, kleine Bilder, Farbakzente, Warnhinweise, welche durch eine Farbe hervorgehoben sind, schlecht erkennen.
icon hoergeschaedigt
Einschränkungen des Hörens
Gehörlose Menschen sind darauf angewiesen, dass Inhalte in Form von Audio- und Videodateien auch in schriftlicher Form oder mit Audiodeskription (Untertiteln) angeboten werden.
icon Rollstuhl
Motorische Einschränkungen
Menschen mit motorischen Einschränkungen z.B. durch gebrochene oder fehlenden Körperteile, müssen sich ebenfalls durch Webseiten navigieren können.
icon browser
Technische Einschränkungen
Ältere Browser wie z.B. der Internet Explorer unterstützen keine neuen Webtechnologien, welche zur modernen Darstellung von Webseiten erforderlich sind.

Für diese Websites ist Barrierefreiheit bereits Pflicht

In der EU Richtlinie 2102 -> (PDF) wird auch der Geltungsbereich definiert. Unter Artikel 1 (1) werden die öffentliche Stellen genannt.

Die Definition einer öffentlichen Stelle wird wiederum hier beschrieben. Wir verstehen darunter, dass alle Organisationen mit hoheitliche Aufgaben bereits jetzt zur digitalen Barrierefreiheit verpflichtet sind. Dazu gehören Websites von:

  • Öffentlich-rechtlich organisierte Einrichtungen des Bundes, der bundesunmittelbaren Körperschaften
  • Hochschulen, Universitäten und Fachhochschulen
  • Zweckverbände – also Zusammenschlüsse von Gemeinden und Gemeindeverbänden
  • Stiftungen
  • gesetzliche Krankenkassen sowie kassenärztliche Vereinigungen
  • Sozialversicherungen
  • Landschaftsverbände
  • Industrie- und Handelskammern, Handwerkskammern, Rechtsanwalts- und Ärztekammern, Berufsgenossenschaften und Innungen
  • Sparkassen, staatliche Vermögensverwaltungen und Finanzdienste
  • Schulen und Kindergärten mit Online-Verwaltungsfunktion
  • öffentlicher Nahverkehr

Es gibt (zur zeit) auch noch Ausnahmen, die in Artikel 1 (2) beschrieben sind. Diese gelten insb. für Inhalte die vor 2018 bzw. 2020 entstanden sind. 

Ab 2025 Barrierefreiheitsstärkungsgesetz

Das Barrierefreiheitsstärkungsgesetz -> definiert Barrierefreiheitsanforderungen für Produkte und Dienstleistungen, die nach dem 28.06.2025 in den Verkehr gebracht bzw. für Verbraucherinnen und Verbraucher erbracht werden.

Hier zu gehören nach allgemein Verständnis auch  Onlineshops mit einem Umsatz von mehr als 2 Mio. Euro Umsatz / Jahr und Firmenwebsites (von Unternehmen mit mehr als 10 Mitarbeitenden).

Umsetzung und Prüfung einer barrierefreien Website

Kostenloser Selbsttest für Webseiten

Die BITV-Selbstbewertung ist ein webbasiertes Werkzeug für alle, die barrierefreie Webangebote entwickeln und sich dabei an den Vorgaben des BITV-Tests orientieren wollen. Mit Hilfe eines Fragebogens -> kann die Zugänglichkeit eines Webangebots geprüft werden. Dieser untersucht bestehende Webseiten in 98 Prüfschritten (Stand August 2023) und errechnet daraus ein Ergebnis. Mehr dazu hier ->.

Verschiedene Stufen von Barrierefreiheit 

Die WCAG kennen 3 Stufen der Barrierefreiheit bei Websites, auch Level genannt: A, AA und AAA.

Die Mindestanforderungen an Barrierefreiheit sind für Level A gefordert.  Das Level AAA wird für Websites vergeben, die die höchsten technologischen und informationstechnologischen Anforderungen mitbringen. 

Eine Übersicht über die Prüfschritte und Zugehörigkeit zu den Levels finden Sie hier

Das Prinzip „Design for All"

Um die Barrierefreiheit bei Webseiten zu gewährleisten, muss die Gestaltung der Webseite dem Prinzip „Design for All" folgen. Dieses nutzerorientierte Prinzip stellt den einfachen Gebrauch von jeglichen Produkten in den Mittelpunkt. Produkte wie Webseiten sollen demnach so gestaltet werden, dass eine Nutzung ohne individuelle Anpassungen oder besondere Assistenz für jede Personengruppe garantiert ist.

Trennung von Design, Struktur und Inhalt

Um nachträglich Änderungen an der Webseite vornehmen zu können, müssen Auszeichnungssprachen wie HTML (für den Inhalt) und CSS (für das Design) strickt voneinander getrennt sein. Dieses ist bei gut programmieren WordPress-Webseiten der Standard, da dies ebenfalls Auswirkungen auf die Suchmaschinenoptimierung hat.

Skalierbarkeit der Maßeinheiten von Schriften und Abständen

Damit Schriften und Abstände auch bei browserspezifische Vergrößerung der Inhalte gut lesbar sind, ist es wichtig Elemente mit einer relativen Maßeinheit zu gestalten (in „%" oder „rem"). Dadurch vergrößern sich die ausgezeichneten Elemente proportional zur Darstellungsvergrößerung. Eine Vergrößerung der Schrift als Funktion der Webseite ist nicht zwingend erforderlich, da diese meist besser im Webbrowser verfügbar ist. Wichtig ist, dass es bei einer Vergrößerung über den Webbrowser keine Darstellungsprobleme auf der Webseite gibt.

Möglichkeit zur Erhöhung des Kontrastverhältnisses

Menschen mit Einschränkung des Sehvermögens sind auf starke Farbkontraste angewiesen. Dadurch ist es ihnen möglich Elemente voneinander zu unterschieden. Mobile Endgeräte bieten schon seit längerem einen sogenannten „Darkmode" an. Dieser dunkelt den Hintergrund ab wodurch Text in einem starken Kontrast dargestellt wird. Auch hier ist zu prüfen, ob die Darstellung der Webseite im „Darkmode" optimal verhält und die gewünschten Kontraste korrekt dargestellt werden. Die Funktion des „Darkmodes" kann bei einer WordPress-Webseite relativ einfach umgesetzt werden.

Responsive Webdesign

Unter dem Begriff „Responsives Webdesign" versteht man die Antwortfähigkeit einer Webseite auf Veränderung. In den meisten Fällen bezieht er sich auf die Anpassungsfähigkeit der Webseite auf sich ändernde Bildschirmgrößen. Ebenfalls zum Responsiven Webdesign gehört dem Nutzer zu signalisieren, dass Aktionen erfolgreich oder nicht erfolgreich durchgeführt wurden. So sollte sich zum Beispiel die Hintergrundfarbe eines korrekt ausgefüllten Kontaktformularfeldes ändern. Ein responsives Webdesign ist heute auch Grundbaustein des mobile First-Ansatzes von Google hinsichtlich der Suchmaschinenoptmierung.

Hochdeutsch und kurze klare Sätze

Textinhalte auf Webseiten sollten in klarer und prägnanter Sprache formuliert werden. So ist es möglich die Inhalte über die Sprachausgabefunktion des Browsers oder des mobilen Endgerätes besser wiederzugegeben. In der „Einfachen Sprache" sollte man auf Fremdwörter und zusammengesetzte Wörter verzichten. Ein Beispiel wäre das Wort „Obdachlosenwohnstätte" – anstelle dessen sollte man „Wohnstätte für Obdachlose" verwenden. Da derartige Optimierungen nicht automatisch geschehen können, ist schon beim Entwerfen des Textes auf diese Formulierungen zu achten.

Fitt'sches Gesetz

Das Fitt'sche Gesetz -> beschreibt, wann Bedienelemente auf einer Webseite benutzerfreundlich gestaltet sind und wann nicht. Navigationselemente sollten nahe zueinander angeordnet sein, damit der Nutzer diese auf kürzestem Weg erreichen kann. Nutzer, die durch motorische Einschränkungen keine Maus bedienen können, müssen mithilfe der Tastatur oder per Sprache die Seite navigieren. Hierzu ist es wichtig, dass funktionsgleiche Elemente nah zueinander angeordnet werden.

Alternative Texte

Damit die Funktion zum Vorlesen im Browser oder auf dem mobilen Endgerät auch Bildinhalte wiedergeben kann, müssen Bilder mit Alternativtexten versehen sein. Diese werden in der normalen Ansicht nicht angezeigt. Auch Google-Crawler verwenden diese Auszeichnung und Beschriftung von Bildern für die optimale Bewertung im Rahmen der Suchmaschinenoptimierung (SEO).

Die Vorlesefunktion auf barrierefreie Webseiten

Die sogenannte Vorlese- oder Text-To-Speech-Funktion ist größtenteils auf behördlichen Webseiten zu finden.

Laut Barrierefreie-Informationstechnik-Verordnung (BITV) ist dies allerdings zurecht nicht gefordert. Gegen eine Vorlesefunktion innerhalb der Webseite spricht, dass praktisch jedes verbreitetere System eine bessere Vorlese-Funktion integriert hat: iOS, der Mac, Android, Windows, Linux, überall finden wir einfache und teils sehr einsteigerfreundliche Screenreader.

Probleme mit Text-To-Speech-Plugins innerhalb einer Webseite:

  • Ausdrücke können nur schwer korrekt erfasst werden
  • Keine Wiedergabe von übergeordneten Elementen wie Menüpunkte
  • Schlechte Wiedergabe von nichtlateinischen oder fremdsprachigen Begriffen
  • fehlende Möglichkeit Satzweise neu zu lesen