So verwenden Sie Skip-Links, um Ihre WordPress-Site zugänglicher zu machen

In unserer Reihe „Einführung in die Barrierefreiheit“ haben wir über die Grundlage der verschiedenen Richtlinien für barrierefreie Webinhalte (WCAG) gesprochen. Jetzt ist es an der Zeit, den nächsten Schritt zu tun, indem Sie sich einige der wichtigsten Richtlinien ansehen und Ihnen zeigen, wie Sie Ihre Website barrierefreier gestalten können. Beginnen wir mit Bypass-Blöcken, besser bekannt als Skip-Links.

Was ist ein Skip-Link?

Ein Skip-Link ist ein spezieller Link, der auf Ihrer Website ausgeblendet wird, bis er über die Tabulatortaste oder einen Screenreader in :focus gelangt. Ihr Zweck ist es, Benutzern alternativer Technologien (Personen, die Tastaturen und Bildschirmlesegeräte verwenden) die Möglichkeit zu geben, Inhaltsblöcke zu überspringen. Direkt aus den Normen:

„Es steht ein Mechanismus zur Verfügung, um Inhaltsblöcke zu umgehen, die sich auf mehreren Webseiten wiederholen.“ – WCAG-Standard 2.4.1 – Bypass-Blöcke

2.4.1 ist ein A-Level-Standard. Dies bedeutet, dass es von Abschnitt 508 abgedeckt und gesetzlich vorgeschrieben ist. Sie müssen Skip-Links haben.

Können Sie erraten, was der häufigste Block von Inhalts-Skip-Links ist? Wenn Sie „das Menü“ erraten haben, haben Sie Recht. Menüs erscheinen auf fast jeder Seite einer Website. Sehende Benutzer und Mausbenutzer neigen dazu, direkt an ihnen vorbei zu scrollen, weil es eines dieser Seitenelemente ist, von denen Sie einfach erwarten, dass sie dort sind. Aber Navigationsmenüs sind nicht die einzigen Blöcke, die Skip-Links benötigen.

Ein häufig übersehener Bereich für Skip-Links sind linke Seitenleisten (oder rechte Seitenleisten für Websites in Rechts-nach-links-Sprachen wie Arabisch). Aufgrund ihrer semantischen Reihenfolge benötigen Benutzer eine Möglichkeit, die regelmäßig wiederholte Seitenleiste zu überspringen, um direkt zum Inhalt zu gelangen.

Das Gleiche gilt für hervorgehobene Post-Blöcke, die außerhalb der Startseite angezeigt werden. Einige Website-Designs übertragen vorgestellte Post-Abschnitte oder Schieberegler auf Innenseiten. Sofern sich der Inhalt dieser Abschnitte nicht ändert, dh Kategorie- oder Archivseiten, sollte ein Skip-Link vorhanden sein.

Wie fügen Sie Skip-Links hinzu?

Da Sie nun wissen, was ein Skip-Link ist, ist es an der Zeit, ihn zu Ihrer Website hinzuzufügen. Es gibt ein paar Möglichkeiten, dieses Problem zu lösen. Der einfache Weg (und für Sie Nicht-Programmierer der einzige Weg) ist die Installation eines Plugins. Der schwierige Weg ist, sie selbst in Ihr Thema zu codieren.

Verwendung eines Plugins

Ein Plugin, das wir empfehlen, wenn es um das Überspringen von Links geht: WP Accessibility von Joe Dolson. Es behebt mehrere Zugänglichkeitsprobleme, einschließlich des Hinzufügens grundlegender Skip-Links für Sie.

Selber codieren

Ihre andere Möglichkeit besteht darin, Skip-Links selbst zu codieren. Der Code selbst ist ziemlich einfach und erfordert nur einige grundlegende HTML- und CSS-Kenntnisse, aber Sie müssen mit der Funktionsweise von WordPress-Designs und -Vorlagen vertraut sein, bevor Sie diese Methode ausprobieren. Von diesem Punkt an gehen wir davon aus, dass Sie wissen, wie Sie die referenzierten Dateien finden und bearbeiten können.

