So verbessern Sie die Zugänglichkeit Ihrer WordPress-Website

Hier bei Qode bringen wir Schönheit in WordPress. Das ist buchstäblich unser Motto. Aber das bedeutet nicht, dass wir uns dafür einsetzen, den Stil über die Substanz zu stellen. Barrierefreiheit zu gestalten ist ein wichtiger Aspekt. Unabhängig davon, ob Ihre Inhalte speziell auf Menschen mit Behinderungen ausgerichtet sind oder nicht, kann es nie schlecht sein, an Besucher mit Behinderungen zu denken, die dennoch Ihr Angebot zu schätzen wissen. In diesem Artikel werden wir verschiedene Dinge besprechen, die Sie tun können, um die Zugänglichkeit Ihrer WordPress-Website zu verbessern. Aber bevor wir zu den Messingnägeln kommen, lassen Sie uns ein paar Worte zum Barrierefreiheits-Design in WordPress sagen.

Was bedeutet WordPress-Barrierefreiheit?

Im Allgemeinen bedeutet Barrierefreiheit im Web, dass Website-Designer Schritte unternehmen, um sicherzustellen, dass Menschen mit Behinderungen, seien es kognitive, visuelle, auditive, neurologische oder andere, kann die Website nutzen.

Barrierefreiheit zu gestalten bedeutet insbesondere, die Besucher mit Behinderungen zu berücksichtigen, die sie daran hindern könnten, zumindest alle Funktionen Ihrer Website zu nutzen, oder sogar im Extremfall sogar daran hindern, auf Ihre Inhalte zuzugreifen. Das Wesentliche ist das Barrierefreies Design bedeutet UX-Forward für Menschen mit Behinderungen.

Zu den Best Practices im Design gehören jetzt mehrere Techniken, mit denen Sie die Zugänglichkeit verbessern und Ihre WordPress-Website für Personen einfacher nutzen können, die sie nicht ohne Hilfe verwenden können. Dies bedeutet nicht, dass eine barrierefreie Gestaltung nur Ihren behinderten Besuchern zugute kommt. Es kann auch profitieren Menschen mit vorübergehenden Behinderungen, z. B. Personen, die sich aufgrund einer Augenoperation möglicherweise einen Arm gebrochen haben oder vorübergehend das Sehvermögen verloren haben, Personen mit einer sehr langsamen Verbindung oder Personen, die ihren Text einfach in Audioform bevorzugen.

All dies bedeutet, dass barrierefreies Design nicht auf eine behinderte Minderheit ausgerichtet ist, sondern stattdessen zu einer insgesamt besseren Benutzererfahrung führt – und eine potenzielle Zunahme des Publikums.

So testen Sie die aktuelle Erreichbarkeit meiner Website

Sie können Ihre Webseiten auf Barrierefreiheit testen, indem Sie eines von mehrere webbasierte Tools zur Bewertung der Barrierefreiheit, wie zum Beispiel FAE, Achecker oder WELLE. Von diesen fanden wir WAVE als das schnellste und benutzerfreundlichste. Fügen Sie einfach die Webseitenadresse in das Adressfeld ein und klicken Sie auf das Pfeilsymbol, um den Bericht zu erhalten.

Welle

Wir haben einen Bericht über einen Artikel aus der internationalen Ausgabe von The Guardian veröffentlicht, und wir können leicht erkennen, welche Bereiche verbessert werden müssen, da sie mit Symbolen gekennzeichnet sind. Um einen detaillierten Einblick in das Problem zu erhalten, klicken Sie einfach auf das Symbol und lesen Sie den Tooltip. So wissen Sie, wie Sie jedes Problem lösen können.

Wellenbericht

WAVE-Entwickler haben auch bereitgestellt Erweiterungen für Chrome und Firefox, mit dem Sie einen Bericht zur Barrierefreiheit zurückgeben können, ohne Daten an die WAVE-Server zu senden, um dies so sicher wie möglich zu machen.

Verwandt :  So richten Sie den Schlafenszeitalarm in iOS 10 ein

Grundlegende integrierte Barrierefreiheitsfunktionen von WordPress

WordPress-Entwickler haben eingeführt Standards für Barrierefreiheit für alle neuen Codes und a empfohlene Vorgehensweise Handbuch für Programmierer mit Codebeispielen. Sie müssen jedoch nicht wissen, wie man codiert, um Ihre Website zugänglicher zu machen.

