So machen Sie WordPress-Websites barrierefrei

Dieser Beitrag wurde von Amber Hinds, CEO von Equalize Digital, einer zertifizierten B Corporation, die sich auf WordPress-Barrierefreiheit spezialisiert hat, als Gast verfasst. Wenn Sie mehr über Equalize Digital und seine Dienstleistungen erfahren möchten, besuchen Sie die Website des Unternehmens.

Millionen von Menschen auf der ganzen Welt haben eine Behinderung, die sich auf die Art und Weise auswirkt, wie sie das Internet nutzen, und nach einer Pandemie, die den Bedarf an einfachen Online-Einkäufen, Lebensmittelbestellungen und sogar Remote-Gesundheitsdiensten erhöht hat, ist die Zugänglichkeit des Internets wichtiger denn je.

In diesem Leitfaden zur Web-Barrierefreiheit wird erläutert, was Barrierefreiheit ist, warum sie wichtig ist und wie man WordPress-Websites barrierefrei macht, einschließlich der Identifizierung häufiger Probleme durch Tests.

In diesem Artikel werde ich Folgendes behandeln:

• Was ist Web-Barrierefreiheit?
• Warum Barrierefreiheit wichtig ist
• Was sind einige häufige Probleme mit der Barrierefreiheit?
• Testen von WordPress-Websites auf Barrierefreiheit
• Eine Website zugänglich halten

Was ist Web-Barrierefreiheit?

Einfach ausgedrückt sind barrierefreie Websites Websites, die von allen Menschen genutzt werden können, auch von Menschen, die möglicherweise nicht über eine typische Tastatur- und Mauskonfiguration mit dem Web interagieren, und von Menschen, die verschiedene intellektuelle oder physische Unterschiede aufweisen.

In Websites müssen bestimmte Funktionen eingebaut werden, um sie für Menschen mit Behinderungen nutzbar und verständlich zu machen. Hör-, Seh-, kognitive, motorische oder Lernbehinderungen erfordern Anpassungen und Website-Modifikationen, um sie nutzbar zu machen. Abhängig von ihrer Situation nutzen Menschen mit Behinderungen verschiedene Hilfsmittel, wie zum Beispiel Screenreader, um auf Websites zuzugreifen.

Webdesigner und -entwickler müssen sicherstellen, dass der Inhalt und die Funktionalität ihrer Websites wahrnehmbar, bedienbar, verständlich und robust (POUR) sind, was bedeutet, dass der Inhalt und die Funktionalität für alle Menschen auf allen Geräten zugänglich und verständlich sind.

Einige Beispiele für Funktionen, die Websites barrierefreier machen, sind:

• Untertitel und Transkripte für Video- und Audiodateien
• Alternativtext auf Bildern
• Überspringen Sie Links, um die Tastaturnavigation zu erleichtern
• Passender Farbkontrast, um den Text besser lesbar zu machen

Warum Barrierefreiheit wichtig ist

Die Barrierefreiheit einer Website wirkt sich auf jeden aus, der das Internet nutzt. Wenn Ihre Websites oder die Ihrer Kunden barrierefrei sind, stellt dies sicher, dass jeder unabhängig von seinen Fähigkeiten den gleichen Zugang zu Online-Informationen, Bedarfsartikeln, Unterhaltung, Einkäufen und mehr hat.

Aber bei der Barrierefreiheit einer Website geht es nicht nur um gutes Karma; Es hat auch reale Auswirkungen auf Suchmaschinen-Rankings, neue Verkäufe und Website-Besucher, rechtliche Komplikationen und das Markenimage.

Suchmaschinenranking

Durch Korrekturen der Barrierefreiheit kann das Suchmaschinenranking einer Website verbessert werden. Viele Barrierefreiheitsfunktionen wie alternativer Text auf Bildern und gut strukturierter Inhalt mit Überschriften helfen sowohl bei der Barrierefreiheit als auch bei der Suchmaschinenoptimierung (SEO). Ein höheres Ranking auf einer Suchergebnisseite kann die Sichtbarkeit bei neuen Kunden steigern, was zu mehr Website-Traffic, mehr Conversions, mehr Blog- oder Newsletter-Abonnenten und mehr führt.

