Twenty Eleven accessible? Accessible child theme in progress
•
3 j'aime•2,463 vues
presentation WordCamp 2011, 24.09. - tagged PDF, but not full accessible (full version will come)
Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Twenty Eleven accessible? Accessible child theme in progress
- 1. Twenty Eleven accessible? Accessible child theme in progress WordCamp 2011- Sylvia Egger – accessible.sprungmarker.de
- 2. 24.09.2011 2 Sylvia Egger - accessible.sprungmarker.de
- 3. 24.09.2011 3 Sylvia Egger - accessible.sprungmarker.de
- 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 6 Sylvia Egger - accessible.sprungmarker.de
- 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)
- 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 14 Sylvia Egger - accessible.sprungmarker.de
- 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 19 Sylvia Egger - accessible.sprungmarker.de
- 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 20 Sylvia Egger - accessible.sprungmarker.de
- 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 21 Sylvia Egger - accessible.sprungmarker.de
- 22. Accessible Twenty Eleven - Preview Color & Contrast
- 23. Color & Contrast – Twenty Eleven 24.09.2011 23 Sylvia Egger - accessible.sprungmarker.de
- 24. Color & Contrast Accessible Twenty Eleven 24.09.2011 24 Sylvia Egger - accessible.sprungmarker.de
- 25. Color & Contrast – Twenty Eleven 24.09.2011 25 Sylvia Egger - accessible.sprungmarker.de
- 26. Color & Contrast Accessible Twenty Eleven 24.09.2011 26 Sylvia Egger - accessible.sprungmarker.de
- 27. Colour Contrast Analyser Twenty Eleven 24.09.2011 27 Sylvia Egger - accessible.sprungmarker.de
- 28. Colour Contrast Analyser Accessible Twenty Eleven 24.09.2011 28 Sylvia Egger - accessible.sprungmarker.de
- 29. Accessible Twenty Eleven - Preview Enhanced keyboard use
- 30. Comparison keyboard use: Twenty Eleven – Accessible Twenty Eleven 24.09.2011 30 Sylvia Egger - accessible.sprungmarker.de
- 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. Enhanced comment form: Accessible Twenty Eleven Fully supported by: FF 4, Chrome, Opera, IE10 – partial Safari 5, iOS 4 24.09.2011 33 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 24.09.2011 34 Sylvia Egger - accessible.sprungmarker.de
- 35. Accessible Twenty Eleven comment form: JAWS Firefox 4 form validation HTML5 24.09.2011 35 Sylvia Egger - accessible.sprungmarker.de
- 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. MCE Accessible Language Change – WordPress plugin 24.09.2011 39 Sylvia Egger - accessible.sprungmarker.de