So machen Sie Wordpress-Websites barrierefrei

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

In diesem Leitfaden zur Barrierefreiheit im Web wird erläutert, was Barrierefreiheit ist, warum sie wichtig ist und wie WordPress-Websites zugänglich gemacht werden können, einschließlich der Identifizierung häufiger Probleme durch Tests.

In diesem Artikel werde ich behandeln:

• Was ist Web-Barrierefreiheit?
• Warum Barrierefreiheit wichtig ist
• Was sind einige häufige Barrierefreiheitsprobleme?
• 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, einschließlich Menschen, die möglicherweise nicht über eine typische Tastatur- und Mauskonfiguration mit dem Internet interagieren, und solchen, die eine Vielzahl intellektueller oder körperlicher 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 verwenden Menschen mit Behinderungen verschiedene Hilfsmittel, wie z. B. Screenreader, um auf Websites zuzugreifen.

Webdesigner und -entwickler müssen sicherstellen, dass die Inhalte und Funktionen ihrer Websites wahrnehmbar, bedienbar, verständlich und robust (POUR) sind, was bedeutet, dass die Inhalte und Funktionen von allen Menschen auf allen Geräten abgerufen und verstanden werden können.

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

• Untertitel und Transkripte für Video- und Audiodateien
• alternativer Text auf Bildern
• Links überspringen, um die Tastaturnavigation zu unterstützen
• geeigneter Farbkontrast, um den Text besser lesbar zu machen

Warum Barrierefreiheit wichtig ist

Die Barrierefreiheit von Websites wirkt sich auf alle aus, die das Internet nutzen. Wenn Ihre Websites oder die Websites Ihrer Kunden barrierefrei sind, stellt dies sicher, dass jeder unabhängig von seinen Fähigkeiten den gleichen Zugriff auf Online-Informationen, Notwendigkeiten, Unterhaltung, Einkäufe und mehr hat.

Aber bei der Zugänglichkeit von Websites geht es nicht nur um gutes Karma; Es hat auch reale Auswirkungen auf Suchmaschinenrankings, neue Verkäufe und Website-Besucher, rechtliche Komplikationen und das Markenimage.

Suchmaschinen-Ranking

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

Erhöhter Verkauf

Die CDC gibt an, dass seit 2018 jeder vierte Amerikaner eine Behinderung hat. Behinderte Amerikaner gaben 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, Konversionen und Stammkunden erhöht. Wenn viele Websites in der heutigen Welt nicht barrierefrei sind, wird jede barrierefreie Website der Konkurrenz überlegen sein.

Es ist gesetzlich vorgeschrieben

Alle Websites müssen die im Americans with Disabilities Act (ADA) festgelegten Standards für die Barrierefreiheit im Internet erfüllen. Unter dem ADA wurde ein gesetzlicher Präzedenzfall geschaffen, der Websites als Orte öffentlicher Unterkünfte etabliert. Dies bedeutet, dass Unternehmens-Websites, die im Wesentlichen ihre digitalen Schaufenster sind, auf die gleiche Weise zugänglich gemacht werden müssen, wie das Gebäude eines stationären Geschäfts zugänglich gemacht werden muss.

Websites lokaler, staatlicher und bundesstaatlicher Behörden sowie alle Websites für staatlich finanzierte Organisationen und Projekte müssen ebenfalls die Standards von Abschnitt 508 erfüllen. Darüber hinaus gibt es eine Vielzahl von bundesstaatlichen und internationalen Gesetzen, die die Barrierefreiheit von Websites vorschreiben.

Wenn eine Website die in diesen Richtlinien festgelegten Barrierefreiheitsanforderungen nicht erfüllt, droht der Organisation eine Klage oder in einigen Fällen eine staatliche Geldbuße. Laut Usablenet wurden im Jahr 2020 in den Vereinigten Staaten 3.550 Klagen wegen Barrierefreiheit von Websites eingereicht. Die Aufrechterhaltung der Rechtskonformität ist ein wichtiger Bestandteil der Geschäftstätigkeit, und eine barrierefreie Website ist eine Möglichkeit, wie Unternehmen ihren gesetzlichen Verpflichtungen nachkommen können.

Markenzeichen