Wir beginnen damit, zuerst die eigentlichen Skip-Links zu schreiben. Dies ermöglicht ein einfaches Kopieren und Einfügen in die Vorlagendateien. Wenn Sie sich an HTML-Kenntnisse erinnern, müssen Sie ein Anker-Tag schreiben. Beachten Sie, dass die Formatierung hier der Lesbarkeit dient.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Wir haben das href Attribut absichtlich leer gelassen. Dies liegt daran, dass wir definieren müssen, wohin unser Skip-Link führen soll. In diesem Beispiel verwenden wir das <main> -Element als unser Ziel. Da wir ohne ID nicht direkt auf ein Element verlinken können, müssen wir sicherstellen, dass unser <main> -Element eine hat. Ihr <main> -Element wird wahrscheinlich in header.php zu finden sein, aber nicht immer. Sobald Sie das Element gefunden haben, müssen Sie sicherstellen, dass es eine ID hat. Wenn nicht, fügen Sie eine wie folgt hinzu:

 <main id=”main-content”> [a bunch more code below]

Der spezifische Wert der ID ist nicht wichtig, aber Sie müssen ihn sich merken. Jetzt möchten Sie Ihren Skip-Link-Code mit dem ID-Wert aktualisieren.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Nachdem Sie Ihren Skip-Link erstellt haben, gehen Sie zurück zu Ihrer header.php Datei oder wo auch immer sich das öffnende <body> -Tag Ihres Themes befindet. Das <body> -Tag ist eine wichtige Platzierung für Skip-Links, da sie das absolut Erste sein müssen, was für Tastatur- und Screenreader-Benutzer in :focus kommt.

Direkt nach dem <body> -Tag, vorbei an Ihrem fertigen HTML. Im Folgenden sehen Sie ein detaillierteres Beispiel mit mehreren Skip-Links. Wenn Sie Ihrer Website mehrere Links hinzufügen möchten, stellen Sie sicher, dass die IDs korrekt angewendet werden.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Jetzt haben Sie Skip-Links in Ihrem Code, aber Sie sind noch nicht fertig! Wenn Sie Ihre Seite jetzt laden, sehen Sie oben die Skip-Links. Zeit, etwas CSS hinzuzufügen. Das Styling von Skip-Links ist ziemlich einfach, anhand des folgenden Beispiels:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Was Sie nicht sehen, ist die Verwendung von display: none . Wenn Sie es verwenden, überspringt ein Screenreader den Link vollständig, wodurch der Zweck vollständig zunichte gemacht wird. Das Ausblenden erfolgt, indem der Text mit right: 100% außerhalb des Bildschirms platziert und nach right: auto on :focus .

Wenn Sie Ihr CSS angewendet haben, sind Sie fertig. Ihre Skip-Links sind vorhanden, aber ausgeblendet. Wenn ein Tastaturbenutzer oder Screenreader Ihre Seite lädt, indem er :focus einleitet, lassen Ihre Skip-Links ihn direkt zu dem Inhalt gelangen, für den er gekommen ist.

Verpacken

Skip-Links sind ein perfektes Beispiel für eine Barrierefreiheitsfunktion, die wie eine Menge Arbeit aussieht, es aber wirklich nicht ist. Auf der Codeseite haben wir lediglich ein paar Zeilen HTML und CSS hinzugefügt. Für den nicht-technischen Ansatz haben wir ein Plugin installiert. Keine der Methoden dauert sehr lange, was wichtig zu beachten ist, da Skip-Links ein A-Level-Standard für WCAG 2.0 (die aktuellsten WCAG-Standards) sind. Sie sindgesetzlich verpflichtet, sie auf Ihrer Website zu haben.Bringen Sie sich nicht in Gefahr; fügen Sie noch heute Ihre Skip-Links hinzu!