Barrierefreie Webseiten

Webseiten sollten uneingeschränkt und für jedermann zugänglich sein. Wer das Thema Accessibility ignoriert, schliesst etwa 20 Prozent der Weltbevölkerung von der Möglichkeit aus, seine Webseite zu nutzen. Um dies zu vermeiden, können Webangebote “barrierefrei” entwickelt werden.

Eine barrierefreie Webseite in der Schweiz folgt speziellen Richtlinien zu barrierefreiem Zugang und hilft dabei nicht nur Menschen mit körperlichen oder geistigen Einschränkungen, sondern verbessert auch das Suchmaschinen-Ranking in Google, Bing & Co.

Was ist Web Accessibility?

Web Accessibility beschreibt die Tools, die es Menschen mit Beeinträchtigung möglich machen, das Internet zu nutzen. Die Art und Weise, wie das Internet genutzt wird, kann sich durch körperliche und geistige Einschränkungen stark unterscheiden:

• Visuell – Menschen mit Sehbehinderungen, Sehschwäche oder auch Farbblindheit
• Hörvermögen – Akustische Beeinträchtigungen wie Taubheit oder Hörstörungen
• Motorik – Einschränkungen aktiv mobile Geräte oder den Desktop bedienen zu können, verursacht durch Schwierigkeiten mit der Muskelkontrolle, Langsamkeit der Muskeln, Zittern oder Amputation
• Vorübergehende Behinderungen – kurzfristige körperliche Einschränkungen durch Unfälle oder Schlaganfälle

Wie richtet man eine Webseite barrierefrei ein?

Daher werden im Zuge der “Barrierefreiheit” Möglichkeiten programmiert, um die Webseite mit diversen Einschränkungen dennoch nutzen zu können. Typische Merkmale der Barrierefreiheit für eine Webseite sind:

• Leichte Sprache
• hohe Kontraste, keine Overlays und wenig bis keine Hintergrundbilder, da diese keine Beschreibung haben können
• skalierbare Schriftgrössen und Farben
• Beschreibungen von Elementen wie Bilder, Links oder Eingabefelder
• visuelle Anker für Tastaturbedienung der Webseite
• Hinweise und Meldungen klar ausformulieren, z.B. Buttons (statt nur “Senden” Beschreibung hinzufügen “Wenn Sie hier klicken senden Sie uns das Formular”)

Wer muss seine Webseiten barrierefrei einrichten?

Einige Anbieter unterliegen in der Schweiz der Pflicht, Ihre Webpräsenz barrierefrei zu gestalten. Dazu gehören:

• alle öffentlichen Einrichtungen des Bundes, der Kantone und der Gemeinden
• staatsnahe Betriebe, wie zum Beispiel PostAuto
• Körperschaften des öffentlichen Rechts (z.Bsp. Universitäten, Schulen, Spitäler, Bibliotheken)

Wie ist die Rechtslage zu barrierefreien Webseiten in der Schweiz?

Die öffentliche Verwaltung der Schweiz unterliegt den eCH-0059 Accessibility Standards, die von den internationalen Richtlinien der EU inspiriert sind. Schon seit 2020 ist dabei Pflicht, dass man auf Webseiten von öffentlichen Einrichtungen Rückmeldung zu Problemen der Barrierefreiheit geben kann. Dies ist der sogenannte “Feedback-Mechanismus” und in Standard Kapitel 2.6 festgelegt. Die neueste Version von Standard eCH-0059 Version 3.0 gilt seit Januar 2021 und ist verpflichtend für alle oben genannten Anbieter.

Ein gutes Beispiel für eine Schweizer barrierefreie Webseite ist die Post, die es sogar ermöglicht, Nachrichten in Gebärdensprache zu verschicken.

Quelle: https://www.post.ch/-/media/post/gebaerdensprache/silas-infografik.pdf?vs=3&sc_lang=de

Warum sollten auch private Unternehmen barrierefreie Website einrichten?

• Soziale Verantwortung (Corporate Social Responsibility) übernehmen
• Das Suchmaschinen-Ranking wird verbessert, da Googles Algorithmen auch Accessibility bewerten
• Usability der Website wird positiv beeinflusst
• Grösserer Kundenkreis wird erschlossen – Marktanteil und Gewinne können steigen
• Teilhabe von Mitarbeitern mit Behinderung wird gestärkt
• Positive PR-Arbeit und Markenwirkung

