So integrieren Sie Barrierefreiheit im Web in Ihre WordPress-Site

Veröffentlicht: 2020-02-15

WordPress ist die beliebteste Plattform zum Erstellen von Websites. Laut W3techs verwenden 35,7 % aller Websites WordPress, was es auf erstaunliche 62,5 % des weltweiten Marktanteils von Content Management Systemen (CMS) bringt.

Beim Erstellen einer WP-Website ist die Webzugänglichkeit jedoch wahrscheinlich das Letzte, woran Sie denken.

Die WordPress Accessibility Coding Standards besagen jedoch, dass „ Alle neuen oder aktualisierten Codes, die in WordPress veröffentlicht werden, den Web Content Accessibility Guidelines 2.0 auf Stufe AA entsprechen müssen. ”

Mit anderen Worten, die Zugänglichkeit ist ein kritischer Faktor, wenn Sie eine WP-Website haben.

Glücklicherweise ist es nicht unmöglich, Ihre WP-Website zugänglich zu machen. Aber bevor wir diskutieren, wie das geht, wollen wir verstehen, was Web-Zugänglichkeit ausmacht.

A. Die vier Säulen der Barrierefreiheit im Internet

Das World Wide Web Consortium (W3C), das internationale Standards für das Web entwickelt, hat bereits die folgenden vier Prinzipien der Webzugänglichkeit entwickelt:

Wahrnehmbar: Sie müssen alle Informationen und Elemente auf Ihrer Website so präsentieren, dass jeder sie wahrnehmen kann.
Bedienbar: Alle Ihre navigierbaren und interaktiven Elemente müssen von verschiedenen Benutzern bedienbar sein.
Verständlich: Jeder sollte in der Lage sein, die Informationen und die Benutzeroberfläche auf Ihrer Website zu verstehen.
Robust: Verschiedene Arten von Hilfstechnologien und Benutzer sollten in der Lage sein, den Inhalt Ihrer Website zu lesen.

B. Best Practices für Barrierefreiheit im WordPress-Web

Unter Berücksichtigung der oben genannten Grundsätze können Sie die folgenden Schritte unternehmen, um Ihre WordPress-Site für Behinderte zugänglich zu machen:

Textzugänglichkeit verbessern

Jeder, auch Sehbehinderte, sollte in der Lage sein, den Text auf Ihrer Website zu lesen. Während Sie standardmäßig große Schriftarten verwenden können, wird die Lesbarkeit durch die Bereitstellung von anpassbarem Text weiter verbessert. Sehbehinderte Benutzer können mit dieser Funktion die Schriftgröße nach Belieben erhöhen.

Stellen Sie außerdem sicher, dass Sie bei Bedarf Textalternativen wie Alt-Tags hinzufügen. WP Accessibility ist eines der WordPress-Zugänglichkeits-Plugins, mit denen Sie in der Größe veränderbaren Text und Farbkontrast hinzufügen, Beitragstitel hinzufügen können, um mehr Links zu lesen, und geeigneten Alt-Text bereitstellen können.

Strukturiertes Front- und Backend

Jede Ihrer Webseiten muss ein gut strukturiertes Front- und Backend haben. Es erhöht nicht nur die allgemeine Lesbarkeit Ihrer Inhalte, sondern erleichtert es auch Hilfswerkzeugen, die Nachricht an behinderte Benutzer zu übermitteln. Sie können HTML-Elemente wie semantische Überschriften-Tags und Meta-Beschreibungen verwenden, um das Backend zu verbessern.

Stellen Sie sicher, dass Sie Listen mit Aufzählungszeichen, kurze Absätze und gut organisierte und auf den Punkt gebrachte Inhalte verwenden, um das Frontend zu verbessern. Sie sollten auch geeignete Überschriften und Titel verwenden, um verschiedene inhaltliche Unterabschnitte zu definieren. Vermeiden Sie auffällige Animationen und GIFs, da diese nicht barrierefrei sind.

Fügen Sie außerdem Skip-Links hinzu, um die Inhaltsnavigation für Screenreader-Benutzer zu vereinfachen. Diese einfache Zugänglichkeitsfunktion ermöglicht es Benutzern, von einem Abschnitt des Inhalts zum anderen zu springen, ohne unnötiges Material durchgehen zu müssen.

Tastaturnavigation für bessere Interaktion