Erhöhter Verkauf

Das CDC gibt an, dass im Jahr 2018 jeder vierte Amerikaner eine Behinderung hat. Behinderte Amerikaner geben jährlich mehr als 200 Milliarden US-Dollar für diskretionäre Online-Ausgaben aus. Barrierefreiheitsfunktionen ermöglichen es mehr Menschen, Websites zu finden und zu nutzen, was die Chancen für neue Verkäufe, Konvertierungen und Stammkunden erhöht. Wenn in der heutigen Welt viele Websites nicht barrierefrei sind, wird jede barrierefreie Website der Konkurrenz um Längen voraus sein.

Es ist gesetzlich vorgeschrieben

Alle Websites müssen den im Americans with Disabilities Act (ADA) festgelegten Standards für die Barrierefreiheit im Internet entsprechen. Mit dem ADA wurde ein Präzedenzfall geschaffen, der Websites als Orte öffentlicher Unterbringung einrichtet. Das bedeutet, dass Unternehmenswebsites, die im Wesentlichen ihre digitalen Schaufenster sind, auf die gleiche Weise barrierefrei gemacht werden müssen, wie das Gebäude eines stationären Unternehmens barrierefrei gemacht werden muss.

Websites lokaler, staatlicher und bundesstaatlicher Behörden sowie alle Websites staatlich finanzierter Organisationen und Projekte müssen ebenfalls den Standards von Abschnitt 508 entsprechen. Darüber hinaus gibt es eine Reihe staatlicher und internationaler Gesetze, die die Barrierefreiheit von Websites vorschreiben.

Wenn eine Website die in diesen Richtlinien dargelegten Barrierefreiheitsanforderungen nicht erfüllt, droht der Organisation möglicherweise eine Klage oder in manchen Fällen eine Geldstrafe. Laut Usablenet wurden im Jahr 2020 in den USA 3.550 Klagen wegen Barrierefreiheit von Websites eingereicht. Die Einhaltung gesetzlicher Vorschriften ist ein wichtiger Bestandteil der Geschäftstätigkeit, und eine barrierefreie Website ist eine Möglichkeit für Unternehmen, ihren gesetzlichen Verpflichtungen nachzukommen.

Markenzeichen

Unternehmen und gemeinnützige Organisationen, die Maßnahmen ergreifen, um ihre WordPress-Websites zugänglicher zu machen, zeigen, dass sie soziale Verantwortung übernehmen und bekräftigen, dass sie das Internet zu einem Ort für alle machen wollen. Ein organisatorisches Engagement für Barrierefreiheit zeigt den Menschen, dass sie sich auf eine zutiefst menschliche Art und Weise um sie kümmern, was Loyalität aufbaut und das Image der Marke verbessern kann.

Was sind einige häufige Probleme mit der Barrierefreiheit?

Mein Unternehmen, Equalize Digital, ist ein Beratungsunternehmen zur Barrierefreiheit, das Barrierefreiheitsprüfungen auf Websites für Unternehmen, gemeinnützige Organisationen und Regierungsbehörden durchführt. Bei all unseren Tests stellen wir fest, dass sich viele Barrierefreiheitsprobleme auf allen Websites wiederholen. Diese häufigen Probleme sind relativ einfach zu lösen, werden jedoch von Entwicklern, Designern und Inhaltserstellern normalerweise übersehen.

Wenn Sie sicherstellen möchten, dass die von Ihnen erstellten oder verwalteten Websites zugänglich sind, prüfen Sie zunächst, ob folgende Probleme vorliegen:

Fehlender oder minderwertiger Alternativtext

Alternativtext wird von Screenreadern verwendet, um blinden Menschen den Inhalt oder Zweck eines Bildes zu beschreiben. Wenn der Alternativtext leer bleibt, überspringt ein Screenreader ihn entweder vollständig oder liest stattdessen den Dateinamen des Bildes vor. Dies ist nicht hilfreich, wenn der Dateiname aus einer Zahlenfolge besteht oder das Erscheinungsbild nicht beschreibt. Ohne geeigneten Alternativtext haben blinde und sehbehinderte Benutzer weder den Kontext noch das Verständnis für ein Bild.

