Eine Website ist dann barrierefrei, wenn diese von allen Menschen mit oder ohne Verminderung des Sehvermögens, Hörvermögens oder der Motorik ohne Einschränkungen genutzt werden kann.

Die Kriterien für Barrierefreies Webdesign sind in der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0 geregelt.

Weiterführende Infos

Grundregeln

  • Optimierung der Webseite für mobile Geräte, da diese häufiger von Menschen mit Einschränkungen genutzt werden.
  • Übersichtliche Darstellung von Inhalten.
    • Wichtiges hervorheben
    • Verschiedene Themenbereiche gut sichtbar voneinander trennen.
    • Bei längeren Absätzen maximal 6 Zeilen hohe Abschnitte bilden.
  • Gut lesbare Schriftgrößen verwenden.
    • Idealerweise kann die Benutzer*in die Schriftgröße selbst skalieren.
    • Minimum 1em.
  • Unifarbene Hintergründe wählen.
  • Hohe Kontraste
    • Beispiel: Graue Schrift auf weißem Hintergrund vermeiden.
    • Mindestens ein Kontrastverhältnis von 4,5:1 in Standard-Schriftgröße verwenden. Kontrastrechner
  • Keine Fotos zu Dekorationszwecken, nur wenn Sie wichtige Informationen enthalten.
  • Erklärvideos oder Audioaufnahmen zur Erläuterung des Inhalts mit gut erreichbaren Steuerelementen verwenden.
  • Einfache Symbole für die Steuerung der Seite verwenden, z. B. Haus für die Startseite.
  • Einfache Navigation
    • Menülinks deutlich vom Inhalt getrennt.
    • Maximal 5 Unterpunkte.
    • Möglichst geringe Verschachtelungstiefe.
  • Gut sichtbare Navigationshilfen
    • Home-Button auf jeder Seite
    • Zurück-Button bzw. Sprungmarke zum Anfang der Seite
    • Breadcrumbs
  • Barrierefreie Links
    • gut sichtbar, hervorgehoben durch Symbole oder Farben.
    • selbsterklärende Linktexte
    • einheitliche Gestaltung
  • Text zu Sprache-Programme
    • Erläuterungen und Beispiele
  • Begriffserläuterungen / Nachschlaghilfen zur Verfügung stellen.
    • Sprechende Bezeichnung (nicht »Glossar« oder »FAQ«, sondern »Was bedeutet das?«).
    • Erläuterung wichtiger Begriffe und der Funktionen der Webseite.
  • Schutz vor ungewollter Preisgabe persönlicher Daten
    • Konservative Privatsphäreneinstellungen bei Chats, Foren und anderen
    • Gut sichtbar erläutern, welche Angaben für alle sichtbar sind.
  • Einfache Benutzerführung bei Formularen, Suchmasken o. Ä.
    • Sofortige Bestätigung bei Falscheingaben und Korrekteingaben.
    • Verständliche Erläuterung der geforderten Eingaben.
    • Formulare in Gruppen aufteilen (z. B. Persönliches, Inhaltliches, Datenschutzangaben)
    • Maximal 5 Auswahlmöglichkeiten ja Abfrage.
  • Intelligente Suche
    • Fehlertoleranz hinsichtlich Rechtschreibung
    • An Synonyme denken.
    • Suchbegriffe vorschlagen

Weiterführende Links

https://www.bundesfachstelle-barrierefreiheit.de/DE/Fachwissen/Informationstechnik/Testen/testen_node.html;jsessionid=1C6EA98F9D734F80C2C1A2767D54F280#doc870102bodyText1

  • skalierbare Schriftgröße (Definition per %, em, rem).
  • hoher Kontrast von Farbe und Hintergrundfarbe
  • linksbündige Textausrichtung möglichst linksbündig, auf jeden Fall für Fließtext
  • maximal 700 bis 900px breiter Fließtext
  • mittlere Schriftstärke

Offene Schrift:
Beispiel: Die Öffnungen bei e oder c dürfen nicht zu eng seine, damit man beide nicht so leicht mit einem o verwechseln kann.

Imposter:
Buchstabenformen, bei denen mehrere Buchstaben fast identisch aussehen, z. B. das kleine »L« oder das große »i«

Spiegelung:
Buchstabenpaare wie z. B. d und b oder p und q sind von Legasthenikern schwer auseinanderzuhalten. Daher ist darauf zu achten, dass die Buchstaben sich bei gedanklicher Spiegelung nicht zu sehr ähneln.

WordPress-Adminbereich → Design: Themes hinzufügen → Nach Funktionen filtern: »Für Barrierefreiheit geeignet« auswählen + »Nach Funktionen filtern«

Getestet und für gut befunden:

One Click Accessibility

Funktionen:

  • Schriftgröße erhöhen, verringern
  • Graustufen
  • Negativkontrast
  • Hoher Kontrast
  • Heller Hintergrund
  • Links hervorheben (unterstreichen)
  • Lesbare Schriftart

Nicht getestet:

  • accessiBe
  • Accessibility Widget
  • UserWay
  • wA11y
  • WP Accessibility
  • WP Accessibility Helper
  • WP Accessibility Tools & Missing Alt Text Finder
  • WP ADA Compliance Check Basic