Unternehmen und gemeinnützige Organisationen, die Schritte unternehmen, 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. Eine organisatorische Verpflichtung zur Barrierefreiheit zeigt den Menschen, dass sie sich auf zutiefst menschliche Weise um sie kümmern, was Loyalität aufbaut und das Image der Marke verbessern kann.

Was sind einige häufige Barrierefreiheitsprobleme?

Mein Unternehmen, Equalize Digital, ist ein Beratungsunternehmen für Barrierefreiheit, das Barrierefreiheitsprüfungen auf Websites für Unternehmen, gemeinnützige Organisationen und Regierungsbehörden durchführt. Bei all unseren Tests sehen wir viele Zugänglichkeitsprobleme, die sich auf allen Websites wiederholen. Diese häufigen Probleme sind relativ einfach zu lösen, werden aber normalerweise von Entwicklern, Designern und Erstellern von Inhalten übersehen.

Wenn Sie sicherstellen möchten, dass die von Ihnen erstellten oder verwalteten Websites barrierefrei sind, überprüfen Sie zunächst die folgenden Probleme:

Fehlender oder minderwertiger Alternativtext

Alternativtext wird von Screenreadern verwendet, um blinden Menschen den Inhalt oder Zweck eines Bildes zu beschreiben. Wenn der alternative Text leer gelassen wird, überspringt ein Screenreader ihn entweder vollständig oder liest stattdessen den Dateinamen des Bildes vor, was nicht hilfreich ist, wenn der Dateiname eine Zahlenfolge ist oder das Erscheinungsbild nicht beschreibt. Ohne geeigneten alternativen Text haben blinde und sehbehinderte Benutzer keinen Kontext oder kein Verständnis für ein Bild.

Alternativer Text 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 dem Alternativtext nicht hinzugefügt werden, da der Screenreader ankündigt, dass ein Bild oder eine Grafik vorhanden ist.

Wenn Sie alternativen Text haben, der länger als 125–150 Zeichen ist, brechen einige Screenreader ab und hören auf zu lesen. Das Hinzufügen von Punkten innerhalb des Alternativtextes 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 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 wird als mehrdeutig angesehen, wenn er außerhalb des Kontexts keinen Sinn ergibt oder den Zweck des Links beschreibt. Einige Beispiele für mehrdeutigen Ankertext sind „Link“, „Klicken Sie hier“, „Weitere Informationen“ oder „Fortfahren“. 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 führt oder was passiert, wenn auf den Link geklickt wird.

Fehlende Untertitel 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. Außerdem müssen Untertitel mit dem Timing des Videos übereinstimmen. Es ist wichtig zu beachten, dass 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 ein sekundäres Mittel zum Verständnis von Videoinhalten oder Audiodateien. 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 auch den Vorteil, dass sie leicht in andere Sprachen übersetzt werden können, und können SEO unterstützen.

Testen von WordPress-Websites auf Barrierefreiheit

Der beste Weg, Websites auf Zugänglichkeit zu testen, ist die Durchführung einer Kombination aus automatisierten, manuellen und Benutzertests.

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 von 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, kann ein kostenloses Tool für Sie funktionieren. Wenn Sie eine größere Website haben, z. B. 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 brauchen. Wenn Sie Hilfe beim Auffinden von Zugänglichkeitsfehlern auf Ihrer Website benötigen, damit Sie sie 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 jemand anderes sie behebt, versuchen Sie, ein Tool mit Supportoptionen zu finden, die integriert sind oder von den Entwicklern angeboten werden. Der verfügbare Support ist der Schlüssel, wenn Sie neu in der Barrierefreiheitskorrektur 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 von Ihrer Website völlig getrennte Benutzeroberfläche verwenden. Wenn Sie während der Arbeit an Ihrer Website Barrierefreiheitsfehler sehen möchten, wählen Sie ein Tool, das eine Vor-Ort-Berichterstellung bietet. Dies erleichtert es Ihnen, Ihre Website während der Bearbeitung von Inhalten auf der Website kontinuierlich auf Barrierefreiheit zu überprüfen.

Zwei beliebte kostenlose Tools, die auf jeder Website verwendet werden können, sind WAVE und Axe. Diese Tools verfügen beide über Chrome- und Firefox-Erweiterungen zum Testen einzelner URLs nacheinander sowie über kostenpflichtige Pläne, die Massentests und zusätzliche Funktionen ermöglichen.

