Barrierefreie WordPress-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).