Ungetestete Plugins für barrierefreie Seiten

accessiBe scannt Ihre Website sowohl im Backend als auch im Frontend auf Probleme der Barrierefreiheit und passt u. a. Alt-Tags, ARIA-Attribute, Symbole, Schaltflächen und Formulare an.

accessiBe ändert auch Ihre Seitenstruktur, um sie tastaturnavigierbar zu machen, einschließlich der Änderung von Dropdowns, Popups, Formularen, Schaltflächen und Skip-Links. Der Dienst führt auch tägliche Scans nach Inhaltsänderungen durch.

accessiBe ist nicht kostenlos. Es gibt lediglich eine 7-tägige Testversion.

Mit dem Accessibility Widget-Plug-in können Sie schnell und einfach ein Barrierefreiheits-Panel auf Ihrer Website zu platzieren. Damit können Benutze*innen die Größe des Textes auf dem Bildschirm ändern. Dieses minimale Plugin funktioniert sowohl auf Desktop- als auch auf mobilen Bildschirmen.

Wie accessiBe ist UserWay eine weitere Möglichkeit, die Zugänglichkeit der Webseite automatisch zu verbessern. Ohne den Code Ihrer Website zu ändern, überwacht der KI-unterstützte Scan-Service von UserWay Ihre Website auf Zugänglichkeitsprobleme mit Schwerpunkt auf die Tastaturnavigation. UserWay ist ein kostenpflichtiger Dienst mit drei Monatsplänen.

UserWay bietet außerdem ein kostenloses Widget, mit dem grundlegende Anpassungen der Barrierefreiheit vorgenommen werden können:

  • Änderung Farben und Farbkontrast
  • Steuerung der Tastaturnavigation, Fokus

Eine Besonderheit der Funktionen dieses Plugins sind sog. Skip-Links. Diese ermöglichen Screenreader-Benutzern, zu verschiedenen Teilen einer Seite zu springen und irrelevante Inhalte (wie Navigationsmenüs) zu vermeiden. WP Accessibility fügt Skip-Links zu Ihren Seiten hinzu, und sie werden nur angezeigt, wenn sie durch die Verwendung der Tastatur oder eines Hilfsgeräts ausgelöst werden.

Dieses Plugin besitzt außerdem die Fähigkeit, einen Umriss um fokussierbare Elemente zu platzieren. Dies hilft Benutzern zu erkennen, wo sie sich gerade auf der Seite befinden, sei es ein Link, eine Schaltfläche, eine Texteingabe oder etwas anderes. Die Farbe dieser Gliederung können an Ihre Website angepasst werden.

Weitere Funktionen:

  • Angabe der Sprache Ihrer Seiten für die Aussprache von Screenreadern
  • Hinzufügen langer Bildbeschreibungen für Elemente wie Diagramme und Grafiken
  • Hinzufügen von Beitragstitel zu „Weitere Links lesen“, damit das Ziel des Links klar ist
  • überflüssige Titelattribute entfernen

Funktionen:

  • Schriftgröße ändern
  • Kontrast ändern
  • Links hervorheben
  • Animationen und Seitenstile entfernen

Pro-version:

  • barrierefreie Popups und Widgets
  • Hilfsschaltflächen für Barrierefreiheit
  • Unterstützung für WPML und PolyLang
  • Sepia-Modus
  • Monochrom-Modus.

Dieses kostenlose Plugin ändert Ihre Website nicht. Es scannt Ihre Website auf Zugänglichkeitsprobleme und liefert Anweisungen zu deren Behebung. Insbesondere prüft es auf Verstöße gegen Abschnitt 508 und die WCAG 2.1 LEVEL A/AA Web Accessibility Standards.

WP ADA Compliance Check Basic kann Inhalte bei der Veröffentlichung bewerten, so dass Sie Ihre gesamte Website auf einmal scannen können. Die kostenlose Version ist derzeit auf 25 Beiträge oder Seiten beschränkt und das Plugin scannt keine Themendateien.

WP Accessibility Tools & Missing Alt Text Finder ist ein weiteres Tool, mit dem Sie Ihre Website für Benutzer*innen mit Beeinträchtigungen zugänglich machen können. Seine Hauptfunktion ist es, fehlende Alt-Attribute zu finden. Das Tool findet in der Medienbibliothek, den Seiten und Beiträge Bilder ohne Alt-Text und ermöglicht es diesen mit einem Klick hinzuzufügen. Beschreibungstext oder Beschriftungstext kann ebenso ergänzt werden.

Das kostenlose Plugin enthält zudem einen Kontrastverhältnisprüfer, der sicherstellt, dass die Seiten die ADA-Anforderungen für Farbkontrast erfüllen. Außerdem gibt es eine interaktive Checkliste, die die WCAG-Anforderungen für Barrierefreiheit auflistet.

wA11y verfügt über 2 Funktionseinheiten; TOTA11Y und WAVE. TOTA11Y Barrierefreiheits-Toolkit visualisiert, wie gut eine Website Hilfstechnologien unterstützt. Dazu gehören Alt-Text, Überschriften, Orientierungspunkte und Farbkontraste. WAVE ist ein beliebtes Tool zur Bewertung der Barrierefreiheit, das Barrierefreiheitsprobleme auf jeder Seite identifiziert.