Wie barrierefrei ist WordPress?

WordPress hat sich in den letzten Jahren dank dem „Make WordPress Accessible Team“ deutlich in Sachen Barrierefreiheit verbessert. Im März 2016 wurden die Coding Standards für die Barrierefreiheit von WordPress eingeführt. Themes und Plugins werden streng kontrolliert und geprüft, bevor sie als barrierefrei eingestuft werden. Das Backend, die Medienbibliothek, sowie der Theme Customizer sind erheblich zugänglicher geworden.

Dennoch hat WordPress weiterhin mit Schwierigkeiten zu kämpfen, da Theme- und Plugin-Entwickler von Drittanbietern sich nicht immer an die Accessibility Guidelines halten und dadurch Probleme bei der Zugänglichkeit entstehen. Bei Hürlimann Homepages programmieren wir dafür Lösungen – individuell abgestimmt auf Ihre Webseite.

Prinzipien zum barrierefreien Webdesign

Jeder Anbieter setzt die Barrierefreiheit unterschiedlich um. Wir folgen grundlegend 4 Prinzipien beim Erstellen einer neuen Webseite. Typische Massnahmen davon sehen so aus:

Bedienbarkeit

• Vermeiden von sichtbaren CAPTCHA oder Applikationen, die schwierig zu bedienen sind, eventuell können Optionen angeboten werden
• Benutzerfreundlicher Aufbau des Design – Tastatur und Maus müssen auf Schaltflächen und Menüpunkte (sowie auf Dropdown-Menüs) zugreifen können
• Alle Medien wie Videos, Audio oder Slider sollten nicht automatisch wiedergegeben werden oder sich ohne Benutzerinteraktion ändern

Wahrnehmbarkeit

• Buttons und Links sollten sich farblich vom Design und vom weiteren Inhalt abheben
• Braille-Unterstützung, sowie Textalternativen für visuelle und auditive Inhalte, wie Bilder und Videos
• Textbreite und Linienstärke anpassen, um die Lesbarkeit zu verbessern
• Kontraste zwischen Text und Hintergrund schaffen
• Gebärdensprache, Transkriptionen und Bildunterschriften für Audio- und Videoinhalte anbieten
• Vermeidung von blinkenden Animationen, die Krampfanfälle und körperliche Reaktionen verursachen könnten

Verständlichkeit

• Deutliche Überschriften für verschiedene Sektionen einer jeden Seite
• Klar verständliche Sprache, Vermeidung von schwierigen Begriffen und Abkürzungen
• Button und Links klar beschreiben, statt “Mehr erfahren” bspw. “Mehr über uns erfahren”

Robustheit

• Jede Seite benötigt Skip-Links
• Kontakt- oder Formularfelder brauchen entsprechende Beschriftungen, sowie Warn- und Bestätigungsmeldungen, die auch für farbenblinde Menschen zu erkennen sind
• Nutzung von tabindex, um ein Element, das normalerweise keinen Fokus erhält, wie zum Beispiel
  oder , in die Navigationsreihenfolge einzufügen, wenn es für die Interaktion verwendet wird
• Beschreibung und Verweis zum Start von Downloads wie PDF Dokumenten, Audio- oder Videoinhalten
• Interaktive Elemente, wie Akkordeons oder Tabs, die nicht standardisiert sind, benötigen eine Bedeutung entsprechend der WAI-ARIA Roles

Tools und Plugins zur Barrierefreiheit in WordPress

Täglich neue Plugins bieten Webdesignern die Möglichkeit, Barrierefreiheit vermehrt in WordPress umzusetzen. Einige interessante Schnittstellen:

• Braillezeile – Texte werden als Braillezeichen in einer Lochmasken-Schiene ausgegeben
• Screenreader-Software – synthetisierte Sprache wird genutzt, um die Zeichen und Bilder der Website vorzulesen
• Bildschirmvergrösserungssoftware – lupenartig wird die Anzeige des Bildschirms vergrössert
• Spracherkennungssoftware – Sprache wird in Text umgewandelt
• Tastaturüberlagerungen – die Eingabe wird übersichtlicher und genauer gestaltet

Zudem helfen die kostenlosen Technologien von Essential Accessibility, dass Menschen mit Behinderungen tippen, die Maus bewegen oder den Bildschirm lesen können.

Beliebte Plugins aus der WordPress Repository:

• WP Accessibility – kostenloses und offizielles WordPress Plugin – erstellt Skip-Links mit benutzerdefinierten Zielen, fügt eine Gliederung zum Keyboard Focus State hinzu, entfernt Tab Indexe von fokussierbaren Elementen, beschreibt Bilder und erzwingt Alt-Attribute für Bilder im Classic-Editor
• AccessibleWP Toolbar – kostenloses und offizielles WordPress Plugin – aktiviert die Tastaturnavigation, um durch die Website navigieren zu können, Nutzer können CSS3-Animationen deaktivieren und Websiten-Farben in Farben mit besserem Kontrast oder in Graustufen ändern, Schriftgrössen können vom Benutzer grösser oder kleiner eingestellt werden
• One Click Accessibility – Nutzer können die Schriftgrösse, Kontrast, Unterstreichung von Links und Schriften mit einer Symbolleiste für die Accessibility verändern, aktiviert Skip-Links, fügt den Umrissfokus für fokussierbare Elemente und Landmark-Rollen hinzu, entfernt die Target-Attribute aus Links
• WordPress Accessibility Helper – bietet eine kostenlose und eine Premium Version – fügt Skip-Links hinzu, Einstellung der Schriftgrösse je nach Bedarf, prüft Seiten und Beiträge auf Fehler hinsichtlich der Barrierefreiheit, benutzerdefinierte Farben für deutlichen Kontrast, sämtliche Links werden unterstrichen oder markiert

Barrierefreiheit prüfen

Es gibt die Möglichkeit, Ihre bestehende Webseite auf Barrierefreiheit (engl.: Accessibility) zu prüfen. Mit dem Plugin “WP ADA Compliance Check Basic” wird die Website auf Web Accessibility geprüft und liefert einen detaillierten Bericht. Die Ergebnisse basieren auf den Web Accessibility Standards – Abschnitt 508 und WCAG 2.1 LEVEL A/AA.

Auch das Plugin “Acces Monitor” überprüft wie zugänglich die Seite derzeit ist und führt eine automatische Überprüfung der Barrierefreiheit der Website durch, die vom Web Accessibility Service Tenon.io gesteuert wird.

Leider erfüllen viele WordPress Plugins nicht die Standards für digitale Barrierefreiheit. Daher kommt es oft vor, dass Webseiten trotz Check nicht optimal barrierefrei sind. Es bleibt ein individueller Prozess, um im Gesamtkonzept die eigene Webseite barrierefrei zu gestalten. Kein Tool ersetzt dabei erfahrene Mitarbeiter, die sich mit Web Accessibility auskennen und die Webseite individuell überprüfen und hinsichtlich Barrierefreiheit anpassen.

WordPress Themes von Drittanbietern

Wer auf ein individuelles Design verzichten kann, der kann bei WordPress auf fertig programmierte Themes (Designvorlagen) zurückgreifen, die mit dem Hintergrund Barrierefreiheit bereits vollständig entwickelt wurden. Dies sind einige Beispiele:

• Underscores von Automattic – kompatibel mit den meisten WordPress Themes, enthält mehrere barrierefreie Funktionen
• Genesis by StudioPress – beliebtes Premium-Framework, kann zur Entwicklung eines barrierefreien Genesis Child-Theme verwendet werden
• GeneratePress – ebenso beliebtes Theme und guter Start für eine barrierefreie Website
• WCAG Theme – speziell für Barrierefreiheit entwickelt auf Basis der Section 508 & WCAG 2.0 AA, bietet bereits eine volle Tastatur-Unterstützung
• Astra – kostenlose und eine Premium-Version, kompatibel mit beliebten Page Buildern und Plugins, bekannt für schnelle Ladezeiten

Kosten und Nachhaltigkeit

Bei barrierefreien Webseiten ist zu beachten, dass diese nicht nur einmalig barrierefrei erstellt werden, sondern auch zukünftig regelmässig optimiert werden sollten. Immer dann, wenn neue Inhalte und Erweiterungen hinzugefügt werden, sollten diese auch die Web Accessibility erfüllen.

Wir beraten Sie gerne zum Thema Barrierefreiheit Ihrer Webseite, welche Kosten auf Sie zukommen und wie die Gestaltung Ihres Projektes dabei abläuft. Auch unterstützen wir bei der Webseitenerstellung und im Prozess der Zertifizierung durch «Zugang für alle», einer Schweizer Stiftung mit Kompetenzzentrum & Zertifizierungsstelle für digitale Barrierefreiheit.