Twenty Eleven accessible?Accessible child theme in progress WordCamp 2011- Sylvia Egger – accessible.sprungmarker.de
24.09.2011   2   Sylvia Egger - accessible.sprungmarker.de
24.09.2011   3   Sylvia Egger - accessible.sprungmarker.de
WordPress 3.2      (July 2011)  New default themeTwenty Eleven
Twenty Eleven     If only be usedeach fiftieth download ...
24.09.2011   6   Sylvia Egger - accessible.sprungmarker.de
Twenty ElevenWho is using the default theme?
Beginners & Timeboxer    Using WordPress default theme          quite out of the box.
Individuals & Specialists„Hello Support,I am using the Twenty Eleven theme for my blog. I amwondering whether I can remove...
Theme developers„As you can see in source theme makes some use of Settings API,but doesnt include calls like do_settings_f...
Twenty ElevenFully accessible?
Twenty Elevenfully accessible?       No!      Why?
Twenty Elevenfully accessible?Accessibility of WordPress theme is acomplex process depending on:•Theme – Templates•Editor ...
Twenty Eleven             accessibility issues?24.09.2011             14      Sylvia Egger - accessible.sprungmarker.de
Accessible Twenty Eleven     A Twenty Eleven       child theme
What is a child theme?„A WordPress child theme is a theme that inheritsthe functionality of another theme, called the pare...
Advantages of a child             theme?• Twenty Eleven can be updated without harm• It‘s up to you which parts you modify...
Disadvantages of a child             theme?If you are modifying a lot in the child theme:  • consider using a main theme, ...
Accessible Twenty Eleven –                     styles.css24.09.2011               19     Sylvia Egger - accessible.sprungm...
Accessible Twenty Eleven -                         Features         • Enhanced form handling with HTML5 and CSS3          ...
Accessible Twenty Eleven -                        Features         • Optimized mouseover states         • Enhanced semanti...
Accessible Twenty Eleven       - Preview     Color & Contrast
Color & Contrast – Twenty Eleven24.09.2011                  23      Sylvia Egger - accessible.sprungmarker.de
Color & Contrast             Accessible Twenty Eleven24.09.2011             24      Sylvia Egger - accessible.sprungmarker...
Color & Contrast – Twenty Eleven24.09.2011                  25      Sylvia Egger - accessible.sprungmarker.de
Color & Contrast             Accessible Twenty Eleven24.09.2011             26      Sylvia Egger - accessible.sprungmarker...
Colour Contrast Analyser                 Twenty Eleven24.09.2011             27      Sylvia Egger - accessible.sprungmarke...
Colour Contrast Analyser             Accessible Twenty Eleven24.09.2011             28      Sylvia Egger - accessible.spru...
Accessible Twenty Eleven       - Preview  Enhanced keyboard use
Comparison keyboard use: Twenty Eleven – Accessible Twenty Eleven24.09.2011                                  30           ...
Accessible Twenty Eleven       - Preview  Enhanced form handling
Accessible Twenty Eleven -     Enhanced form handling•   HTML5 input types (url, email, search)•   error handling: HTML5 r...
Enhanced comment form: Accessible Twenty Eleven             Fully supported by: FF 4, Chrome, Opera, IE10 – partial Safari...
Enhanced search form: Accessible Twenty Eleven             Fully supported by: Safari 5, FF 4, Chrome, Opera 11, IE10, Saf...
Accessible Twenty Eleven comment form: JAWS Firefox 4 form validation HTML524.09.2011                                  35 ...
You want to useAccessible Twenty Eleven          now!                Is not ready yet – but soon.   As soon as it is read...
You want to useAccessible Twenty Eleven          now!       Keep yourself updated on:     accessible.sprungmarker.de      ...
In the meanwhile   Accessible Twenty Tenaccessible.sprungmarker.de  Accessible TwentyTenFiveaccessible.sprungmarker.de
MCE Accessible Language Change – WordPress plugin24.09.2011                          39              Sylvia Egger - access...
Upcoming SlideShare
Loading in...5
×

Twenty Eleven accessible? Accessible child theme in progress

3,690

Published on

presentation WordCamp 2011, 24.09. - tagged PDF, but not full accessible (full version will come)