Überschriften

Zum Beispiel, eine gute Überschriftenstruktur ist sehr wichtig an Personen, die Software wie Bildschirmlesegeräte verwenden. Wenn der Text groß und fett dargestellt wird, wird dem Bildschirmleser nicht klar, dass es sich bei dem Text um eine Überschrift handelt. Benutze einen Üerschrift Block in Gutenberg, ein Heading-Element in Elementor oder Heading-Tags wie

im Classic-Editor. Die Überschrift 1 ist die Überschrift der Hauptseite und sollte für nichts anderes verwendet werden.

Die interne Struktur des Textes sollte durch die Überschriften 2 bis 6 gegliedert werden, ohne Ebenen zu überspringen. Sie sollten auch vermeiden, Überschriften zusätzliche Funktionen hinzuzufügen, wie z. B. Links. Umgekehrt sollten Sie Überschriften nicht nur aus ästhetischen Gründen verwenden. Dafür gibt es Schriftgröße und -stil. Eine gute Überschriftenstruktur hilft nicht nur Benutzern mit Screenreadern – sie bedeutet auch einen besseren SEO-Score.

Beim Erstellen von Links sollten Sie Stellen Sie sicher, dass aus dem Kontext klar hervorgeht, was ein Link ist und was nicht. Wenn ein Link von anderem Text umgeben ist, sollte er gemäß Best Practices unterstrichen und in einer anderen Farbe angezeigt werden.

Hinzufügen von Alt-Attributen zu Bildern

Das Hinzufügen von Alt-Attributen zu Bildern macht sie für Screenreader-Software „lesbar“., und es ist sehr einfach zu tun. Alles, was Sie tun müssen, ist auf ein beliebiges Bild in Ihrer Medienbibliothek zuzugreifen.

Medienbibliothek

Im rechten Seitenmenü finden Sie das Alt-Textfeld. Geben Sie einfach eine aussagekräftige Beschreibung des Bildes ein, das in unserem Fall ein Landschaftsfoto ist, das rein dekorativen Zwecken dient und nichts weiter als eine einfache Beschreibung erfordert.

Bild-Alt-Text

Eine Person, die einen Website-Reader verwendet, hat nun die Textbeschreibung des Bildes. Diese Funktion Ihrer Mediendateien sollten Sie nicht übersehen – sie kann sich auf Ihren SEO-Score auswirken. Wenn Sie mehr wissen möchten, haben wir eine ausführliche Anleitung zu alternativen Text- und Bildtiteln.

Farbpaletten

Einige Farbpaletten können Benutzern mit Sehschwäche, Farbenblindheit und ähnlichen Erkrankungen Probleme bereiten. Allgemein gesagt, je mehr Kontrast, desto besser, obwohl zu viel Kontrast kann bei Menschen mit empfindlichen Augen zu Problemen führen. Dies gilt nicht nur für Text und Hintergrund, sondern auch für Elemente (wie Schaltflächen, Symbole, Menüs und andere) und Hover-Effekte. Weitere Informationen zum Ändern von Textfarben in WordPress finden Sie in unserer ausführlichen Anleitung.

Das empfohlene Kontrastverhältnis der Hintergrund-:Vordergrund-Helligkeit beträgt 4,5:1 für normalen Text oder 3:1 für großen Text. Es gibt eine Vielzahl von Tools, mit denen Sie Ihre Kontrastverhältnisse überprüfen können, wie z WebAIM-Kontrastprüfer. WELLE, da es ein umfassendes Tool ist, wird auch Kontrastprobleme in Ihrem Website-Design hervorheben.

So entwerfen Sie barrierefreie Formulare

Formulare sind ein wichtiger Bestandteil der Webinteraktion. Es gibt ein paar Dinge, die Sie tun können, um sie zugänglicher zu machen.

Zuerst, gute beschriftung ist wichtig. Beschriften Sie alle Ihre Felder richtig und deutlich. Zweitens, Platzhaltertext verwenden – Beispiele für Text, den Ihre Besucher in Formulare eingeben müssen. Wenn Sie beispielsweise eine URL erwarten, verwenden Sie etwas wie www.ihrewebsite.com für einen Platzhalter. Schließlich, eine vollständige Anleitung zum Ausfüllen eines Formulars kann für Sehbehinderte eine große Hilfe sein.

