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

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 müssen werden Farben und gute Kontraste gewählt
  8. Bilder und Medien sind für Seh- und Hörbehinderte zugänglich
HINWEIS
Eine ausführlichere Version dieses Artikels mit Code-Beispielen und Links findet Ihr im KrautPress Paper Nr. 1 WordPress-Themes

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

Performance-Experiment mit gzip und Browser-Caching

Auf dem WordCamp Nürnberg hat Jan Thiel einen tollen Vortrag zum Theme Performance gehalten: WordPress Performance Mythbuster. Den Vortrag könnt Ihr Euch hier auf wordpress.tv anschauen.

Performance ist ein wichtiges Thema, nicht nur seit Google ein Auge drauf hat. Je langsamer eine Seite lädt, desto schlechter ist die User Experience. Jede Millisekunde zählt, bei mobilen Geräten umso mehr.

Spannend fand ich, wie Jan herausgearbeitet hat, wo denn der Flaschenhals bei den Ladezeiten tatsächlich liegt. Vorsicht Spoiler: Weder die Server-CPU noch der PHP-Code vom WordPress-Core sind hier die Bremse, der PHP Code von Themes und Plugins ist es, der aufs Tempo drückt.

Was logischerweise bedeutet, dass noch’n Plugin Eure Seite nicht unbedingt schneller macht. Auch wenn Performance-Optimierung draufsteht. Ausnahmen bestätigen die Regel.

Das Experiment

Ich hab mir mal zwei Sachen vorgenommen, die Jan in seinem Vortrag erwähnt hat, mit denen man der Netzialisten-Seite Beine machen kann. Ich hab dazu das Google Page Speed Tool genutzt, obwohl ich ein etwas gespaltenes Verhältnis dazu habe: Die Angaben dort muss man mit Vorsicht geniessen und immer die Verhältnismäßigkeit im Auge behalten. Beispiel: Man kann schon „Punktabzug“ kriegen, wenn ein einziges 32KB-Bild nicht optimiert ist.

Die beiden Techniken, die ich mir angeschaut habe, sind:

  1. gzip -Komprimierung
  2. Browser-Caching

Weiterlesen Performance-Experiment mit gzip und Browser-Caching

Content-Strategie: Welche Texte kommen auf die Webseite?

Alle warten darauf, dass die neue Webseite endlich online geht. Das Web-Team arbeitet schließlich schon eine ganze Weile daran. Momentan diskutiert das Team über die Frage: Welche Inhalte kommen rein in die Webseite und welche bleiben draussen?

Diese Frage hat es in sich. Denn über nichts kann man sich schöner in die Haare kriegen.
Hier hilft ein Blick auf die drei Leitfragen der Content-Strategie:

  1. Mit wem wollen Sie ins Gespräch kommen?
  2. Welche Botschaft möchten Sie vermitteln, was wollen Sie [als Unternehmen] erreichen?
  3. Mit welchen Fragen kommen die Besucher auf Ihre Seite?

Aus diesen Leitfragen lassen sich objektive Kriterien zur Bewertung der Inhalte ableiten. Jeder Text, jedes Bild, Video usw. kann anhand dieser Kriterien auf seine Verwendbarkeit abgeklopft und eingeordnet werden.

  1. Welche Nutzergruppe spricht Text A an?
  2. Welche Botschaft vermittelt Text B?
  3. Welche Fragen der Besucher beantwortet Text C?

Weiterlesen Content-Strategie: Welche Texte kommen auf die Webseite?

Tipps für gute Texte im Web

Nicht jeder Text eignet sich für die Veröffentlichung auf einer Webseite. Eine „Zweitverwertung“ bereits vorhandener Texte gelingt daher am besten, wenn man mit kritischem Blick auswählt und das Textmaterial mediengerecht aufbereitet.

3 Kriterien für gute Texte

  1. Komm auf den Punkt
  2. Gliedere Deinen Text
  3. Fasse Dich kurz

1. Komm auf den Punkt

Ein guter Text – im journalistischen Sinn – ist das Gegenteil von dem, was man uns in der Schule und an der Uni beigebracht hat. Dort haben wir gelernt, dass man erst Mal alle Argumente sammeln muss. Dann folgt eine ausführliche Betrachtung sämtlicher Aspekte und erst ganz am Schluss präsentieren wir das Ergebnis unserer Überlegungen.
Weiterlesen Tipps für gute Texte im Web

Über das Für und Wider von Dropdown-Menüs

Viele WordPress-Themes kommen heute mit dieser Funktion und Kunden wie Designer sind fasziniert von dieser Technik. Man kann sie sehr schön in einen Entwurf integrieren, Dropdowns sind optisch dezent und elegant und brauchen wenig Platz. 

Was ist ein Dropdown-Menu?

Ein Dropdown-Menü ist etwas in dieser Art:

Das heisst, beim Klick auf den Menüpunkt „Leistungen“ klappt ein Untermenü heraus, auf dem dann alle Unterseiten zu sehen sind. Es gibt noch eine zweite Verainte, Fly-Out genannt. Hier klappt das Zusatzmenü zur Seite und nicht nach unten auf.

Was sind die Vorteile?

  • Mit einem ausklappbaren Menü kann man die Navigation sehr „aufgeräumt“ darstellen.
    Auch und gerade dann, wenn sich sehr viele und verschachtelte Inhalte auf den Ebenen dahinter verbergen.
  • Im aufgeklappten Bereich sieht man alle Unterseiten auf einen Blick
    Weiterlesen Über das Für und Wider von Dropdown-Menüs