Alternativtext von geringer Qualität ist problematisch, da er das Bild nicht genau beschreibt oder zu ausführlich ist und Verwirrung stiften kann. Wörter und Ausdrücke wie „Bild“, „Bild“, „Grafik von“, „Bild von“ müssen nicht zum Alternativtext hinzugefügt werden, da der Bildschirmleser ankündigt, dass ein Bild oder eine Grafik vorhanden ist.

Wenn Sie alternativen Text haben, der länger als 125–150 Zeichen ist, unterbrechen einige Screenreader den Text und hören auf zu lesen. Das Hinzufügen von Punkten im Alternativtext kann dazu führen, dass Screenreader pausieren, was die Zuhörer möglicherweise verwirrt oder sie glauben lässt, dass der Alternativtext zu Ende ist.

Unzureichender Farbkontrast

Im Webdesign bezieht sich der Farbkontrast auf das Maß der Helligkeit zwischen der Hintergrundfarbe und farbigen Elementen wie Text, Schaltflächen oder Symbolen. Die Hintergrund- und Vordergrundfarben müssen ein Verhältnis von 4,5:1 haben, damit Text in Standardgröße als ausreichend angesehen wird. Sie können Ihren Farbkontrast testen, indem Sie die Hexadezimalcodes beider Farben in einen kostenlosen Farbkontrastprüfer eingeben.

Mehrdeutiger Ankertext

Ankertext ist ein anklickbares Wort oder eine Wortgruppe auf einer Webseite. Wenn Sie auf den Ankertext klicken, gelangen Sie möglicherweise zu einer neuen Website, laden ein Dokument herunter oder öffnen ein Bild oder Video in einem neuen Tab. Ankertext gilt als mehrdeutig, wenn er außerhalb des Kontexts keinen Sinn ergibt oder den Zweck des Links beschreibt. Einige Beispiele für mehrdeutigen Ankertext sind „Link“, „Hier klicken“, „Mehr erfahren“ oder „Weiter“. Beim Hinzufügen von Links zu Inhalten ist es wichtig, dass jemand, der nur den Link unabhängig hört (ohne den umgebenden Text), weiß, wohin der Link zeigt oder was passiert, wenn auf den Link geklickt wird.

Fehlende Bildunterschriften und Transkripte

Untertitel nehmen gesprochene und nicht gesprochene Inhalte wie Soundeffekte, Musik oder Lachen aus einem Video auf und beschreiben sie per Text. Sie erscheinen während eines Videos auf dem Bildschirm, sodass gehörlose und schwerhörige Benutzer verstehen können, was im Video passiert. Darüber hinaus müssen die Untertitel zum Timing des Videos passen. Es ist wichtig zu beachten, dass die Bildunterschriften korrekt sein müssen. Automatisch generierte Untertitel müssen auf Richtigkeit überprüft werden.

Ein Transkript ist eine schriftliche Aufzeichnung dessen, was in einem Audioclip oder während eines Videos gesagt wird. Transkripte bieten eine sekundäre Möglichkeit, Videoinhalte oder Audiodateien zu verstehen. Sie sollten zusammen mit Untertiteln in einem Video verwendet werden, damit die Leute das Transkript lesen können, anstatt das Video anzusehen. Dies ist wichtig, da nicht alle Benutzer Untertitel lesen können. Transkripte bieten außerdem den Vorteil, dass sie leicht in andere Sprachen übersetzt werden können, und können bei der Suchmaschinenoptimierung hilfreich sein.

Testen von WordPress-Websites auf Barrierefreiheit

Der beste Weg, Websites auf Barrierefreiheit zu testen, besteht darin, eine Kombination aus automatisierten, manuellen und Benutzertests durchzuführen.

Automatisierte Barrierefreiheitstests

Automatisierte Barrierefreiheitstests werden mit KI-Scan-Tools durchgeführt. Es gibt viele kostenlose und kostenpflichtige Tools, die eine Vielzahl von Funktionen zum Scannen der Barrierefreiheit bieten können. Bei der Auswahl eines automatisierten Tools sollten Sie Folgendes beachten:

• Die Größe der Website. Wenn Sie eine kleinere Website haben, könnte ein kostenloses Tool für Sie funktionieren. Wenn Sie eine größere Website haben, beispielsweise eine Website mit einem Blog oder einem E-Commerce-Bereich mit Tausenden von Beiträgen, ist ein kostenpflichtiges Tool wahrscheinlich besser geeignet.
• Wie viel Unterstützung Sie benötigen. Wenn Sie Hilfe bei der Suche nach Barrierefreiheitsfehlern auf Ihrer Website benötigen, damit Sie diese beheben können, können kostenlose Tools eine gute Option sein. Wenn Sie Hilfe beim Verständnis von Barrierefreiheitsfehlern benötigen oder möchten, dass diese von jemand anderem behoben werden, versuchen Sie, ein Tool mit integrierten oder von den Entwicklern angebotenen Supportoptionen zu finden. Die Verfügbarkeit von Support ist von entscheidender Bedeutung, wenn Sie mit der Verbesserung der Barrierefreiheit noch nicht vertraut sind.
• Benutzererfahrung. Einige automatisierte Barrierefreiheitstools können direkt auf Ihrer Website verwendet werden, beispielsweise über eine Browsererweiterung oder innerhalb des WordPress-Dashboards. Bei anderen Tools müssen Sie eine Benutzeroberfläche verwenden, die völlig unabhängig von Ihrer Website ist. Wenn Sie bei der Arbeit an Ihrer Website Barrierefreiheitsfehler sehen möchten, wählen Sie ein Tool, das Berichte vor Ort bietet. Dies erleichtert Ihnen die kontinuierliche Überprüfung Ihrer Website auf Barrierefreiheit, während Sie Inhalte auf der Website bearbeiten.

Zwei beliebte kostenlose Tools, die auf jeder Website verwendet werden können, sind WAVE und Axe. Für diese Tools stehen sowohl Chrome- als auch Firefox-Erweiterungen zum Testen einzelner URLs einzeln zur Verfügung, sowie kostenpflichtige Pläne, die Massentests und zusätzliche Funktionen ermöglichen.

WordPress-Plugin zur Barrierefreiheitsprüfung

Wenn Sie Massenscans zur Barrierefreiheit durchführen und Berichte im WordPress-Dashboard anzeigen möchten, ist das WordPress Accessibility Checker-Plugin das beste Tool. Sie können die Basisversion des Plugins kostenlos auf WordPress.org herunterladen.

Die Barrierefreiheitsprüfung durchsucht Seiten und Beiträge nach Barrierefreiheitsfehlern oder potenziellen Problemen und zeigt diese direkt auf dem Bearbeitungsbildschirm für diese Seite oder diesen Beitrag an. Diese In-Page-Berichte sind nicht nur nützlich, um zu überprüfen, ob die Website überhaupt zugänglich ist, sondern auch, um die laufende Erreichbarkeit zu überwachen.

Accessibility Checker führt mehr als 40 verschiedene Prüfungen durch, auch für die oben genannten häufigen Probleme. Die kostenlose Version scannt Beiträge und Seiten und die Pro-Version umfasst vollständige Site-Scans von benutzerdefinierten Beitragstypen und Archivseiten. Falsch gekennzeichnete oder überprüfte Elemente können verworfen werden, sodass im Laufe der Zeit vorgenommene Korrekturen zur Barrierefreiheit nachverfolgt werden können. Es ist ein großartiges Tool für Agenturen, Entwickler und WordPress-Benutzer gleichermaßen.

Manuelles Testen

Leider können automatisierte Scans nicht alle Barrierefreiheitsprobleme auf einer Website identifizieren – einige Probleme können nur von einem Menschen festgestellt werden, der die Website erlebt. Nachdem Sie die Website mit einem automatisierten Tool wie Accessibility Checker getestet haben, führen Sie als Nächstes manuelle Tests durch, um sicherzustellen, dass alle Benutzer sie nutzen können, unabhängig davon, welches Gerät sie verwenden.

