Was ist eigentlich dieser “Skip to content”-Link?

In den WordPress-Standard-Themes der Twenty-Reihe (und in vielen anderen standardkonformen Themes) sitzt in der header.php kurz nach dem body-tag ein Link der mit Skip-To-Content bezeichnet ist.

<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Diesen Link sieht man normalerweise nicht. Er wird erst sichtbar und aktiv, wenn jemand die Tastatur (Tab-Taste) nutzt um durch die Seite zu navigieren.

Weiterlesen Was ist eigentlich dieser “Skip to content”-Link?

Oft übersehen, aber wichtig: Barrierefreie Sprache

Bei den meisten Webprojekten spielen Text und Sprache eine Nebenrolle – die sprachliche Qualität der Texte ergibt sich irgendwie. Aber ohne verständliche Sprache wird aus dem schönsten Code keine barrierefreie Website.

Einen guter Richtwert für eine barrierefreie Textqualität ist das Leseniveau, das in den WCAG (Web Content Accessibility Guidelines) angesprochen wird. Als Orientierung wird ein einfacher sekundärer Schulabschluss genannt. Das entspricht in etwas dem deutschen Hauptschulabschluss bzw. dem Sprachniveau A2 bis B1 innerhalb des europäischen Referenzrahmens für Sprachen.

Kein Fall für Randgruppen

Von einer barrierefreien Sprache profitieren nicht nur Menschen mit geringem Bildungsniveau. Auch Menschen, deren Muttersprache nicht Deutsch ist, können klar formulierte Texte besser erfassen. Genauso wie alle anderen Leser, die sich schnell einen Überblick über eine Information verschaffen möchten.

Weiterlesen Oft übersehen, aber wichtig: Barrierefreie Sprache

Eine barrierefreie WordPress-Website planen

In diesem Artikel soll es darum gehen, was zu beachten ist, wenn auf der Basis der technischen Grundlagen eine barrierefreie Webseite entstehen soll.

Mit einem accessibility-ready Theme oder dem Plugin WP Accessibility sind wir einer barrierefreien WordPress-Seite schon ziemlich nahe gekommen. Leider das Ergebnis nicht automatisch eine barrierefrei Website. Die Technik macht die ersten Schritte, aber die eigentliche Reise beginnt jetzt erst.

Barrierefreiheit lässt sich nicht in Code packen

Nicht barrierefreie Inhalte oder nicht barrierefreie Plugins können alle Errungenschaften, die im accessibility-ready Theme stecken, wieder neutralisieren.
Wenn z.B. die Redakteure beim Hochladen von Bildern keine (sinnvollen) Alt-Texte eingeben, kann das Theme auch nichts ausgeben.

Auch Texte können Besucher ausschließen, schwer verständliche Texte sind nicht barrierefrei. Weder Menschen mit eingeschränkter Lesekompetenz noch Menschen mit hoher Lesekompetenz, die auf einem mobilen Gerät, bei ungünstigen Lichtverhältnissen oder mit schlechter Datenanbindung nach einer Information suchen, können solche Texte verarbeiten.

Und dann sind da noch die Plugins. Wenn ein Plugin per CSS Farben oder Link-Zustände überschreibt oder kein standardkonformes HTML ausgibt, entstehen überall auf der Seite kleine Stolperfallen.

Weiterlesen Eine barrierefreie WordPress-Website planen

Accessibility-ready WordPress-Themes

Momentan ist Barrierefreiheit (noch) keine verpflichtende Eigenschaft für Themes, die im offiziellen Theme-Verzeichnis gelistet werden. Aber es gibt im Theme-Verzeichnis das Tag „accessibility-ready“.

Accessibility-ready Themes erfüllen die wichtigsten technischen Anforderung für Barrierefreiheit wie sie die WAI (Web Accessibility Initiative) in den Web Content Accessibility Guidelines (WCAG) aufgestellt hat.

