Twenty Eleven accessible? Accessible child theme in progress
-
Upload
sylvia-egger -
Category
Technology
-
view
3.601 -
download
2
description
Transcript of Twenty Eleven accessible? Accessible child theme in progress
![Page 1: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/1.jpg)
Twenty Eleven accessible? Accessible child theme in progress
WordCamp 2011- Sylvia Egger – accessible.sprungmarker.de
![Page 2: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/2.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 2
![Page 3: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/3.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 3
![Page 4: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/4.jpg)
WordPress 3.2 (July 2011)
New default theme
Twenty Eleven
![Page 5: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/5.jpg)
Twenty Eleven If only be used
each fiftieth download ...
![Page 6: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/6.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 6
![Page 7: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/7.jpg)
Twenty Eleven
Who is using the default theme?
![Page 8: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/8.jpg)
Beginners & Timeboxer
Using WordPress default theme quite out of the box.
![Page 9: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/9.jpg)
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)
![Page 10: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/10.jpg)
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)
![Page 11: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/11.jpg)
Twenty Eleven
Fully accessible?
![Page 12: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/12.jpg)
Twenty Eleven fully accessible?
No!
Why?
![Page 13: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/13.jpg)
Twenty Eleven fully accessible? Accessibility of WordPress theme is a complex process depending on: •Theme – Templates •Editor (TinyMCE) •Widgets, Plugins
![Page 14: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/14.jpg)
Twenty Eleven accessibility issues?
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 14
![Page 15: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/15.jpg)
Accessible Twenty Eleven
A Twenty Eleven child theme
![Page 16: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/16.jpg)
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
![Page 17: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/17.jpg)
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
![Page 18: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/18.jpg)
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
![Page 19: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/19.jpg)
Accessible Twenty Eleven – styles.css
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 19
![Page 20: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/20.jpg)
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
![Page 21: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/21.jpg)
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
![Page 22: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/22.jpg)
Accessible Twenty Eleven - Preview
Color & Contrast
![Page 23: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/23.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 23
Color & Contrast – Twenty Eleven
![Page 24: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/24.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 24
Color & Contrast Accessible Twenty Eleven
![Page 25: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/25.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 25
Color & Contrast – Twenty Eleven
![Page 26: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/26.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 26
Color & Contrast Accessible Twenty Eleven
![Page 27: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/27.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 27
Colour Contrast Analyser Twenty Eleven
![Page 28: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/28.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 28
Colour Contrast Analyser Accessible Twenty Eleven
![Page 29: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/29.jpg)
Accessible Twenty Eleven - Preview
Enhanced keyboard use
![Page 30: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/30.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 30
Comparison keyboard use: Twenty Eleven – Accessible Twenty Eleven
![Page 31: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/31.jpg)
Accessible Twenty Eleven - Preview
Enhanced form handling
![Page 32: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/32.jpg)
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
![Page 33: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/33.jpg)
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
![Page 34: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/34.jpg)
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
![Page 35: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/35.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 35
Accessible Twenty Eleven comment form: JAWS Firefox 4 form validation HTML5
![Page 36: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/36.jpg)
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
![Page 37: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/37.jpg)
You want to use Accessible Twenty Eleven
now! Keep yourself updated on:
accessible.sprungmarker.de
Or follow me on Twitter: sprungmarkers
![Page 38: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/38.jpg)
In the meanwhile Accessible Twenty Ten
accessible.sprungmarker.de
Accessible TwentyTenFive accessible.sprungmarker.de
![Page 39: Twenty Eleven accessible? Accessible child theme in progress](https://reader033.fdocuments.net/reader033/viewer/2022052822/554baf4cb4c905b8618b5889/html5/thumbnails/39.jpg)
24.09.2011 Sylvia Egger - accessible.sprungmarker.de 39
MCE Accessible Language Change – WordPress plugin