SlideShare ist ein Scribd-Unternehmen logo
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 5 Sylvia Egger - brainbits.net - sprungmarker.de
05.11.2010 6 Screenshot: WordPress Counter modifiziert
Twenty Ten

Sicherlich ist die 

Nutzung weitaus höher ... 

05.11.2010 7 Sylvia Egger - brainbits.net - sprungmarker.de
05.11.2010 8 Screenshot: Twenty Ten Beispiele
Twenty Ten

Und so sieht 

das Original aus ... 

05.11.2010 9 Sylvia Egger - brainbits.net - sprungmarker.de
05.11.2010 10 Screenshot: Twenty Ten (http://2010dev.wordpress.com/)
Twenty Ten 

Wer nutzt das Default-Theme? 

05.11.2010 11 Sylvia Egger - brainbits.net - sprungmarker.de
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)
05.11.2010 12 Sylvia Egger - brainbits.net - sprungmarker.de
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)
05.11.2010 13 Sylvia Egger - brainbits.net - sprungmarker.de
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. “
(Forum WordPress Deutschland)
05.11.2010 14 Sylvia Egger - brainbits.net - sprungmarker.de
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?“
(Forum WordPress Deutschland)
05.11.2010 15 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

Barrierefrei? 

05.11.2010 16 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten
„Wordpress ist ein an und für sich so demokratisches
Medium und es gibt immer noch keine barrierearmen
Templates !?“
(Forum WordPress Deutschland)
05.11.2010 17 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

barrierefrei? 

Nein ... 

Und warum ist das so? 

05.11.2010 18 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

barrierefrei? 

Es geht bei WordPresss nicht 

um 0 (nicht barrierefrei) oder 1 (barrierefrei). 

Sondern um einen graduellen Prozess ... 

05.11.2010 19 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

barrierefrei? 

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. 

05.11.2010 20 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

barrierefrei? 

Barrierefreiheit in WordPress ist 

ein komplexer Prozess. 

Er betrifft das Theme (Templates), 

die Pflege und Ausgabe der Inhalte (Editor) und 

die Zusatzfunktionen (Widgets, Plugins). 

05.11.2010 21 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

barrierefrei? 

Wir sehen uns folgende Bereiche an:
• das Theme
• die Pflege und Ausgabe der Inhalte
(Editor TinyMCE)
05.11.2010 22 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

Welche Barrieren treten auf? 

05.11.2010 23 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten 

Welche Barrieren treten auf? (*) 

05.11.2010 24 Sylvia Egger - brainbits.net - sprungmarker.de
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
05.11.2010 	 25 Sylvia Egger - brainbits.net - sprungmarker.de
Twenty Ten
Wie kann man Barrieren beheben?
Accessible 1.0
Barrierefreies Child Theme für
Twenty Ten
MCE Accessible
Language Change
Plugin, um im Editor
Sprachwechsel einzupflegen.
05.11.2010 26 Sylvia Egger - brainbits.net - sprungmarker.de
Accessible 1.0 

Ein Twenty Ten 

Child Theme 

05.11.2010 27 Sylvia Egger - brainbits.net - sprungmarker.de
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.
05.11.2010 28 Sylvia Egger - brainbits.net - sprungmarker.de
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)
05.11.2010 29 Sylvia Egger - brainbits.net - sprungmarker.de
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 

05.11.2010 30 Sylvia Egger - brainbits.net - sprungmarker.de
Accessible 1.0 

Das Child Theme installiert man in WordPress 

wie jedes andere Theme im Bereich „Themes“. 

05.11.2010 31 Sylvia Egger - brainbits.net - sprungmarker.de
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
05.11.2010 	 34 Sylvia Egger - brainbits.net - sprungmarker.de
Was leistet Accessible 1.0? 

•	 Umbenennung des Navigationspunktes „Home“ in
„Startseite“
•	 Verschlankung des WordPress Editors TinyMCE
•	 Für Internationalisierung vorbereitet
05.11.2010 	 35 Sylvia Egger - brainbits.net - sprungmarker.de
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 

05.11.2010 38 Sylvia Egger - brainbits.net - sprungmarker.de
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)
05.11.2010 41 Sylvia Egger - brainbits.net - sprungmarker.de
Editor (TinyMCE)

