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.