Wie? Mein WordPress-Theme geht auch barrierefrei!

Wie? Mein WordPress-Theme geht auch barrierefrei!

A-Tag 2010 - Sylvia Egger – sprungmarker.de

Video: WordPress Counter (http://wordpress.org/download/counter/) 05.11.2010

05.11.2010 3 Screenshot: WordPress Counter modifiziert

WordPress 3.0 (Juni 2010)

Neues Default-Theme

Twenty Ten

05.11.2010 4 Sylvia Egger - brainbits.net - sprungmarker.de

Twenty Ten

Wenn nur jeder 50te nach dem Download

das Default-Theme nutzt ...


05.11.2010 6 Screenshot: WordPress Counter modifiziert

Twenty Ten

Sicherlich ist die Nutzung weitaus höher ...


05.11.2010 8 Screenshot: Twenty Ten Beispiele

Twenty Ten

Und so sieht das Original aus ...


05.11.2010 10 Screenshot: Twenty Ten (http://2010dev.wordpress.com/)

Twenty Ten

Wer nutzt das Default-Theme?


Die Einsteiger „Also habe ich mich mal wieder dazu entscheiden das Default-Theme laufen zu lassen. Hmm, ich bin zwar kein Anhänger von diesem, aber immerhin besser als ein zerschossenes Theme.“

(T. Dietz)


Die Individuellen „Habe grade mein Wordpress installiert und bin dabei meine Seite zu designen. ich benutze das standard twentyten theme. dort werden die links in der sidebar und der kommentarfunktion blau angezeigt. diese farbe würde ich gern ändern. das muss doch an irgend einer stelle im quelltext gehen. nur wo?“

(Forum WordPress Deutschland)


Die Professionellen „Ja. Theme ist auf dem aktuellen Stand. Lediglich die style.css und drei/ vier kleinere Dinge in Header/Footer habe ich verändert. (...) Ich muss allerdings erwähnen, dass ich "anundfürsich" recht fitt in php & css bin und auch das lange nicht meine erste Anpassung von wp ist. “



Die Theme-Entwickler „Ich habe folgendes Problem: Mir gelingt es nicht jQuery in meiner XAMPP Entwicklungsumgebung bei Wordpress zum Laufen zu bringen. Ich habe einen Child Theme zu Twentyten angelegt.

Der "Link" wird angezeigt, aber das Fenster mit "Hello world!" geht nicht auf. Hat jemand eine Idee, woran dies liegen könnte?“



Twenty Ten

Barrierefrei?


Twenty Ten

„Wordpress ist ein an und für sich so demokratisches Medium und es gibt immer noch keine barrierearmen Templates !?“



Twenty Ten barrierefrei?

Nein ...

Und warum ist das so?



Es geht bei WordPresss nicht um 0 (nicht barrierefrei) oder 1 (barrierefrei).

Sondern um einen graduellen Prozess ...



In vielen Bereichen ist WordPress bzw. Twenty Ten gut vorbereitet für die Barrierefreiheit, in anderen schlecht.

Manchmal geht es nur um zusätzliche Optimierung, manchmal um Weiter- und Neuentwicklung.



Barrierefreiheit in WordPress ist ein komplexer Prozess.

Er betrifft das Theme (Templates), die Pflege und Ausgabe der Inhalte (Editor) und

die Zusatzfunktionen (Widgets, Plugins).



Wir sehen uns folgende Bereiche an:

• das Theme • die Pflege und Ausgabe der Inhalte (Editor TinyMCE)


Twenty Ten

Welche Barrieren treten auf ?


Twenty Ten Welche Barrieren treten auf ? (*)


Twenty Ten Welche Barrieren treten auf ? (*)

(*) der Fokus liegt auf den Hauptproblemstellen

Theme

• Tastaturbedienung

• Farben/Kontraste

Editor (TinyMCE)

• Medien Video/Audio (Konzept: oembed)

• Sprachauszeichnung

• Datentabellen


Twenty Ten Wie kann man Barrieren beheben?

Accessible 1.0

Barrierefreies Child Theme für Twenty Ten

MCE AccessibleLanguage Change

Plugin, um im Editor Sprachwechsel einzupflegen.


Accessible 1.0

Ein Twenty Ten Child Theme


Was ist ein Child Theme?

Ein WordPress Child Theme ist ein Theme, das alle Funktionen des Parent Theme (z. B. Twenty Ten) erbt, sie modifizieren und neue Funktionen hinzufügen kann.


Was sind die Vorteile eines Child Themes?

• Updatefähigkeit (Twenty Ten bleibt unangetastet) • Man kann gezielt Änderungen machen • Man kann ohne Änderungen in den Templates arbeiten (functions.php)


Was sind die Nachteile eines Child Themes?

• Ändert man viel, ist ein richtiges Theme sinnvoller • Bei vielen Änderungen – auch in den Templates – sinkt die Perfomanz • Teilweise technisch komplex, wenn man nur mit functions.php arbeitet


Accessible 1.0 Das Child Theme installiert man in WordPress wie jedes andere Theme im Bereich „Themes“.


Accessible 1.0

05.11.2010 32 Screenshot: Accessible 1.0 Themes-Bereich

Accessible 1.0 – styles.css

05.11.2010 33 Screenshot: Accessible 1.0 styles.css

Was leistet Accessible 1.0?

• Farben und Kontraste validieren nach WCAG 2.0 (AAA)

• Optimierung der Tastaturbedienung • Sichtbarer Fokus (a:focus) • Sprunglink zum Inhalt auf Fokussierung • Zusätzliche Sprunglinks für die Seitenbereiche • Sprunglink nach oben

• Optimierung der Mouseover-Zustände

• Optimierung der strukturellen Navigation – Seitenbereiche mit einer Überschrift versehen


Was leistet Accessible 1.0?

• Umbenennung des Navigationspunktes „Home“ in „Startseite“

• Verschlankung des WordPress Editors TinyMCE

• Für Internationalisierung vorbereitet


Accessible 1.0 Wer Twenty Ten nutzt, kann

einfach das Child Theme

aktivieren und erhält zusätzlich

zu Twenty Ten alle Vorteile des

barrierefreien Child Themes.

Wurde das Parent Theme von

Twenty Ten abgeleitet und die

wesentlichen CSS Klassen und

Ids nicht geändert, kann das

Child Theme ebenso genutzt

werden.

05.11.2010 36 Screenshot: Accessible 1.0 Ordner, Dateien

Accessible 1.0- Future

• Layout- und Textzoom

integrieren

• einen Breadcrumb integrieren

• WAI-ARIA Übersichtspunkte

korrigieren (landmark roles)

• weitere Plugins fertigstellen

• ...

05.11.2010 37 Screenshot: Accessible 1.0 Ordner, Dateien

Twenty Ten und Accessibility 1.0

Im Vergleich


Twenty Ten – Accessible 1.0

Vergleich Videobeispiel

• Tastaturbedienung • Ist der Fokus sichtbar? • Gibt es Sprunglinks?

• Farben und Kontraste • Sind die Menüpunkte

erkennbar? • Sind die Farben und

Kontraste gut erkennbar?

• Ist die aktuelle Position im auf der Seite klar?

• Verschlankung des Editors (vorher/nachher)

05.11.2010 39 Screenshot: Accessible 1.0 Sprunglink

05.11.2010 40 Video: Accessible 1.0 in Aktion

Accessibility 1.0 erste Reaktionen

jebswebs @sprungmarkers So far, so good. This is the first time that WebAIM WAVE shows no accessibility errors for my WP site. Thanks.

Webaxe @jebswebs Awesome! Can't wait to try it. /cc @sprungmarkers

dennisl Like @jebswebs, I just installed the new Accessible #WP child theme by @sprungmarkers on my personal #WordPress blog

(Quelle: Twitter)


Editor (TinyMCE) Fast alle Inhalte werden

über den Editor in WordPress eingearbeitet.

Konzept: WYSIWYG


Editor (TinyMCE) Problemstellen

• WordPress aktiviert nur einen bestimmten Default.

• Viele Möglichkeiten fehlen wie: • Abkürzungen, Akronyme, Zitat

• Datentabellen

• Sprachauszeichnung

• Ziel der meisten Optionen: • Möglichst viele (alte) Layoutoptionen zu unterstützen

• Fast nur mit Hilfe Inline-Styles realisiert


Editor (TinyMCE) Das Ziel muss also sein:

Den Editor zu verschlanken und zu entschlacken ...

Das übernimmt das Child Theme Accessible 1.0


Editor (TinyMCE) Das Ziel muss weiter sein:

Den Editor um fehlende Semantik und Barrierefreiheit zu ergänzen ...

Das ist eine umfassende Aufgabe ...


MCE Accessible Language Change

WordPress TinyMCE Plugin für die Sprachauszeichnung



• Zwei Optionen • Sprachwechsel mit Hilfe

eines span-Elements (Button LANG)

• Sprachwechsel für bestehende Elemente wie • Blockelemente wie Absätze

oder Überschriften – Attribut lang bzw. xml:lang (Button LANG ATTR)

• Verlinkungen mit einer Zielsprache versehen – Attribut hreflang (Button LANG ATTR)

05.11.2010 47 Screenshot: MCE Language Change Buttons


• Sprachwechsel in span-Elementen wird im Editor erkennbar hervorgehoben.

• Ab WordPress 3.0

• Liegt derzeit in deutsch und englisch vor

• Future • Rückwärtskompatibilität

• Evt. nur einen Button

• Allgemein für TinyMCE zur Verfügung stellen

05.11.2010 48 Screenshot: MCE Language Change Hervorhebung Editor


In Aktion -Videobeispiel

• Was ist zu sehen: • Sprachwechsel mit Hilfe des

span-Elements

• Sprachwechsel eines bestehenden Elements – als Beispiel ein Absatz

• Einem Link eine Zielsprache hinzufügen

05.11.2010 49 Screenshot: MCE Language Change Popup

05.11.2010 50 Video: MCE Language Change in Aktion

Screenshot: MCE Accessible Language Change WordPress Plugin Directory 05.11.2010

Danke fürs Zuhören Es gibt noch ne‘ Menge zu tun

in Sachen WordPress und Barrierefreiheit ...

Ich bleib‘ dran ...


Sylvia Egger sprungmarker.de

Senior Frontend-Entwicklerin in Köln (brainbits.net)

Die Präsentation auf Slideshare: http://www.slideshare.net/sprungmarker

Twitter: @sprungmarkers


Sylvia Egger sprungmarker.de

Accessible 1.0 – Child Theme für WordPress


finden Sie auf sprungmarker.de


Technology

Wie? Mein WordPress-Theme geht auch barrierefrei!