Fast alle Inhalte werden 

über den Editor in WordPress eingearbeitet. 

Konzept: WYSIWYG 

05.11.2010 42 Sylvia Egger - brainbits.net - sprungmarker.de
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
05.11.2010 43 Sylvia Egger - brainbits.net - sprungmarker.de
Editor (TinyMCE)

Das Ziel muss also sein: 

Den Editor zu verschlanken

und zu entschlacken ... 

Das übernimmt das Child Theme Accessible 1.0 

05.11.2010 44 Sylvia Egger - brainbits.net - sprungmarker.de
Editor (TinyMCE)

Das Ziel muss weiter sein: 

Den Editor um fehlende Semantik 

und Barrierefreiheit zu ergänzen ... 

Das ist eine umfassende Aufgabe ... 

05.11.2010 45 Sylvia Egger - brainbits.net - sprungmarker.de
MCE Accessible

Language Change

WordPress TinyMCE Plugin 

für die Sprachauszeichnung 

05.11.2010 46 Sylvia Egger - brainbits.net - sprungmarker.de
MCE Accessible

Language Change 

• 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
MCE Accessible

Language Change 

•	 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
MCE Accessible 

Language Change 

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 Directory05.11.2010
Danke fürs Zuhören 
Es gibt noch ne‘ Menge zu tun 

in Sachen WordPress und Barrierefreiheit ... 

Ich bleib‘ dran ... 

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

sprungmarker.de

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

Die Präsentation auf Slideshare: 

http://www.slideshare.net/sprungmarker

Twitter: @sprungmarkers

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

sprungmarker.de

Accessible 1.0 – Child Theme für WordPress

MCE Accessible Language Change

finden Sie auf sprungmarker.de 

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

Weitere ähnliche Inhalte

Ähnlich wie Wie? Mein WordPress-Theme geht auch barrierefrei!

WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
David Decker
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
Frank Schmittlein
 
Genesis Framework - WordCamp Deutschland 2011 Köln
Genesis Framework - WordCamp Deutschland 2011 KölnGenesis Framework - WordCamp Deutschland 2011 Köln
Genesis Framework - WordCamp Deutschland 2011 Köln
David Decker
 
15 Jahre WordPRess
15 Jahre WordPRess15 Jahre WordPRess
15 Jahre WordPRess
Lucas Radke
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
Blogdienst der FAU
Blogdienst der FAUBlogdienst der FAU
Blogdienst der FAU
Wolfgang Wiese
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Windows Azure Platform Overview
Windows Azure Platform   OverviewWindows Azure Platform   Overview
Windows Azure Platform Overview
Oliver Michalski
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
Christian Hauschke
 
Keynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
Keynote der 1. webEdition Benutzer Konferenz 2011 in FrankfurtKeynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
Keynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
webEdition
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
Chris Palatinus
 
Cinema in the Cloud
Cinema in the CloudCinema in the Cloud
Cinema in the Cloud
Oliver Michalski
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
MediaWiki
MediaWikiMediaWiki
MediaWiki
Martin Szugat
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
HansruediDbeli1
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
Philipp Naderer
 

Ähnlich wie Wie? Mein WordPress-Theme geht auch barrierefrei! (20)

WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
 
Genesis Framework - WordCamp Deutschland 2011 Köln
Genesis Framework - WordCamp Deutschland 2011 KölnGenesis Framework - WordCamp Deutschland 2011 Köln
Genesis Framework - WordCamp Deutschland 2011 Köln
 
15 Jahre WordPRess
15 Jahre WordPRess15 Jahre WordPRess
15 Jahre WordPRess
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Underscores DE
Underscores DEUnderscores DE
Underscores DE
 
Blogdienst der FAU
Blogdienst der FAUBlogdienst der FAU
Blogdienst der FAU
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Windows Azure Platform Overview
Windows Azure Platform   OverviewWindows Azure Platform   Overview
Windows Azure Platform Overview
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 
Keynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
Keynote der 1. webEdition Benutzer Konferenz 2011 in FrankfurtKeynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
Keynote der 1. webEdition Benutzer Konferenz 2011 in Frankfurt
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
Cinema in the Cloud
Cinema in the CloudCinema in the Cloud
Cinema in the Cloud
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
MediaWiki
MediaWikiMediaWiki
MediaWiki
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
 