Sie müssen auch sicherstellen, dass Ihre Website über die Tastatur navigierbar ist. Es sollte Links und Menüs enthalten, insbesondere Dropdown-Menüs. Alle Benutzer sollten in der Lage sein, mit Tab (vorwärts) und Umschalt+Tab (rückwärts) auf Elemente wie Links, Menüs, Schaltflächen und Formulare zuzugreifen.

Sie müssen auch einen sichtbaren Fokusindikator verwenden, der behinderten Benutzern anzeigt, wo sie sich auf einer Webseite befinden. WordPress-Designs können oft den Standard-Fokusstil zurücksetzen. Stellen Sie sicher, dass Sie ein WordPress-Theme verwenden, das diese Funktion nicht zurücksetzt. Das Divi-Barrierefreiheitsthema kann Ihnen helfen, eine tastaturfreundliche Navigation mit barrierefreien Dropdown-Menüs und visuellen Umrissen für fokussierbare Elemente einzurichten.

Fügen Sie ARIA-Orientierungspunkte hinzu

ARIA steht für Accessible Rich Internet Applications. Mit einer ARIA Landmark-Rolle können Sie verschiedene Bereiche einer Webseite definieren, sodass Benutzer von Hilfstechnologien problemlos auf Ihrer Website navigieren können.

Zu den häufigsten ARIA-Markenzeichenrollen gehören ein Banner, eine Haupt-, eine Zusatz-, eine Inhaltsinfo, eine Suche und eine Navigation.

Banner: Definiert Website-Überschriften wie Logo, Firmenname oder Website-Titel.
Main: Definiert den Hauptinhalt der Webseite.
Komplementär: Erkennt unterstützende Inhalte, die ein wesentlicher Bestandteil des Hauptinhalts sind.
Inhaltsinformationen: Bietet Informationen zu den übergeordneten Dokumenten wie Fußnoten, Urheberrechte und Datenschutzerklärungen.
Suche: Bezeichnet das Suchformular auf Ihrer Website.
Navigation: Markiert Navigationselemente einer Webseite.

Der größte Vorteil der Verwendung von ARIA-Orientierungspunkten besteht darin, dass sie mit bereits semantischen HTML5-Elementen arbeiten können. Dadurch können Sie sie mit HTML5-Elementen in bestehenden WordPress-Themes verwenden.

Interaktive Elemente: Farbkontrast

Verwenden Sie für interaktive Elemente wie CTAs und Formulare immer kontrastreiche Farben als Texthintergrund. Während WCAG 2.0 Level AA ein Kontrastverhältnis von mindestens 4:5:1 für normalen Text und 3:1 für großen Text erfordert, erfordert Level AAA ein Kontrastverhältnis von mindestens 7:1 für normalen Text und 4:5: 1 für großen Text.

Normalerweise bietet schwarzer Text auf weißem Hintergrund den besten Farbkontrast. Sie können auch schwarzen Text auf gelbem Hintergrund verwenden und umgekehrt. Vermeiden Sie jedoch Kombinationen wie grüne Schrift auf rotem Grund oder rote Schrift auf grünem Grund.

Trennwörter

Die Zugänglichkeit der Website erstreckt sich auch auf andere interaktive Elemente, wie z. B. Multimedia, auf Ihrer Website. Stellen Sie sicher, dass keine der Multimedia-Inhalte wie Video, Audio, Schieberegler oder Karussells eine standardmäßige Autoplay-Option haben, da dies ein erhebliches Hindernis für behinderte Benutzer darstellt. Stattdessen sollten alle Multimedia-Inhalte erst nach einer Benutzerinteraktion abgespielt werden.

Stellen Sie sicher, dass Sie neben Videotranskripten, Audiobeschreibungen und Untertiteln barrierefreie Mediaplayer verwenden. Sie können ein Plugin wie Able Player verwenden, mit dem Sie Videos und Audios hinzufügen können, die in einem barrierefreien Mediaplayer auf jeder Seite Ihrer WordPress-Site enthalten sind.

Um Ihre WordPress-Website zugänglich zu machen, müssen Sie ihren Design- und Entwicklungsablauf ändern und können über einen manuellen Prozess mit einem Berater erfolgen. Eine automatische Web-Barrierefreiheitslösung erfordert eine geringe Investition an Zeit und Ressourcen und bringt zahlreiche Vorteile mit sich, darunter ein positives Markenimage, eine größere Marktreichweite, ein besseres Suchranking und nicht zu vergessen höhere Umsätze.

Wenn Sie immer noch Zweifel haben, wie Sie Ihre WordPress-Site barrierefrei machen können, können Sie Ihre Fragen gerne in den Kommentaren hinterlassen.