Twenty Eleven accessible? Accessible child theme in progress

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

Transcript

1. Twenty Eleven accessible? Accessible child theme in progress WordCamp 2011- Sylvia Egger – accessible.sprungmarker.de
2. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 2
3. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 3
4. WordPress 3.2 (July 2011) New default theme Twenty Eleven
5. Twenty Eleven If only be used each fiftieth download ...
6. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 6
7. Twenty Eleven Who is using the default theme?
8. Beginners & Timeboxer Using WordPress default theme quite out of the box.
9. Individuals & Specialists „Hello Support, I am using the Twenty Eleven theme for my blog. I am wondering whether I can remove the Search box from the upper right hand corner on all pages.“ (WordPress Forums)
10. Theme developers „As you can see in source theme makes some use of Settings API, but doesn't include calls like do_settings_fileds() that would allow you to use add settings. I would probably try to unhook twentyeleven_theme_options_add_page() call and fork that and theme_options_render_page() to extend it with additional options.“ (WordPress Answers)
11. Twenty Eleven Fully accessible?
12. Twenty Eleven fully accessible? No! Why?
13. Twenty Eleven fully accessible? Accessibility of WordPress theme is a complex process depending on: •Theme – Templates •Editor (TinyMCE) •Widgets, Plugins
14. Twenty Eleven accessibility issues? 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 14
15. Accessible Twenty Eleven A Twenty Eleven child theme
16. What is a child theme? „A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.“ WordPress Codex
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. 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. Accessible Twenty Eleven – styles.css 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 19
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 states 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 20
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 website 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 21
22. Accessible Twenty Eleven - Preview Color & Contrast
23. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 23 Color & Contrast – Twenty Eleven
24. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 24 Color & Contrast Accessible Twenty Eleven
25. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 25 Color & Contrast – Twenty Eleven
26. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 26 Color & Contrast Accessible Twenty Eleven
27. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 27 Colour Contrast Analyser Twenty Eleven
28. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 28 Colour Contrast Analyser Accessible Twenty Eleven
29. Accessible Twenty Eleven - Preview Enhanced keyboard use
30. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 30 Comparison keyboard use: Twenty Eleven – Accessible Twenty Eleven
31. Accessible Twenty Eleven - Preview Enhanced form handling
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. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 33 Enhanced comment form: Accessible Twenty Eleven Fully supported by: FF 4, Chrome, Opera, IE10 – partial Safari 5, iOS 4
34. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 34 Enhanced search form: Accessible Twenty Eleven Fully supported by: Safari 5, FF 4, Chrome, Opera 11, IE10, Safari Mobile iOS 4
35. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 35 Accessible Twenty Eleven comment form: JAWS Firefox 4 form validation HTML5
36. You want to use Accessible 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. You want to use Accessible Twenty Eleven now! Keep yourself updated on: accessible.sprungmarker.de Or follow me on Twitter: sprungmarkers
38. In the meanwhile Accessible Twenty Ten accessible.sprungmarker.de Accessible TwentyTenFive accessible.sprungmarker.de
39. 24.09.2011 Sylvia Egger - accessible.sprungmarker.de 39 MCE Accessible Language Change – WordPress plugin