Verwandt :  So verstecken Sie Ihre Android-Apps vor schnüffelnden Augen

So verbessern Sie die Zugänglichkeit Ihrer WordPress-Website mit einem Plugin

Es ist keine Überraschung, dass es eine Reihe von Tools gibt, mit denen Sie einige der häufigsten Probleme von WordPress-Websites mit der Barrierefreiheit beheben können. Das Plugin, das wir möglicherweise am nützlichsten fanden, ist WP-Zugänglichkeit. Wir führen Sie zu einigen seiner wichtigen Funktionen.

Nachdem Sie das Plugin installiert und aktiviert haben, müssen Sie es konfigurieren. Navigieren Sie zu Einstellungen für Barrierefreiheit von dem Installierte Plugins Bildschirm auf Ihrem Dashboard.

Einstellungen für Barrierefreiheit

Um Ihre Website für Website-Leser zugänglicher zu machen, können Sie Folgendes hinzufügen: Skiplinks. Skiplinks sorgen dafür, dass sich die Leser auf den Inhalt konzentrieren, anstatt zuerst alle Menüs und Kopfdaten durchlesen zu müssen. Das Konfigurieren von Skiplinks erfordert ein wenig Code-Kenntnisse, daher gehen wir hier nicht auf Details ein. Es bietet Ihren Benutzern eine Schaltfläche, mit der sie unnötige Inhalte überspringen und direkt zum Kern der Sache gelangen können. Sie müssen nur ein ID-Attribut zuweisen, wohin der Link Ihren Besucher führen soll.

Linkup überspringen

Als nächstes gibt es die Einstellungen für die Eingabehilfe-Symbolleiste. Wenn Sie überprüfen Eingabehilfen-Symbolleiste mit Schriftgrößenanpassung und Kontrastumschaltung hinzufügen, wird Ihrem Benutzer eine Symbolleiste am Bildschirmrand angezeigt.

Bedienungshilfen-Symbolleiste

Damit können sie eine kontrastreiche Version Ihrer Website anzeigen…

Hoher Kontrast

…oder um die Hauptschrift zu vergrößern.

Schriftgröße

Wir werden nicht auf die Details der Symbolleisteneinstellungen eingehen, aber es gibt mehrere Optionen, die Sie möglicherweise testen möchten, bevor Sie sie für Ihre Besucher aktivieren.

Als nächstes haben Sie die Verschiedene Einstellungen Sektion.

Verschiedene Einstellungen

Sie können diese einzeln durchgehen und sehen, welche für Ihre Website am besten geeignet sind. Beispielsweise verwendet Ihre Website möglicherweise eine RTL-Textsprache (von rechts nach links) – das müssen das Plugin und der Website-Leser wissen. Vielleicht möchten Sie, dass Ihre Bilder längere Beschreibungen haben, und auch dafür gibt es eine Option.

Drei dieser Kontrollkästchen sind standardmäßig aktiviert: Links haben kein Zielattribut, die Website gibt einen Suchfehler zurück, wenn das Suchfeld keine Zeichenfolge enthält, und tabindex wird aus fokussierbaren Elementen entfernt.

Als nächstes haben Sie die Titelattribute entfernen Sektion. Dies dient dazu, dem Website-Leser mitzuteilen, dass einige Elemente im Layout keine Titel sind. Wir empfehlen Ihnen, dies durchzugehen und das title-Attribut von allem zu entfernen, das es nicht benötigt.

Sie haben auch ein praktisches Tool zur Kontrastkontrolle. Wählen Sie einfach die von Ihnen verwendeten Farben aus oder fügen Sie deren Hex-Codes in die entsprechenden Felder ein und prüfen Sie, ob Ihre Kontrastverhältnisse Ihren Anforderungen entsprechen.

Farbkontrast

Abschließend

Wie wir gezeigt haben, gibt es viele Dinge, die Sie tun können, um Ihre Website zugänglicher zu machen. Vermeiden Sie die Fallstricke, barrierefreies Design als bloße Unterbringung einer Minderheit zu betrachten – tatsächlich sprechen Sie nur ein breiteres Publikum an und investieren nur wenig mehr Zeit und Mühe in potenziell hohe Renditen. Ganz zu schweigen davon, dass einige dieser Techniken Ihren SEO-Score erheblich verbessern können. Warum willst du das nicht nutzen?

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.