Da WordPress auf über 42,9 % aller Websites zum Einsatz kommt, lässt sich kaum eine andere Software finden, die einen größeren Einfluss auf den Stand der Barrierefreiheit im Web hatte. WordPress ist aus gutem Grund so beliebt.
Zu den naheliegenden Gründen, die einem in den Sinn kommen, gehören unter anderem die folgenden:
- Es ist Open Source (keine Lizenzgebühren)
- Die Einarbeitungszeit ist überschaubar
- Es eignet sich für einfache Websites und kann als Grundlage für Webanwendungen dienen.
- Dahinter steht eine starke Community, die Dienste, Plugins, Themes und zum Kernprojekt selbst beiträgt
Mit WordPress können auch technisch weniger versierte Nutzer innerhalb weniger Minuten eine Website online stellen. Diejenigen mit höheren Anforderungen haben WordPress zu einem Anwendungsframework ausgebaut, das komplexe Webanwendungen wie Pressbooks und YouTooCanRun.
Aber wie barrierefrei ist WordPress von Haus aus? Wie schwierig ist es, WordPress barrierefrei zu halten? Und wie können Sie sicherstellen, dass Ihre WordPress-Website barrierefrei ist? Das ist das Thema dieses Artikels. Lassen Sie uns gleich einsteigen.
Wie barrierefrei ist WordPress von Haus aus?
WordPress ist bereits standardmäßig sehr barrierefrei. Das WordPress-Projekt verfügt über ein eigenes Team für Barrierefreiheit, das kontinuierlich daran arbeitet, WordPress zu verbessern, mit dem Ziel, „den WordPress-Admin-Bereich und die mitgelieferten Themes soweit wie möglich vollständig WCAG 2.0 AA-konform zu machen.“
Was bedeutet das in der Praxis? Das neueste offizielle Paket mit WordPress-Themes (die Vorlagen, die das Erscheinungsbild, die Handhabung, das Layout und manchmal auch die Funktionalität Ihrer WordPress-Website bestimmen) wurde anhand der WordPress-Standards für barrierefreies Programmieren, die auf die Einhaltung der WCAG 2.0 AA-Richtlinien abzielen, als „barrierefrei“ eingestuft.
Aus Sicht der Autorenerstellung zielt WordPress als Tool darauf ab, die Richtlinien für barrierefreie Autorentools 2.0(ATAG) zu entsprechen, tut dies derzeit jedoch nicht. Dies ist jedoch keine leichte Aufgabe, da die ATAG nicht nur vorschreiben, dass die Anwendung für Menschen mit Behinderungen barrierefrei sein muss, sondern alle Nutzer dazu anhalten, barrierefreie Inhalte zu erstellen und Fehler bei der Barrierefreiheit zu beheben – und das alles ohne zusätzliche Tools oder Erweiterungen.
Joe Dolson, ein Mitglied des Teams für Barrierefreiheit, äußerte sich wie folgt zum aktuellen Stand der Barrierefreiheit bei WordPress:
„Das Frontend von WordPress befindet sich im Grunde genommen noch immer dort, wo es schon seit Jahren ist: Es ist durchaus in der Lage, barrierefrei zu sein, aber das hängt ganz vom Entwickler ab, der die Website erstellt. Ein schlechtes Theme oder nicht barrierefreie Plugins machen den entscheidenden Unterschied. Der Admin-Bereich wurde kontinuierlich verbessert – es war ein mühsamer Weg, den Gutenberg-Editor in Richtung besserer Barrierefreiheit weiterzuentwickeln, aber es werden Fortschritte erzielt. Dennoch ist es ein ständiger Kampf, bei jeder neuen Oberflächenkomponente Rückschritte bei der Barrierefreiheit zu vermeiden.“
Kurz gesagt: Die WordPress-Community misst der Barrierefreiheit große Bedeutung bei und verfolgt lobenswerte Ziele in diesem Bereich, doch es gibt noch einiges zu verbessern. In der Standardversion von WordPress gibt es nach wie vor Mängel hinsichtlich der Barrierefreiheit; so ist es beispielsweise für Menschen mit Behinderungen schwierig, Inhalte in WordPress zu erstellen, und es ist schwer sicherzustellen, dass Autoren keine nicht barrierefreien Webseiten erstellen.
Wie Dolson bereits erwähnte, ist der (relativ) neue Gutenberg-Editor ein wichtiger Bereich, in dem Verbesserungsbedarf besteht. Gutenberg ist die aktuelle Lösung von WordPress zur Bearbeitung von Inhalten und wurde im Dezember 2018 mit WordPress 5.0 veröffentlicht. Gutenberg ersetzte TinyMCE, einen recht verbreiteten Open-Source-WYSIWYG-Editor (What You See Is What You Get), der von 2005 bis 2018 in WordPress integriert war. TinyMCE ist ein einfacher Editor, ähnlich wie Microsoft Word oder Google Docs. Die Bearbeitung erfolgt hauptsächlich textbasiert und bietet nur wenige Möglichkeiten, das Layout zu bearbeiten oder reichhaltige Inhalte hinzuzufügen (ohne manuelles Einfügen von HTML oder die Verwendung von WordPress-Shortcodes).
Gutenberg wurde entwickelt, um Autoren von Inhalten mehr Möglichkeiten zu bieten und ihnen mehr Kontrolle über ihre Webseiten zu geben. Autoren haben nun die Möglichkeit, ihren Seiten „Blöcke“ hinzuzufügen, die so einfach wie ein Textabsatz oder eine Aufzählung sein können, oder aber so komplex wie Registerkarten, Spalten, Kundenstimmen, Hero-Bereiche und Akkordeons.
Gutenberg ist ein wichtiges Thema im Zusammenhang mit der Barrierefreiheit von WordPress, da Gutenberg veröffentlicht wurde, obwohl bekannt war, dass es erhebliche Probleme hinsichtlich der Barrierefreiheit gab. Mitte 2019 veröffentlichte WPCampus die Ergebnisse eines von ihnen in Auftrag gegebenen Gutenberg-Barrierefreiheits-Audits , die sie in Auftrag gegeben hatten, einschließlich eines Links zur CSV-Datei mit allen 90 Problemen.
Es ist offensichtlich, dass sich die WordPress- und Gutenberg-Teams intensiv für die Verbesserung der Barrierefreiheit einsetzen. Der WPCampus-Bericht stellt fest, dass vier Probleme im Zusammenhang mit der Barrierefreiheit bereits während der Testphase behoben wurden und weitere 116 zwischen dem Ende der Testphase und der Veröffentlichung geschlossen wurden. Von den 90 gemeldeten Problemen sind zum Zeitpunkt der Erstellung dieses Artikels nur noch 32 zum Zeitpunkt der Erstellung dieses Artikels auf GitHub noch offen.
„Das Barrierefreiheitsteam konzentriert sich auf einige wenige Bereiche. Wir arbeiten weiterhin daran, die Ergebnisse des WPCampus-Audits zu beheben, und möchten im Jahr 2020 eine 100-prozentige Behebung erreichen. Wir arbeiten weiterhin an der Verbesserung des Block-Editors und gehen davon aus, dass die fortschreitenden Pläne für die Umstellung auf die Bearbeitung der gesamten Website wahrscheinlich zu einem erheblichen Anstieg neuer Probleme führen werden, auf die wir uns konzentrieren müssen. Der Zeitplan hierfür ist jedoch noch ungewiss.“
—Joe Dolson
Das ist zwar der aktuelle Stand der Barrierefreiheit bei WordPress, doch vielleicht fragen Sie sich: „Wie kann ich meine WordPress-Website so barrierefrei wie möglich gestalten?“
Barrierefreie Websites in WordPress
Ich werde mich bei der Beantwortung dieser Frage auf das „Frontend“ von WordPress-Websites konzentrieren – also auf die (in der Regel) öffentlich zugänglichen Seiten, die WordPress generiert – und nicht auf das administrative Backend.
Im Kern ist WordPress ein Tool zum Speichern, Abrufen und Anzeigen gespeicherter Daten. In der Regel handelt es sich bei diesen gespeicherten Daten um Inhalte. Das bedeutet, dass die Barrierefreiheit Ihrer WordPress-Website weitgehend davon abhängt, welche Daten gespeichert sind und wie diese Daten dargestellt werden.
WordPress verfügt über zwei Systeme, die einen erheblichen Einfluss auf die Barrierefreiheit haben: Themes und Plugins. WordPress-Themes bestimmen das Erscheinungsbild Ihrer Website, und Plugins ermöglichen es Ihnen, Ihrer Website zusätzliche Funktionen hinzuzufügen. Beide sind für den zugrunde liegenden Code verantwortlich, aus dem sich das Frontend Ihrer Website zusammensetzt.
Dieser Code kann barrierefrei sein oder Probleme hinsichtlich der Barrierefreiheit aufweisen. Er kann Barrierefreiheitsfunktionen wie Sprunglinks oder korrekte ARIA-Rollen enthalten oder diese außer Acht lassen. Das Theme kann einen ausreichenden Farbkontrast aufweisen oder auch nicht.
Ein wesentlicher Teil der Barrierefreiheit von WordPress-Websites besteht darin, die richtigen Themes und Plugins zu bewerten, zu testen und auszuwählen.
Schauen wir uns die Themes und Plugins einmal einzeln an.
Auswahl eines barrierefreien Themes
Lassen Sie uns zunächst über die Auswahl eines bestehenden Themes sprechen. Sofern nicht ausdrücklich anders angegeben, sollten Sie davon ausgehen, dass ein Theme nicht besonders barrierefrei ist. Die Barrierefreiheit eines Themes zu gewährleisten, erfordert einen erheblichen Aufwand und umfangreiche Tests, und wenn sich jemand diese Mühe gemacht hat, wird er wahrscheinlich darauf aufmerksam machen.
Glücklicherweise verfügt das Barrierefreiheitsteam über eine Liste mit 92 kostenlose Themes im WordPress-Repository , die auf Barrierefreiheit geprüft und getestet wurden.
„Das Theme-Prüfungsteam hat damit begonnen, Barrierefreiheitsanforderungen als Teil der allgemeinen Anforderungen für alle Themes einzuführen, doch diese Maßnahmen stehen noch ganz am Anfang, sodass es noch eine Weile dauern wird, bis Barrierefreiheit im Verzeichnis flächendeckend umgesetzt ist.“ —Joe Dolson
Nun gilt im Allgemeinen: Man bekommt das, wofür man bezahlt. Das mag vielleicht etwas zu kapitalistisch klingen, aber in kommerzielle Themes wird in der Regel mehr Aufwand, Sorgfalt und Support investiert als in kostenlose Themes. Wenn Ihre Website also wichtig genug ist, sollten Sie vielleicht ein kostenpflichtiges Theme anstelle eines kostenlosen in Betracht ziehen.
Leider ist es etwas schwieriger, eine gute Entscheidung zu treffen, wenn es um kostenpflichtige Themes geht. Es gibt wirklich keine Kontrollmechanismen, die sicherstellen, dass ein Theme, das als „barrierefrei“ beworben wird oder den WCAG-Richtlinien entspricht, , dies auch auch tatsächlich den Fall ist. Tatsächlich wiesen viele der Themes, auf die ich bei der Recherche für diesen Artikel gestoßen bin und die als „barrierefrei“ gekennzeichnet waren, eklatante Probleme hinsichtlich der Barrierefreiheit auf.
Meine Empfehlung lautet daher, zunächst zu recherchieren und sich bei etablierten, seriösen Theme-Anbietern wie Astra, das meiner Erfahrung nach von Haus aus ziemlich von Haus aus barrierefrei ist, das WCAG-Theme, das positives Feedback erhält, oder Avada, das sich zur WCAG 2.1 AA-Konformität.
Unabhängig davon, ob es sich um ein kostenloses oder ein Premium-Theme handelt, empfehle ich Ihnen dringend, eigene Tests durchzuführen und sich nicht einfach auf die Angaben des Theme-Anbieters zu verlassen. Empfehlungen zu Testmethoden finden Sie weiter unten in diesem Artikel.
„Es ist mehr als nur ‚Installieren und loslegen‘“
Es ist wichtig zu beachten, dass Sie ein barrierefreies Theme unzugänglich machen können – entweder durch die Installation nicht barrierefreier Plugins oder durch schlechte Designentscheidungen. Die wichtigsten Aspekte sind ein ausreichender Kontrast und die Verwendung weiterer Elemente als nur Farbe zur Vermittlung von Informationen. Wenn Ihre Links beispielsweise nur dadurch erkennbar sind, dass sie eine andere Farbe als der normale Text haben, liegt ein Problem hinsichtlich der Barrierefreiheit vor. Sie müssen zumindest eine andere Schriftgröße haben, fett formatiert oder im Idealfall unterstrichen sein.
Was den Kontrast betrifft, so schreibt WCAG 2.0 AA ein Mindestverhältnis von 4,5:1 für normalen Text, 3:1 für größeren Text (fettgedruckt, 18 px oder Standardgröße 24 px und größer) sowie 3:1 für Komponenten der Benutzeroberfläche vor, wie beispielsweise Eingabefelder, Fokuszustände und Links.
Erstellung eines barrierefreien Themes
Wenn Sie ein individuelles WordPress-Theme erstellen, gibt es eine Vielzahl von Aspekten, die Sie berücksichtigen müssen. Als Erstes sollten Sie herausfinden, welche Richtlinien Sie in welchem Umfang einhalten müssen. Hier erfahren Sie mehr über die verschiedenen Richtlinien, um herauszufinden, welche für Ihre Situation geeignet ist.
„Ich würde empfehlen, bei der individuellen Entwicklung von einem Ausgangspunkt wie dem Underscores-Starter-Theme auszugehen – auch wenn es designtechnisch nicht viel zu bieten hat, bildet es doch eine hervorragende Grundlage für den zugrunde liegenden HTML-Code, der einen wesentlichen Teil der Barrierefreiheit einer Website ausmacht.“
Auch wenn die konkreten Anforderungen variieren können, finden Sie hier einige allgemeine Punkte, die Sie berücksichtigen sollten:
Ausreichender Farbkontrast
Die Gewährleistung eines ausreichenden Farbkontrasts ist ein wesentlicher Aspekt der Barrierefreiheit und Benutzerfreundlichkeit im Web. Ein großer Teil der Weltbevölkerung leidet unter Sehbeeinträchtigungen und hat Schwierigkeiten, Text und Oberflächenelemente mit unzureichendem Farbkontrast zu unterscheiden.
WCAG 2.0 AA schreibt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für größeren Text vor (fettgedruckt 18 px oder Standard 24 px und größer). Weitere Informationen zum Testen von Kontrastkombinationen finden Sie im Abschnitt „Testen“.
Wahrnehmbare Unterschiede
In diesem Zusammenhang sollten Sie darauf achten, dass Sie zur Unterscheidung nicht nur die Farbe verwenden. Wenn der einzige Unterschied zwischen normalem Text und einem Link die Farbe ist, liegt ein Problem hinsichtlich der Barrierefreiheit vor. Der Text sollte zumindest fett gedruckt oder – noch besser – unterstrichen sein.
Dies gilt für aktive Zustände, Fokuszustände, Nicht-Text-Links usw.
Tastaturnavigation
Stellen Sie sicher, dass Nutzer Ihre Website mit der Tastatur bedienen können. Können sie mit der Tabulatortaste durch alle Menüs und Links auf der Website navigieren? Sind die Fokuszustände der Links deutlich erkennbar und weisen sie einen ausreichenden Kontrast auf?
Navigation mit einem Screenreader
Stellen Sie sicher, dass Ihr Theme so gestaltet ist, dass es die Navigation mit Screenreadern unterstützt. Dazu gehört das Einfügen von Sprunglinks am oberen Rand der Seite, die Verwendung korrekter ARIA-Rollen und/oder HTML5-Landmarks für das einfache Springen zwischen Abschnitten sowie die Gewährleistung, dass Ihre Links eindeutig sind.
Um noch etwas näher auf Links einzugehen: Bildschirmleseprogramme ermöglichen es Nutzern, auf einer Seite zu navigieren, indem sie von einem Link zum nächsten springen. Wenn der Linktext lediglich „Weiterlesen“ lautet, ist unklar, worauf sich der Link bezieht oder wohin er den Nutzer führt, wenn er angeklickt wird. Erstellen Sie stattdessen aussagekräftigere Links (z. B. „Erfahren Sie mehr über unsere Dienstleistungen“), verwenden Sie Text, der ausschließlich für Screenreader bestimmt ist, oder nutzen Sie ARIA-label-Attribute, um Screenreadern eine detailliertere Beschreibung zum Vorlesen bereitzustellen.
Semantische Auszeichnung und Qualität der Auszeichnung
As Dolson described earlier, proper HTML markup is a significant factor for web accessibility. Semantic markup means that the HTML code properly describes the content contained within it. That means not using <table> tags for layout, using <ul> and <ol> tags for lists rather than ASCII bullets or typing out numbers, and not using <ul> and <ol> tags for elements that aren’t actually lists.
Die Überschriftenebenen sollten linear und lückenlos aufeinander folgen, d. h., bevor Sie beispielsweise ein H3-Tag verwenden, müssen Sie bereits H1- und H2-Tags gesetzt haben.
Achten Sie schließlich darauf, dass sich die IDs auf der Seite nicht wiederholen.
Auch wenn die Erstellung barrierefreien HTML-Codes noch weitere Aspekte umfasst, sind die oben erläuterten Konzepte wichtige Grundprinzipien, die Sie beim Erstellen Ihrer Seiten im Auge behalten sollten.
Textalternativen für nicht-textuelle Inhalte
Das Internet hat sich zu einer medienreichen Landschaft entwickelt. Auch wenn sie ansprechend sind, können Inhalte, die nicht in einem textbasierten Format vorliegen, für Nutzer von assistiven Technologien unzugänglich sein. Ein Screenreader weiß nicht, was auf einem Bild dargestellt ist, und kann es daher ohne Ihre manuelle Unterstützung nicht beschreiben. Ein Podcast kann von einer gehörlosen Person nur dann genutzt werden, wenn eine Transkription vorliegt.
Machen Sie es sich zur Gewohnheit, für alle Inhalte, die als Bild/Symbol, Videodatei oder Audiodatei hinzugefügt werden, einen Alternativtext („Alt-Text“) anzugeben. Dies ist nicht erforderlich, wenn ein Element rein dekorativen Charakter hat.
Größenveränderbare Schriftarten
Stellen Sie sicher, dass Ihre Layouts und Texte die Anpassung der Schriftgröße unterstützen. Viele Nutzer vergrößern die Schrift in ihrem Browser, um die Lesbarkeit zu verbessern. Ihr Theme muss dies unterstützen.
Dies wird erreicht, indem sichergestellt wird, dass Elemente, die Text enthalten, sich vertikal ausdehnen können und dass Schriftgrößen in em und rem statt in px definiert werden.
Das lässt sich leicht überprüfen, da jeder Webbrowser über die Option verfügt, den Text zu vergrößern oder zu verkleinern. Versuchen Sie, den Text um das Dreifache zu vergrößern, um zu sehen, ob sich die Schriftgröße erhöht und ob das Layout dabei durcheinandergerät.
Benutzern ermöglichen, die Bewegung anzuhalten oder zu steuern
Falls Sie automatische Bewegungen oder Animationen verwenden, stellen Sie sicher, dass die Nutzer die Möglichkeit haben, diese zu steuern und anzuhalten.
Beachten Sie die Programmierrichtlinien für barrierefreie WordPress-Themes
Die obige Liste ist bei weitem nicht vollständig; es gibt zahlreiche große und kleine Faktoren, die zur Barrierefreiheit Ihres benutzerdefinierten Themes beitragen. Wenn es an der Zeit ist, Ihr Theme zu erstellen, empfehle ich Ihnen, die Codierungsstandards für barrierefreie WordPress-Themes , um genauere Informationen zu erhalten.
Nachdem wir nun die Themen besprochen haben, wollen wir uns damit befassen, wie sich Plugins auf die Barrierefreiheit Ihrer Websites auswirken.
Barrierefreiheit in WordPress und Plugins
Plugins sind einer der überzeugendsten Gründe, WordPress zu nutzen. Zum Zeitpunkt der Erstellung dieses Artikels gibt es im WordPress-Repository über 55.000 kostenlose Plugins sowie Tausende kostenpflichtiger Plugins. Jedes Plugin erweitert WordPress um Funktionen, über die es zuvor nicht verfügte.
Mit nur wenigen Klicks können Sie Ihrer Website neue Funktionen hinzufügen, wie beispielsweise Kontaktformulare, E-Commerce-Funktionen, Projektportfolios, Fotogalerien und soziale Netzwerke.
Plugins sind zwar leistungsstark, stellen jedoch häufig eine Ursache für Probleme bei der Barrierefreiheit dar. Plugins sind nur so gut bzw. barrierefrei, wie sie entwickelt wurden, und da sie den Code Ihrer Website ergänzen oder verändern, können sie leicht zu Problemen bei der Barrierefreiheit führen.
Einfach ausgedrückt: Wenn bei der Entwicklung des Plugins die Barrierefreiheit nicht berücksichtigt wurde, kann es zu Problemen in diesem Bereich kommen. Lassen Sie uns über die gängigen Arten von Plugins sprechen, bei denen ich bereits Probleme festgestellt habe.
„Es ist jedoch schwierig, fundierte Empfehlungen für Plug-ins abzugeben – ich habe noch keinen Weg gefunden, den Überblick darüber zu behalten, ob ein bestimmtes Plug-in barrierefrei ist oder bleibt.“
— Joe Dolson
Interaktive Plugins
Jedes Plugin, das „interaktive“ Elemente wie Karussells, Slider, Dropdown-Menüs, Menüs, Pop-ups, Akkordeons und Registerkarten erstellt, birgt ein hohes Risiko für Barrierefreiheitsprobleme. Diese Art von interaktiven Elementen erfordert besondere Sorgfalt, Aufmerksamkeit und Tests, um die Barrierefreiheit zu gewährleisten, und es ist selten, dass ein Plugin dieser Art diese Anforderungen erfüllt. Dies gilt unabhängig davon, ob die Funktionalität über Shortcodes, Gutenberg-Blöcke, Widgets usw. bereitgestellt wird.
Das soll nicht heißen, dass Ihre Website nicht diese Funktionen haben oder solche Plugins verwenden und trotzdem barrierefrei sein kann; vielmehr müssen Sie bei der Auswahl besonders sorgfältig vorgehen, und ich empfehle Ihnen dringend, jedes Plugin zu testen, bevor Sie es endgültig einsetzen.
Formular-Plugins
Genau wie interaktive Funktionen erfordern auch Formulare besondere Sorgfalt und Aufmerksamkeit, um sicherzustellen, dass assistive Technologien Formulare und Formularfelder korrekt beschreiben, darin navigieren und mit ihnen interagieren können. Beschriftungen, Fehlermeldungen und Fokuszustände müssen alle auf die richtige Weise behandelt werden. Andernfalls haben Nutzer mit Behinderungen Schwierigkeiten bei der Verwendung dieser Formulare. Meiner Erfahrung nach weisen die meisten Formular-Plugins Probleme hinsichtlich der Barrierefreiheit auf. Daher erstellen wir in der Regel individuell programmierte Formulare.
Seitenersteller
Page-Builder-Plugins haben in den letzten Jahren enorm an Beliebtheit gewonnen. Einfach ausgedrückt bieten Page-Builder eine intuitivere „Drag-and-Drop“-Erfahrung beim Erstellen von Seiten auf WordPress-Websites. In vielerlei Hinsicht ähneln Page-Builder dem Gutenberg-Editor, sind jedoch in der Regel leistungsfähiger und ausgefeilter.
Page-Builder können zudem schnell zu Problemen bei der Barrierefreiheit führen. Meiner Erfahrung nach sind die meisten Page-Builder barrierefrei, wenn es um die Darstellung statischer Inhalte geht. Oft enthalten sie jedoch eine Reihe interaktiver Funktionen wie Slider, Animationen und Pop-ups, die Probleme bei der Barrierefreiheit mit sich bringen.
Wenn Sie der Meinung sind, dass Sie einen Page Builder benötigen, um Ihre Website zu erstellen, halten Sie das Design einfach und verzichten Sie auf interaktive Module, es sei denn, Sie haben diese getestet und sichergestellt, dass sie barrierefrei sind.
Plugins für Barrierefreiheit
Bisher haben wir nur über Plugins gesprochen, die sich negativ auf die Barrierefreiheit Ihrer Website auswirken könnten. Wie sieht es mit Plugins aus, die die Barrierefreiheit verbessern Barrierefreiheit verbessern? Im WordPress-Repository sind fast 100 Plugins mit dem Tag „Barrierefreiheit“ versehen, und mir sind mindestens ein Dutzend weitere Premium-Plugins für Barrierefreiheit bekannt. Jedes dieser Plugins verspricht, entweder die Barrierefreiheit von WordPress selbst zu verbessernoder die Barrierefreiheit zu überwachenoder Barrierefreiheitsprobleme bei beliebten Plugins und Themes zu beheben, wie zum Beispiel Gravity Forms, Diviund Genesis.
Auch wenn ich persönlich nur eine Handvoll dieser Plugins verwendet habe – beispielsweise Themes, die behaupten, barrierefrei zu sein –, empfehle ich dir, die Versprechen der Plugins nicht für bare Münze zu nehmen. Es ist mir schon mehr als einmal passiert, dass ich ein Plugin installiert habe, das angeblich , die Barrierefreiheitsprobleme eines beliebten Plugins zu beheben, nur um dann festzustellen, dass das Plugin immer noch eine beträchtliche Anzahl von Barrierefreiheitsproblemen aufwies.
„Ich rate davon ab, Plug-ins zu verwenden, die behaupten oder andeuten, dass sie Ihre Website so anpassen, dass sie die Barrierefreiheitsrichtlinien erfüllt – kein Plug-in wird dieses Ziel ernsthaft erreichen können.“
— Joe Dolson
Nachdem Sie nun wissen, wie Sie die richtigen Themes und Plugins sorgfältig auswählen, um Barrierefreiheit zu gewährleisten, ist es an der Zeit, über die Erstellung barrierefreier Webinhalte zu sprechen.
Barrierefreie Inhalte erstellen
Ein barrierefreies Theme und barrierefreie Plugins allein reichen nicht aus, um Ihre Website barrierefrei zu gestalten. Auch die Inhalte selbst müssen barrierefrei sein. Im Wesentlichen kommt es darauf an, die integrierten Barrierefreiheits-Tools von WordPress richtig einzusetzen und kluge Designentscheidungen zu treffen.
Ich empfehle, Textalternativen für nicht-textuelle Inhalte bereitzustellen, einen ausreichenden Farbkontrast sicherzustellen und beschreibende Links einzufügen.
Textalternativen für nicht-textuelle Inhalte
Das Internet hat sich zu einer medienreichen Landschaft entwickelt. Auch wenn sie ansprechend sind, können Inhalte, die nicht in einem textbasierten Format vorliegen, für Nutzer von assistiven Technologien unzugänglich sein. Ein Screenreader weiß nicht, was auf einem Bild dargestellt ist, und kann es daher ohne Ihre manuelle Unterstützung nicht beschreiben. Ein Podcast kann von einer gehörlosen Person nur dann genutzt werden, wenn eine Transkription vorliegt.
Machen Sie es sich zur Gewohnheit, für alle Bilder, die Sie in eine Seite oder einen Beitrag einfügen, einen Alternativtext – auch „Alt-Text“ genannt – anzugeben. Stellen Sie sich vor, Sie würden das Bild jemandem beschreiben, der es nicht sehen kann, und beschreiben Sie es so ausführlich, dass diese Person dennoch verstehen kann, worum es in dem Bild geht. Dies können Sie direkt im WordPress-Editor tun.
Stellen Sie für Videoclips, Audiodateien oder Diagramme Transkripte oder Zusammenfassungen entweder auf derselben Seite oder an einer leicht zugänglichen, verlinkten Stelle bereit.
Kurz gesagt: Wann immer Sie andere Inhalte als Text hinzufügen, sollten Sie sicherstellen, dass es ein alternatives Format gibt, damit auch Menschen, die nicht sehen oder hören können, diese Inhalte nutzen können.
Für einen ausreichenden Farbkontrast sorgen
Auch wenn dies bereits bei der Themenauswahl angesprochen wurde, sei es hier noch einmal erwähnt. Der WordPress-Editor ermöglicht es Ihnen, die Vordergrund- und Hintergrundfarben anzupassen, was bedeutet, dass Sie Farbkombinationen wählen könnten, die nicht barrierefrei sind.
Auch hier schreibt WCAG 2.0 AA ein Mindestverhältnis von 4,5:1 für normalen Text und von 3:1 für größeren Text vor (fettgedruckt 18 px oder Standard 24 px und größer). Weitere Informationen zum Testen von Kontrastkombinationen finden Sie im Abschnitt „Testen“.
Beschreibende Links
Die meisten assistiven Technologien ermöglichen es den Nutzern, sich auf einer Seite zu bewegen, indem sie von einem Link zum nächsten springen. Dies kann für Nutzer eine effiziente Möglichkeit sein, schnell zur nächsten Seite ihrer Navigation zu gelangen. Diese Funktion ist jedoch nicht effektiv, wenn die auf einer Seite eingefügten Links nicht selbsterklärend sind.
Grundlegende Barrierefreiheitstests
Nur durch Tests lässt sich ein klares Bild davon gewinnen, wie barrierefrei Ihre Website tatsächlich ist. Das heißt: Wenn Sie einfach davon ausgehen, dass Ihre Website barrierefrei ist, ist sie es wahrscheinlich nicht. Es gibt eine ganze Reihe von Tools zur Prüfung der Barrierefreiheit, die von kostenlosen und einfachen bis hin zu teuren Unternehmenslösungen reichen. Ich werde hier auf einige der gängigsten Testlösungen eingehen.
Werkzeuge wie eine Axt
Deque„Axe“ ist ein hervorragender Ausgangspunkt für Barrierefreiheitstests. Sie können mit der kostenlosen Version beginnen (die bereits äußerst umfangreich ist) und sich für zusätzliche kostenlose Beta-Funktionen anmelden, sobald Sie sich besser mit dem Tool vertraut gemacht haben. Axe ist eine Browser-Erweiterung, mit der Sie den aktuellen Zustand einer Seite analysieren können, um eine Liste mit Barrierefreiheitsproblemen und Empfehlungen für bewährte Vorgehensweisen zu erhalten.
Die neuen Beta-Funktionen bieten zusätzliche Möglichkeiten für gründlichere Tests, wie beispielsweise geführte Tests und einen festgelegten Testumfang.
Tastaturnavigation verwenden
Eine einfache Methode zum Testen der Barrierefreiheit besteht darin, mit der Tastatur durch Ihre eigene Website zu navigieren. Beginnen Sie oben auf einer Seite und bewegen Sie sich mit den Tasten „Tab“ und „Umschalt + Tab“ auf der Seite nach oben und unten. Achten Sie dabei darauf, ob Sie auf alle Links in Ihren Menüs zugreifen können. Vergewissern Sie sich außerdem, dass jederzeit klar erkennbar ist, auf welchem Element der Fokus gerade liegt.
VoiceOver/iPhone (Mac)
Wenn Sie Apple-Produkte verwenden, können Sie integrierte Barrierefreiheits-Anwendungen wie VoiceOver nutzen, um Ihre Website und Ihre Seiten auf ihre Barrierefreiheit für Bildschirmleseprogramme zu überprüfen.
Auf einem Desktop-Computer lässt sich VoiceOver mit den folgenden Schritten aktivieren:
- Klicken Sie auf die Apple-Menüschaltfläche in der oberen linken Ecke Ihres Bildschirms
- Öffnen Sie „Systemeinstellungen“
- Klicken Sie auf „Barrierefreiheit“
- Klicken Sie auf „VoiceOver“
- Aktivieren Sie das Kontrollkästchen neben „VoiceOver aktivieren“.
Auf einem iPhone oder iPad lässt sich diese Funktion mit den folgenden Schritten aktivieren:
- Gehen Sie zu „Einstellungen“ > „Barrierefreiheit“ > „VoiceOver“ und aktivieren Sie VoiceOver.
- Rufe Siri auf und sage „VoiceOver einschalten“ oder „VoiceOver ausschalten“
- Dreifachklick auf die Seitentaste (beim iPhone X oder neueren Modellen)
- Dreifachklick auf die Home-Taste (bei anderen Modellen)
VoiceOver hat, wie jeder Bildschirmleser, eine gewisse Einarbeitungszeit. Da es für blinde und sehbehinderte Menschen entwickelt wurde, gibt es Tasten, Tastenkombinationen und Gesten, die Sie anwenden und verstehen müssen, um sich auf Ihrem Desktop und auf Webseiten zurechtzufinden.
Apple bietet umfassende Anleitungen für Desktop-Computer und mobile Geräte bereithalten, die Ihnen den Einstieg erleichtern.
NVDA (PC)
Wenn Sie auf einem PC testen, sollten Sie Folgendes verwenden: NVDA von NV Access verwenden. Dieser Screenreader ist kostenlos; der weitere Support und die Updates werden durch Spenden und Fördermittel finanziert. NVDA verfügt über ein äußerst umfassendes Benutzerhandbuch, und NV Access bietet eine Reihe von Schulungsmaterialienan, falls Sie zusätzliche Unterstützung beim Erlernen der Nutzung der Tools benötigen.
Meiner Meinung nach ist der Einsatz einer Kombination aus Testmethoden und -tools wichtig, um die Barrierefreiheit zu maximieren und die Konformität mit WCAG 2.0 AA zu gewährleisten. Automatisierte Tools wie „axe“ eignen sich hervorragend, um Probleme im Code, im CSS und im Inhalt zu identifizieren. Es gibt jedoch keinen Ersatz dafür, die Website tatsächlich mit assistiver Technologie wie Screenreadern zu nutzen oder mit der Tastatur zu navigieren. „axe“ bietet außerdem einige Funktionen in der Beta-Version für manuelle, geführte Tests an, die Ihnen helfen können, diese Lücke zu schließen.
Fazit
Barrierefreiheit im Web ist kein einfaches Thema, insbesondere wenn es um WordPress geht. Wie Sie bereits erfahren haben, eignet sich WordPress hervorragend für die Erstellung einer äußerst barrierefreien Benutzeroberfläche. Auch wenn der neue Gutenberg-Editor und die neue Admin-Oberfläche noch Verbesserungspotenzial bieten, bilden sie insgesamt eine gute Grundlage für eine barrierefreie Website und ein Tool zur Erstellung von Inhalten.