Accessibility Checker WordPress-Plugin

Wenn Sie Massenscans zur Barrierefreiheit ausfü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.

Accessibility Checker scannt Seiten und Beiträge auf Barrierefreiheitsfehler oder potenzielle Probleme und zeigt sie 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 Zugänglichkeit zu überwachen.

Accessibility Checker führt mehr als 40 verschiedene Prüfungen durch, einschließlich für die oben identifizierten häufigen Probleme. Die kostenlose Version scannt Beiträge und Seiten, und die Pro-Version enthält vollständige Site-Scans von benutzerdefinierten Beitragstypen und Archivseiten. Falsch markierte oder überprüfte Elemente können verworfen werden, was die Verfolgung von Korrekturen der Barrierefreiheit ermöglicht, während sie im Laufe der Zeit vorgenommen werden. Es ist ein großartiges Tool für Agenturen, Entwickler und WordPress-Benutzer gleichermaßen.

Manuelles Testen

Leider können automatisierte Scans nicht jedes Barrierefreiheitsproblem 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 verwenden 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 einer Tastatur vollständig darin navigieren können. Gehen Sie zum Frontend der Website und verwenden Sie die Tabulator- und Pfeiltasten, um sich durch die Website zu bewegen. Achten Sie dabei darauf, dass Sie Ihren Platz nicht verlieren und alle Teile der Website nutzen können.

Nach dem Tastaturtest können Sie mit dem Screenreader-Test fortfahren. Screenreader sind eine Art Hilfstechnologie-Software, 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-Bildschirmleser NVDA herunterladen oder den beliebten Bildschirmleser JAWS kaufen. Am besten testen Sie Ihre Website mit zwei oder mehr Screenreadern, da nicht alle Screenreader dasselbe für einzelne Elemente aussagen.

Um Ihre Website mit einem Screenreader zu testen, gehen Sie zu der Seite, die Sie testen möchten, und bewegen Sie sich dann durch die Seite, wie Sie es während des Tastaturnavigationstests getan haben, indem Sie nur die Tabulator- und Pfeiltasten verwenden. Hören Sie sich an, 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 die 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 Text-Schieberegler und Widgets oder iFrames von Drittanbietern. Stellen Sie sicher, dass Menschen mit Behinderungen auf die Inhalte aller eingebetteten oder verlinkten Mediendateien zugreifen, mit ihnen interagieren und sie verstehen können.

Benutzertests

Nach automatisierten und manuellen Barrierefreiheitstests wird empfohlen, Benutzertests durchzuführen. Beim Benutzertest werden reale Benutzer von Hilfstechnologien eingestellt, um Ihre Website auf Zugänglichkeitsfehler zu testen. In der Regel erhält ein Testbenutzer von einem Webentwickler ein Briefing mit bestimmten Zielen. Der Testbenutzer wird dann versuchen, diese Ziele zu erreichen und dem Entwickler dann Feedback geben.

Sie können einzelne Testbenutzer über kostenpflichtige oder freiwillige Programme einstellen oder eine Firma für Barrierefreiheit finden, die Benutzertestdienste anbietet.

Fazit: Eine Website barrierefrei halten

Es ist wichtig zu beachten, dass Barrierefreiheit wie SEO ein fortlaufender Prozess ist, der eine kontinuierliche Überwachung und Anpassung erfordert. Erstellen Sie einen Plan, um sicherzustellen, dass Ihre Website zugänglich bleibt:

• Überwachen und testen Sie regelmäßig auf Barrierefreiheitsfehler mit einem Tool wie dem Accessibility Checker-Plug-in.
• Schulen Sie Webentwickler, Designer und Ersteller von Inhalten in Best Practices für die Barrierefreiheit im Web. Wenn Sie Websites für Kunden starten, stellen Sie sicher, dass diese wissen, wie sie Inhalte nach dem Start barrierefrei hinzufügen können.
• Bleiben Sie über Zugänglichkeitsrichtlinien oder Gesetzesänderungen auf dem Laufenden, die Sie befolgen müssen.

Wenn Sie diese Schritte unternehmen, tragen Sie dazu bei, dass Ihre Website zugänglich bleibt und alle Menschen unabhängig von ihren Fähigkeiten den gleichen Zugang zu Informationen, Produkten und Dienstleistungen im Web haben.