Wie? Mein WordPress-Theme geht auch barrierefrei!

  • 1. Wie? Mein WordPress-Theme geht auch barrierefrei! A-Tag 2010 - Sylvia Egger – sprungmarker.de
  • 2. Video: WordPress Counter (http://wordpress.org/download/counter/)05.11.2010
  • 3. 05.11.2010 3 Screenshot: WordPress Counter modifiziert
  • 4. WordPress 3.0 (Juni 2010) Neues Default-Theme Twenty Ten 05.11.2010 4 Sylvia Egger - brainbits.net - sprungmarker.de
  • 5. Twenty Ten Wenn nur jeder 50te nach dem Download das Default-Theme nutzt ... 05.11.2010 5 Sylvia Egger - brainbits.net - sprungmarker.de
  • 6. 05.11.2010 6 Screenshot: WordPress Counter modifiziert
  • 7. Twenty Ten Sicherlich ist die Nutzung weitaus höher ... 05.11.2010 7 Sylvia Egger - brainbits.net - sprungmarker.de
  • 8. 05.11.2010 8 Screenshot: Twenty Ten Beispiele
  • 9. Twenty Ten Und so sieht das Original aus ... 05.11.2010 9 Sylvia Egger - brainbits.net - sprungmarker.de
  • 10. 05.11.2010 10 Screenshot: Twenty Ten (http://2010dev.wordpress.com/)
  • 11. Twenty Ten Wer nutzt das Default-Theme? 05.11.2010 11 Sylvia Egger - brainbits.net - sprungmarker.de
  • 12. 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) 05.11.2010 12 Sylvia Egger - brainbits.net - sprungmarker.de
  • 13. 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) 05.11.2010 13 Sylvia Egger - brainbits.net - sprungmarker.de
  • 14. 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. “ (Forum WordPress Deutschland) 05.11.2010 14 Sylvia Egger - brainbits.net - sprungmarker.de
  • 15. 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?“ (Forum WordPress Deutschland) 05.11.2010 15 Sylvia Egger - brainbits.net - sprungmarker.de
  • 16. Twenty Ten Barrierefrei? 05.11.2010 16 Sylvia Egger - brainbits.net - sprungmarker.de
  • 17. Twenty Ten „Wordpress ist ein an und für sich so demokratisches Medium und es gibt immer noch keine barrierearmen Templates !?“ (Forum WordPress Deutschland) 05.11.2010 17 Sylvia Egger - brainbits.net - sprungmarker.de
  • 18. Twenty Ten barrierefrei? Nein ... Und warum ist das so? 05.11.2010 18 Sylvia Egger - brainbits.net - sprungmarker.de
  • 19. Twenty Ten barrierefrei? Es geht bei WordPresss nicht um 0 (nicht barrierefrei) oder 1 (barrierefrei). Sondern um einen graduellen Prozess ... 05.11.2010 19 Sylvia Egger - brainbits.net - sprungmarker.de
  • 20. Twenty Ten barrierefrei? 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. 05.11.2010 20 Sylvia Egger - brainbits.net - sprungmarker.de
  • 21. Twenty Ten barrierefrei? Barrierefreiheit in WordPress ist ein komplexer Prozess. Er betrifft das Theme (Templates), die Pflege und Ausgabe der Inhalte (Editor) und die Zusatzfunktionen (Widgets, Plugins). 05.11.2010 21 Sylvia Egger - brainbits.net - sprungmarker.de
  • 22. Twenty Ten barrierefrei? Wir sehen uns folgende Bereiche an: • das Theme • die Pflege und Ausgabe der Inhalte (Editor TinyMCE) 05.11.2010 22 Sylvia Egger - brainbits.net - sprungmarker.de
  • 23. Twenty Ten Welche Barrieren treten auf? 05.11.2010 23 Sylvia Egger - brainbits.net - sprungmarker.de
  • 24. Twenty Ten Welche Barrieren treten auf? (*) 05.11.2010 24 Sylvia Egger - brainbits.net - sprungmarker.de
  • 25. 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 05.11.2010 25 Sylvia Egger - brainbits.net - sprungmarker.de
  • 26. Twenty Ten Wie kann man Barrieren beheben? Accessible 1.0 Barrierefreies Child Theme für Twenty Ten MCE Accessible Language Change Plugin, um im Editor Sprachwechsel einzupflegen. 05.11.2010 26 Sylvia Egger - brainbits.net - sprungmarker.de
  • 27. Accessible 1.0 Ein Twenty Ten Child Theme 05.11.2010 27 Sylvia Egger - brainbits.net - sprungmarker.de
  • 28. 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. 05.11.2010 28 Sylvia Egger - brainbits.net - sprungmarker.de
  • 29. 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) 05.11.2010 29 Sylvia Egger - brainbits.net - sprungmarker.de
  • 30. 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 05.11.2010 30 Sylvia Egger - brainbits.net - sprungmarker.de
  • 31. Accessible 1.0 Das Child Theme installiert man in WordPress wie jedes andere Theme im Bereich „Themes“. 05.11.2010 31 Sylvia Egger - brainbits.net - sprungmarker.de
  • 32. Accessible 1.0 05.11.2010 32 Screenshot: Accessible 1.0 Themes-Bereich
  • 33. Accessible 1.0 – styles.css 05.11.2010 33 Screenshot: Accessible 1.0 styles.css
  • 34. 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 05.11.2010 34 Sylvia Egger - brainbits.net - sprungmarker.de
  • 35. Was leistet Accessible 1.0? • Umbenennung des Navigationspunktes „Home“ in „Startseite“ • Verschlankung des WordPress Editors TinyMCE • Für Internationalisierung vorbereitet 05.11.2010 35 Sylvia Egger - brainbits.net - sprungmarker.de
  • 36. 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
  • 37. 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
  • 38. Twenty Ten und Accessibility 1.0 Im Vergleich 05.11.2010 38 Sylvia Egger - brainbits.net - sprungmarker.de
  • 39. 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
  • 40. 05.11.2010 40 Video: Accessible 1.0 in Aktion
  • 41. 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) 05.11.2010 41 Sylvia Egger - brainbits.net - sprungmarker.de
  • 42. Editor (TinyMCE) Fast alle Inhalte werden über den Editor in WordPress eingearbeitet. Konzept: WYSIWYG 05.11.2010 42 Sylvia Egger - brainbits.net - sprungmarker.de
  • 43. 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 05.11.2010 43 Sylvia Egger - brainbits.net - sprungmarker.de
  • 44. Editor (TinyMCE) Das Ziel muss also sein: Den Editor zu verschlanken und zu entschlacken ... Das übernimmt das Child Theme Accessible 1.0 05.11.2010 44 Sylvia Egger - brainbits.net - sprungmarker.de
  • 45. Editor (TinyMCE) Das Ziel muss weiter sein: Den Editor um fehlende Semantik und Barrierefreiheit zu ergänzen ... Das ist eine umfassende Aufgabe ... 05.11.2010 45 Sylvia Egger - brainbits.net - sprungmarker.de
  • 46. MCE Accessible Language Change WordPress TinyMCE Plugin für die Sprachauszeichnung 05.11.2010 46 Sylvia Egger - brainbits.net - sprungmarker.de
  • 47. MCE Accessible Language Change • 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
  • 48. MCE Accessible Language Change • 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
  • 49. MCE Accessible Language Change 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
  • 50. 05.11.2010 50 Video: MCE Language Change in Aktion
  • 51. Screenshot: MCE Accessible Language Change WordPress Plugin Directory05.11.2010
  • 52. Danke fürs Zuhören  Es gibt noch ne‘ Menge zu tun in Sachen WordPress und Barrierefreiheit ... Ich bleib‘ dran ... 05.11.2010 52 Sylvia Egger - brainbits.net - sprungmarker.de
  • 53. Sylvia Egger sprungmarker.de Senior Frontend-Entwicklerin in Köln (brainbits.net) Die Präsentation auf Slideshare: http://www.slideshare.net/sprungmarker Twitter: @sprungmarkers 05.11.2010 53 Sylvia Egger - brainbits.net - sprungmarker.de
  • 54. Sylvia Egger sprungmarker.de Accessible 1.0 – Child Theme für WordPress MCE Accessible Language Change finden Sie auf sprungmarker.de 05.11.2010 54 Sylvia Egger - brainbits.net - sprungmarker.de