Published in: Technology, Travel
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,690
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Twenty Eleven accessible? Accessible child theme in progress

  1. 1. Twenty Eleven accessible?Accessible child theme in progress WordCamp 2011- Sylvia Egger – accessible.sprungmarker.de
  2. 2. 24.09.2011 2 Sylvia Egger - accessible.sprungmarker.de
  3. 3. 24.09.2011 3 Sylvia Egger - accessible.sprungmarker.de
  4. 4. WordPress 3.2 (July 2011) New default themeTwenty Eleven
  5. 5. Twenty Eleven If only be usedeach fiftieth download ...
  6. 6. 24.09.2011 6 Sylvia Egger - accessible.sprungmarker.de
  7. 7. Twenty ElevenWho is using the default theme?
  8. 8. Beginners & Timeboxer Using WordPress default theme quite out of the box.
  9. 9. Individuals & Specialists„Hello Support,I am using the Twenty Eleven theme for my blog. I amwondering whether I can remove the Search box from theupper right hand corner on all pages.“(WordPress Forums)
  10. 10. Theme developers„As you can see in source theme makes some use of Settings API,but doesnt include calls like do_settings_fileds() that would allowyou to use add settings.I would probably try to unhooktwentyeleven_theme_options_add_page() call and fork that andtheme_options_render_page() to extend it with additional options.“(WordPress Answers)
  11. 11. Twenty ElevenFully accessible?
  12. 12. Twenty Elevenfully accessible? No! Why?
  13. 13. Twenty Elevenfully accessible?Accessibility of WordPress theme is acomplex process depending on:•Theme – Templates•Editor (TinyMCE)•Widgets, Plugins
  14. 14. Twenty Eleven accessibility issues?24.09.2011 14 Sylvia Egger - accessible.sprungmarker.de
  15. 15. Accessible Twenty Eleven A Twenty Eleven child theme
  16. 16. What is a child theme?„A WordPress child theme is a theme that inheritsthe functionality of another theme, called the parenttheme, and allows you to modify, or add to, thefunctionality of that parent theme.“WordPress Codex
  17. 17. Advantages of a child theme?• Twenty Eleven can be updated without harm• It‘s up to you which parts you modify• Use functions.php for modifications• In most cases there is no need to modify templates
  18. 18. Disadvantages of a child theme?If you are modifying a lot in the child theme: • consider using a main theme, not a child theme • keep performance in mind • functions.php could get rather complex
  19. 19. Accessible Twenty Eleven – styles.css24.09.2011 19 Sylvia Egger - accessible.sprungmarker.de
  20. 20. Accessible Twenty Eleven - Features • Enhanced form handling with HTML5 and CSS3 • Required states, form validation • HTML5 input types as search, url and email • Accessible colors and contrast according to WCAG AAA • Enhanced keyboard use • Dropdown navigation usable with keyboard • Skip link first link on page, added skip links back to top, after content und after footer area. • Optimized link hover, focus and active states24.09.2011 20 Sylvia Egger - accessible.sprungmarker.de
  21. 21. Accessible Twenty Eleven - Features • Optimized mouseover states • Enhanced semantics • Additional hidden headlines • Repairing headline structure • Language change (MCE language change plugin) • Implementing breadcrumb for better getting position on website24.09.2011 21 Sylvia Egger - accessible.sprungmarker.de
  22. 22. Accessible Twenty Eleven - Preview Color & Contrast
  23. 23. Color & Contrast – Twenty Eleven24.09.2011 23 Sylvia Egger - accessible.sprungmarker.de
  24. 24. Color & Contrast Accessible Twenty Eleven24.09.2011 24 Sylvia Egger - accessible.sprungmarker.de
  25. 25. Color & Contrast – Twenty Eleven24.09.2011 25 Sylvia Egger - accessible.sprungmarker.de
  26. 26. Color & Contrast Accessible Twenty Eleven24.09.2011 26 Sylvia Egger - accessible.sprungmarker.de
  27. 27. Colour Contrast Analyser Twenty Eleven24.09.2011 27 Sylvia Egger - accessible.sprungmarker.de
  28. 28. Colour Contrast Analyser Accessible Twenty Eleven24.09.2011 28 Sylvia Egger - accessible.sprungmarker.de
  29. 29. Accessible Twenty Eleven - Preview Enhanced keyboard use
  30. 30. Comparison keyboard use: Twenty Eleven – Accessible Twenty Eleven24.09.2011 30 Sylvia Egger - accessible.sprungmarker.de
  31. 31. Accessible Twenty Eleven - Preview Enhanced form handling
  32. 32. Accessible Twenty Eleven - Enhanced form handling• HTML5 input types (url, email, search)• error handling: HTML5 required• HTML5 placeholder where appropriate• search form: enhanced with attribute results and autosave• Enhanced hover and focus states with CSS3 animations
  33. 33. Enhanced comment form: Accessible Twenty Eleven Fully supported by: FF 4, Chrome, Opera, IE10 – partial Safari 5, iOS 424.09.2011 33 Sylvia Egger - accessible.sprungmarker.de
  34. 34. Enhanced search form: Accessible Twenty Eleven Fully supported by: Safari 5, FF 4, Chrome, Opera 11, IE10, Safari Mobile iOS 424.09.2011 34 Sylvia Egger - accessible.sprungmarker.de
  35. 35. Accessible Twenty Eleven comment form: JAWS Firefox 4 form validation HTML524.09.2011 35 Sylvia Egger - accessible.sprungmarker.de
  36. 36. You want to useAccessible Twenty Eleven now! Is not ready yet – but soon.  As soon as it is ready, you can download the child theme,upload it to your themes folder and install it on your WordPress blog. Installing a child theme in WordPress is easy. Go to: Administration Panels > Design > Themes
  37. 37. You want to useAccessible Twenty Eleven now! Keep yourself updated on: accessible.sprungmarker.de Or follow me on Twitter: sprungmarkers
  38. 38. In the meanwhile Accessible Twenty Tenaccessible.sprungmarker.de Accessible TwentyTenFiveaccessible.sprungmarker.de
  39. 39. MCE Accessible Language Change – WordPress plugin24.09.2011 39 Sylvia Egger - accessible.sprungmarker.de
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×