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

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

In den WordPress-Standard-Themes der Twenty-Reihe sitzt in der header.php kurz nach dem body-tag ein Skip-To-Content-Link.

<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 nutzt um durch die Seite zu navigieren. Probiert es mal aus, den Skip-Link gibt es auch hier auf dieser Seite.

Zugang per Tastatur

Die Navigierbarkeit per Tastatur ist ein zentrales Kriterium für Barrierefreiheit. Mit der Tastatur bewegen sich nicht nur Screenreader über die Seite. Auch Menschen, die keine Maus bedienen können, bewegen sich via Tab-Taste. Weil sie Arthritis in den Händen haben, weil sie keine Arme haben oder weil sie den rechten Arm vier Wochen lang im Gips tragen.

Und wozu braucht es diesen Link jetzt?

Angenommen, ich habe das Excerpt eines Artikels gelesen und möchte jetzt die ganze Version lesen. Ich steuere mit der Tastatur den Read-More-Link an, der Browser öffnet die Seite mit der Einzelansicht des Artikel.

Gäbe es nun den Skip-to-Content-Link nicht, müsste ich mich in der Einzelansicht erst mal durch den gesamten Header-Bereich durchackern. Ich müsste alle Elemente – Logo, Seitentitel, Navigation, Suchfeld – der Reihe nach anklicken bevor ich endlich beim Artikel landen würde. Die Tab-Taste arbeitet sich stur von links oben nach rechts unten durch den Code.
Ist dagegen ein Skip-Link vorhanden, kann ich sofort an die Stelle springen, die mich interessiert.

Aus diesem Grund sollte jede Webseite einen Skip-Link zur Verfügung stellen.
Ein Codebeispiel gibt’s im Accessibility-Handbuch.

Icon Font oder SVG?

Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.

Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.

Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:

Nachteile Icon-Fonts

  • Opera Mini kann keine Icon-Fonts darstellen
    Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig.
  • Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
    Das heisst, die Symbole können unscharf aussehen.

Vorteile Icon-Fonts

  • Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
  • Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
  • Es müssen keine Fallback-Lösungen eingebaut werden.
    Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser

Schlussfolgerung

Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.


Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG

 

Childtheme-CSS auf korrekte Weise laden

Lange Zeit war es üblich, in einem Childtheme die CSS-Angaben vom Parenttheme als @import Anweisung an den Anfang der CSS-Datei des Childthemes zu schreiben.

/*   
Theme Name: Childtheme
Theme URI:
Description: Your child theme description text...
Author: Your Name
Author URI: http://www.yourdomain.com/
Template: parenttheme
Version: 1.0
Tags: Child Theme
*/

/* Import the stylesheet from the parent theme */
@import url('../parenttheme/style.css');

Das ist schön einfach und übersichtlich. Aber @import ist nicht die eleganteste Methode ein Stylesheet einzubinden, denn diese Konstruktion kostet Ladezeit.
Auch der WordPress Codex sagt, man möge Stylesheets nicht mehr per @import, sondern über die functions.php einbinden.

function child_styles() {
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('parenttheme-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_styles' );

Was passiert hier?

Das CSS des Childthemes wird so eingebunden, dass zuerst das CSS des Eltern-Themes geladen wird. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array('parenttheme-style')

Der Browser bekommt dadurch die Anweisung: Lade das Child-CSS nach dem Parent-CSS. Oder anders formuliert: Lade zuerst das Eltern-CSS, dann das Child-CSS.

Nach dem Array kann man noch die Version des Themes eintragen. So kann man sicherstellen, dass nach einem Update des Themes die Parent-Styles neu geladen werden und nicht einfach nur aus dem Cache geholt werden.

Em und rem – was ist der Unterschied?

Im CSS kann man die Schriftgröße in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?

Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.

Weiterlesen Em und rem – was ist der Unterschied?

Anleitung: Ein WordPress-Child-Theme anlegen

Dieser Artikel ist veraltet. Hier geht es zur neuen, aktualisierten Version

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Den Löwenanteil der Anpassungen kann man über die CSS-Datei des Themes umsetzen. Bei WordPress hat diese Datei immer den Namen style.css, man findet sie auf der obersten Ebene des Theme-Ordners.

Das Stylesheet könnt Ihr einfach so bearbeiten, aber geschickter ist es, Ihr arbeitet mit einem Childtheme. Ein Childtheme ist ein kleiner Ableger des Original-Themes, das damit zum Parent (=Eltern)-Theme wird. Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn also mal etwas schiefgeht beim Basteln, dann ist nicht gleich das ganze Theme kaputt. Und wenn die Entwickler des Themes ein Update zur Verfügung stellen, könnt Ihr das Parent-Theme updaten, ohne dass Eure Anpassungen überschrieben werden.
Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. So ist es leichter, die Änderungen nachzuhalten.

Weiterlesen Anleitung: Ein WordPress-Child-Theme anlegen

Ich habe da ein Problem mit meinem WordPress-Theme…

WordPress ist auch für Einsteiger leicht zu lernen. Ein bisschen Zeit und Mühe muss man zwar aufbringen, aber man kommt relativ schnell zu ansehnlichen Ergebnissen. Auch ohne viel Coding-KnowHow. Doch manchmal liegt der Teufel im Detail.

Da hat man sich tapfer durchgekämpft, WordPress ist installiert, ein schickes Theme ist hochgeladen, aber von einem Moment auf den anderen geht es nicht mehr weiter. Wie sehr man sich auch bemüht, das Plugin, das man zuletzt geladen hat, zerschießt das Design oder es erscheinen plötzlich seltsame Fehlermeldungen. Als Anfänger ist man da schnell mit seinem Latein am Ende.

Jetzt wäre es schön, wenn man jemanden fragen könnte. Voilà, Google spuckt ruckzuck eine lange Liste mit WordPress-Dienstleistern aus. Die könnte man doch mal fragen – so teuer wird es schon nicht sein. Das Problem löst ein Profi sicher in fünf Minuten.

Weiterlesen Ich habe da ein Problem mit meinem WordPress-Theme…

Twitter und Facebook im WordPress Benutzer-Profil ergänzen

In den Profileinstellungen im Admin-Menu „Benutzer“ fehlen die üblichen Verdächtigen: Twitter und Facebook. Diese Angaben kann man relativ einfach ergänzen.

Mit diesem Code könnt Ihr neue Felder einfügen. Die Angaben kann man in dei functions.php setzen oder besser in ein kleines PlugIn, damit die Funktion auch dann erhalten bleibt, wenn ihr das Theme wechselt.

// Twitter und Facebook ergaenzen
function twitter_facebook($contactmethods) {
// Twitter dazu
$contactmethods['twitter'] = 'Twitter';
// Facebook dazu
$contactmethods['facebook'] = 'Facebook';
return $contactmethods; }
add_filter('user_contactmethods','twitter_facebook',10,1);

Die Information aus dem Profil könnt Ihr im Theme aufrufen.
Für den Twitterlink geht das beispielsweise mit  the_author_meta(‚twitter‘).
Weiterlesen Twitter und Facebook im WordPress Benutzer-Profil ergänzen