Joe DolsonWordCamp Minneapolis 2013Accessibility & WordPressDeveloping for the whole world.
Joe DolsonWordCamp Minneapolis 2013Who am I?- A WordPress developer (since 2006)- An advocate and consultant on web access...
Joe DolsonWordCamp Minneapolis 2013WordPress Accessibility Today–Plugins–Themes–Core
Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?
Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?The impact of accessibility inWordPress is enormous.
Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?65% of the top 1,000,000 sitesare running WordPresshtt...
Joe DolsonWordCamp Minneapolis 2013Where to start:Understanding Accessibility- P.O.U.R. Principles:–Perceivable,–Operable,...
Joe DolsonWordCamp Minneapolis 2013Developers basic knowledge base:- Use WP core methods whenever possible evenif they are...
Joe DolsonWordCamp Minneapolis 2013Why use core methods that arentaccessible?- If theres a problem in core, submit a patch...
Joe DolsonWordCamp Minneapolis 2013What problems are in core (on the front-end)?- Massive abuse of title elements.- Submis...
Joe DolsonWordCamp Minneapolis 2013What issues are in core (on the back-end)?- Issues with voice-activated control.- Keybo...
Joe DolsonWordCamp Minneapolis 2013Building a theme? Use filters for core issues:Example: generate error on searchadd_filt...
Joe DolsonWordCamp Minneapolis 2013Another Example:Example: filter title attributesadd_filter(wp_nav_menu, remove_title_at...
Joe DolsonWordCamp Minneapolis 2013How developers can break accessibility
Joe DolsonWordCamp Minneapolis 2013What code are you introducing?Stylesheets- display:none;- contrast issues- keyboard foc...
Joe DolsonWordCamp Minneapolis 2013What about JavaScript?Sometimes, it gets a bad rap...- DOM manipulation: consider linea...
Joe DolsonWordCamp Minneapolis 2013ARIA examples:<div class=slider aria-live=polite><div class=slide>Your slide content</d...
Joe DolsonWordCamp Minneapolis 2013ARIA examples:<label for="comment">Comment</label><textarea id="comment" name="comment"...
Joe DolsonWordCamp Minneapolis 2013ARIA examples:<label for="comment" id="comment-label">Comment</label><textarea id="comm...
Joe DolsonWordCamp Minneapolis 2013Accessible output and controls- Do links make sense out of context?- Do headings make s...
Joe DolsonWordCamp Minneapolis 2013Whats moving in WordPress Accessibility?
Joe DolsonWordCamp Minneapolis 2013My WP-Accessibility plug-in• Removes redundant title attributes• Enable skip links with...
Joe DolsonWordCamp Minneapolis 2013Why is this not the best solution?- You cant provide complete accessibility without kno...
Joe DolsonWordCamp Minneapolis 2013The Cities Project- The Cities project, by Joseph OConnor:http://accessiblejoe.com/citi...
Joe DolsonWordCamp Minneapolis 2013Other Plans- The P2 Make.Wordpress.Accessible group:http://make.wordpress.org/accessibi...
Upcoming SlideShare
Loading in …5
×

Accessibility & WordPress: Developing for the whole world.

4,407
-1

Published on

Presented at WordCamp Minneapolis 2013

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

No Downloads
Views
Total Views
4,407
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Accessibility & WordPress: Developing for the whole world.

  1. 1. Joe DolsonWordCamp Minneapolis 2013Accessibility & WordPressDeveloping for the whole world.
  2. 2. Joe DolsonWordCamp Minneapolis 2013Who am I?- A WordPress developer (since 2006)- An advocate and consultant on web accessibility (since2004)- A writer & speaker on practical accessibility- At http://www.joedolson.com or on Twitter, @joedolson
  3. 3. Joe DolsonWordCamp Minneapolis 2013WordPress Accessibility Today–Plugins–Themes–Core
  4. 4. Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?
  5. 5. Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?The impact of accessibility inWordPress is enormous.
  6. 6. Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?65% of the top 1,000,000 sitesare running WordPresshttp://trends.builtwith.com/cms
  7. 7. Joe DolsonWordCamp Minneapolis 2013Where to start:Understanding Accessibility- P.O.U.R. Principles:–Perceivable,–Operable,–Understandable, and–Robust
  8. 8. Joe DolsonWordCamp Minneapolis 2013Developers basic knowledge base:- Use WP core methods whenever possible evenif they are not currently accessible.- Produce semantic output.- Create identifiable, focusable controls.
  9. 9. Joe DolsonWordCamp Minneapolis 2013Why use core methods that arentaccessible?- If theres a problem in core, submit a patch instead of rollingyour own.- Improving core makes a better experience for everyone, notjust users of your theme or plug-in.
  10. 10. Joe DolsonWordCamp Minneapolis 2013What problems are in core (on the front-end)?- Massive abuse of title elements.- Submission of an empty search doesnt return an error.- Default read more text is meaningless out of context.- Text in default comment form that is not associated with formfields.
  11. 11. Joe DolsonWordCamp Minneapolis 2013What issues are in core (on the back-end)?- Issues with voice-activated control.- Keyboard navigability- Custom menu management- Add Media Panel- ATAG compliancehttp://core.trac.wordpress.org/query?status=new&component=Accessibility
  12. 12. Joe DolsonWordCamp Minneapolis 2013Building a theme? Use filters for core issues:Example: generate error on searchadd_filter(pre_get_posts,wpa_filter);function wpa_filter($query) {if ( isset($_GET[s]) && $_GET[s] == ) {$query->query_vars[s] = ;$query->set( is_search, 1 );add_action(template_redirect,wpa_search_error);}return $query;}function wpa_search_error() {$search = locate_template( search.php );if ( $search ) {load_template( $search );exit;}}
  13. 13. Joe DolsonWordCamp Minneapolis 2013Another Example:Example: filter title attributesadd_filter(wp_nav_menu, remove_title_attributes );add_filter(wp_list_pages, remove_title_attributes);add_filter(wp_list_categories, remove_title_attributes);add_filter(get_archives_link, remove_title_attributes);add_filter(wp_tag_cloud, remove_title_attributes);add_filter(the_category, remove_title_attributes);add_filter(edit_post_link, remove_title_attributes);add_filter(edit_comment_link, remove_title_attributes);function remove_title_attributes( $output ) {$output = preg_replace(/s*titles*=s*(["]).*?1/, , $output);return $output;}Download code: http://www.joedolson.com/wordcamp-code.zip
  14. 14. Joe DolsonWordCamp Minneapolis 2013How developers can break accessibility
  15. 15. Joe DolsonWordCamp Minneapolis 2013What code are you introducing?Stylesheets- display:none;- contrast issues- keyboard focus- mouse hoverHTML- source/tab order- skip links- custom forms- semantic structure
  16. 16. Joe DolsonWordCamp Minneapolis 2013What about JavaScript?Sometimes, it gets a bad rap...- DOM manipulation: consider linearization- WAI-ARIA:– roles, aria-live, aria-required, aria-labelledby- Assigning cursor focus (modals & alerts):document.getElementById(id).focus();
  17. 17. Joe DolsonWordCamp Minneapolis 2013ARIA examples:<div class=slider aria-live=polite><div class=slide>Your slide content</div><div class=slide>Your other slide</div></div><div class=slider-nav><a href=# role=button>Previous</a><a href=# role=button>Next</a></div>
  18. 18. Joe DolsonWordCamp Minneapolis 2013ARIA examples:<label for="comment">Comment</label><textarea id="comment" name="comment" cols="45"rows="8" aria-required="true"></textarea></p><p class="form-allowed-tags">You may use these <abbrtitle="HyperText Markup Language">HTML</abbr> tagsand attributes: <code>blah blah blah</code></p>
  19. 19. Joe DolsonWordCamp Minneapolis 2013ARIA examples:<label for="comment" id="comment-label">Comment</label><textarea id="comment" name="comment" cols="45"rows="8" aria-required="true" aria-labelledby="comment-label form-allowed-tags"></textarea></p><p class="form-allowed-tags" id="form-allowed-tags">You may use these <abbr title="HyperTextMarkup Language">HTML</abbr> tags and attributes:<code>blah blah blah</code></p>
  20. 20. Joe DolsonWordCamp Minneapolis 2013Accessible output and controls- Do links make sense out of context?- Do headings make sense out of context?- Can controls be activated from the keyboard? By voiceactivation?- Even if you can activate a control – can you tell what will happenbefore activating it?
  21. 21. Joe DolsonWordCamp Minneapolis 2013Whats moving in WordPress Accessibility?
  22. 22. Joe DolsonWordCamp Minneapolis 2013My WP-Accessibility plug-in• Removes redundant title attributes• Enable skip links with WebKit• Add skip links with user-defined targets.• Add language and text direction attributes• Remove the target attribute from links.• Force a search page error on an empty search• Remove tabindex from elements that are focusable.• Strip title attributes from images in content.• Add post titles to "read more" links.• Add outline to :focus state for focusable elements.• Provide a toolbar to toggle high-contrast or large text• Adjust admin stylesheet
  23. 23. Joe DolsonWordCamp Minneapolis 2013Why is this not the best solution?- You cant provide complete accessibility without knowledge ofthe theme. All of these features should be fixed in themes or inWordPress core.
  24. 24. Joe DolsonWordCamp Minneapolis 2013The Cities Project- The Cities project, by Joseph OConnor:http://accessiblejoe.com/cities/- Teams accessibility professionals with WordPressdevelopers.
  25. 25. Joe DolsonWordCamp Minneapolis 2013Other Plans- The P2 Make.Wordpress.Accessible group:http://make.wordpress.org/accessibility- Weekly WordPress Accessibility chat on IRC atirc.freenode.net/wordpress-uiThe WP-Accessible project highlights plug-ins and themesthat help accessibility at http://wp-accessible.com- Theme Accessibility Audit Guidelines:http://codex.wordpress.org/Theme_Review#Accessibility

×