Wenn ein Theme im WordPress.org-Theme-Verzeichnis unter dem Stichwort „accessibility-ready“ erscheint, erfüllt es folgende Bedingungen:

  1. Die Seite ist per Tastatur bedienbar
  2. Für Bedienelemente (Buttons, Links und Inputs) wird korrektes HTML verwendet
  3. Links sind verständlich und eindeutig gestaltet
  4. Formulare sind barrierefrei aufgebaut
  5. Das HTML ist semantisch korrekt
  6. HTML-Code ist mit Aria Landmarks gegliedert
  7. Es werden geeignete Farben und gute Kontraste gewählt
  8. Bilder und Medien sind für Seh- und Hörbehinderte zugänglich

In diesem Artikel schauen wir uns die Bedingungen für ein accessibility-ready Themes an und erklären, worum es dabei geht. Alle WordPress-Standard-Themes der Twenty-Reihe sind übrigens accessibility-ready.

1. Bedienbarkeit per Tastatur

  • Alle Links, Buttons und Formularfelder sind über die Tastatur erreichbar, auch Links in Dropdown-Submenüs. Die Enter-Taste aktiviert einen Link oder einen Button, die Leertaste aktiviert Checkboxen und Buttons. Die Pfeiltasten wählen Formular- und Bedienelemente an, z.B. Radio-Buttons, Auswahlfelder, Slider, Reiter oder Menüs mit Baumstruktur. Auch Autocomplete-Vorschläge sind per Pfeiltasten anwählbar.
  • Die style.css enthält die Angaben für a:focus: So können die Besucher erkennen, welches Element sie mit dem Tab gerade angewählt haben.
  • Das CSS für Screenreader-Texte ist so definiert, dass die Texte bei :focus sichtbar werden.
  • Die Tabulator-Reihenfolge wird nicht verändert.
  • Ein Skip-to-Content-Link, der bei :focus sichtbar wird, führt direkt zum zentralen Inhalt.

2. Korrektes HTML für Bedienelemente

  • Die HTML-Elemente button und a sind nicht austauschbar. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars. Ein Link ist – ein Link und verweist auf eine interne oder externe URL.
  • Soll ein Link wie ein Button aussehen, kommt das Attribut role=”button” ins Spiel. Im HTML steht aber nach wie vor ein a.
  • Damit die Besucher mit Screenreader wissen, welche Funktion ein Element hat, sind manche Bedienelemente mit zusätzlichen Informationen ausgestattet. Das ist gerade bei Buttons wichtig. Auch Links, die eine bestimmte Aktion auslösen – wie z.B. der Edit-Link, die Post-Navigation oder zusätzlichen Menüs – haben ergänzende Screenreader-Texte.
Weiterlesen Accessibility-ready WordPress-Themes

Das Plugin WP-Accessibility

Wer sich mit Barrierefreiheit und WordPress beschäftigt, begegnet früher oder später dem Plugin WP Accessibility von Joe Dolson. Ich habe mir angeschaut, was das Plugin macht und was man damit erreichen kann.

Das Plugin WP Accessibility ist für Seiten gedacht, die ein Theme nutzen, das nicht schon „von Haus aus“ accessibility-ready ist und das ein Stück barrierefreier werden soll.
Je nachdem wo das Theme noch Lücken hat kann man mit dem Plugin folgende Eigenschaften ergänzen:

  • Skip-links einbauen für die Navigation per Tastatur
  • ARIA landmark roles
  • Labels hinzufügen für das WordPress-Such-Formular
  • Target-Attribute aus Links entfernen (Links nicht in einem neuen Fenster öffnen)
  • Änderungen im Tabindex entfernen
  • Links immer unterstrichen darstellen
  • Überflüssige Title-Attribute entfernen
  • CSS für a:focus nachrüsten (wichtig für die Tastatur-Navigation)
  • Lange Beschreibungen für Bilder erlauben
  • Post-Titles für „read more“ Links ergänzen

Das Plugin installiert ausserdem zwei Toolbars, mit denen man die Schriftgröße und die Farb-Kontraste verändern kann. Ich persönlich empfinde das eher als Spielerei – die Toolbars tun nichts auf Code-Ebene, es verändert sich nur kurzfristig die Darstellung.

Weiterlesen Das Plugin WP-Accessibility