Der erste Schritt bei einem manuellen Barrierefreiheitstest besteht darin, zu bestätigen, dass Benutzer nur mit der Tastatur vollständig navigieren können. Gehen Sie zum vorderen Ende der Website und bewegen Sie sich mit den Tabulator- und Pfeiltasten durch die Website. Achten Sie dabei darauf, dass Sie beim Gehen nicht den Überblick verlieren und alle Teile der Website nutzen können.

Nach dem Tastaturtest können Sie mit dem Screenreader-Testen fortfahren. Screenreader sind eine Art unterstützende Technologiesoftware, die blinde und sehbehinderte Menschen verwenden, um Webinhalte zu verstehen. Wenn Sie einen Mac haben, können Sie die in Ihren Computer integrierte VoiceOver-Software verwenden. Wenn Sie keinen Mac haben, können Sie den kostenlosen Open-Source-Screenreader NVDA herunterladen oder den beliebten Screenreader JAWS kaufen. Es empfiehlt sich, Ihre Website mit zwei oder mehr Screenreadern zu testen, da nicht alle Screenreader für einzelne Elemente dasselbe sagen.

Um Ihre Website mit einem Screenreader zu testen, gehen Sie zu der Seite, die Sie testen möchten, und navigieren Sie dann wie beim Tastaturnavigationtest durch die Seite, wobei Sie nur die Tabulator- und Pfeiltasten verwenden. Hören Sie zu, was der Bildschirmleser sagt, während Sie sich durch die Seite bewegen, und markieren Sie alles, was falsch oder verwirrend ist. Achten Sie auf Mediendateien oder Schieberegler, die automatisch abgespielt werden und andere Inhalte auf der Seite unterbrechen.

Nachdem Sie Tastaturnavigation und Screenreader-Tests durchgeführt haben, müssen Sie alle eingebetteten oder verknüpften Mediendateien überprüfen. Zu den Mediendateien gehören Videos, Audiodateien, PDFs, .Doc- oder .XLS-Dateien, Bild- oder Textschieberegler sowie Widgets oder iFrames von Drittanbietern. Stellen Sie sicher, dass Menschen mit einer Behinderung auf die Inhalte aller eingebetteten oder verknüpften Mediendateien zugreifen, mit ihnen interagieren und sie verstehen können.

Benutzertests

Nach automatisierten und manuellen Barrierefreiheitstests wird empfohlen, Benutzertests durchzuführen. Beim Benutzertest geht es darum, reale Benutzer unterstützender Technologien einzustellen, um Ihre Website auf Barrierefreiheitsfehler zu testen. Typischerweise erhält ein Testbenutzer von einem Webentwickler ein Briefing mit konkreten Zielen. Der Testbenutzer wird dann versuchen, diese Ziele zu erreichen und dann dem Entwickler Feedback geben.

Sie können einzelne Testbenutzer über kostenpflichtige oder ehrenamtliche Programme einstellen oder eine Barrierefreiheitsfirma finden, die Benutzertestdienste anbietet.

Fazit: Eine Website barrierefrei halten

Es ist wichtig zu beachten, dass Barrierefreiheit wie SEO ein fortlaufender Prozess ist, der kontinuierliche Überwachung und Änderungen erfordert. Um sicherzustellen, dass Ihre Website zugänglich bleibt, erstellen Sie einen Plan für Folgendes:

• Überwachen und testen Sie regelmäßig auf Barrierefreiheitsfehler mit einem Tool wie dem Accessibility Checker-Plugin.
• Schulen Sie Webentwickler, Designer und Inhaltsersteller in Best Practices für die Barrierefreiheit im Internet. Wenn Sie Websites für Kunden starten, stellen Sie sicher, dass diese wissen, wie sie Inhalte nach dem Start auf barrierefreie Weise hinzufügen können.
• Bleiben Sie über alle Barrierefreiheitsrichtlinien oder Gesetzesänderungen informiert, die Sie befolgen müssen.

Wenn Sie diese Schritte unternehmen, stellen Sie sicher, dass Ihre Website zugänglich bleibt und dass alle Menschen unabhängig von ihren Fähigkeiten gleichberechtigten Zugang zu Informationen, Produkten und Dienstleistungen im Internet haben.