Your SlideShare is downloading. ×
0
twitter.com/joedolson
WordCamp Chicago 2013
Accessibility & WordPress
Developing for the whole world.
twitter.com/joedolson
WordCamp Chicago 2013
Who am I?
- A WordPress dev: http://profiles.wordpress.org/joedolson
- An advo...
twitter.com/joedolson
WordCamp Chicago 2013
WordPress Accessibility Today
–Plugins
–Themes
–Core
–Findability
twitter.com/joedolson
WordCamp Chicago 2013
Why Accessibility? Why WordPress?
twitter.com/joedolson
WordCamp Chicago 2013
Why Accessibility? Why WordPress?
The impact of accessibility in
WordPress is ...
twitter.com/joedolson
WordCamp Chicago 2013
Why Accessibility? Why WordPress?
65% of the top 1,000,000 sites
are running W...
twitter.com/joedolson
WordCamp Chicago 2013
Where to start:
Understanding Accessibility
- P.O.U.R. Principles:
–Perceivabl...
twitter.com/joedolson
WordCamp Chicago 2013
Developer's basic knowledge base:
- Use WP core methods whenever possible even...
twitter.com/joedolson
WordCamp Chicago 2013
Why use core methods that aren't
accessible?
- If there's a problem in core, s...
twitter.com/joedolson
WordCamp Chicago 2013
What problems are in core (on the front-end)?
- Massive abuse of title element...
twitter.com/joedolson
WordCamp Chicago 2013
What issues are in core (on the back-end)?
- Issues with voice-activated contr...
twitter.com/joedolson
WordCamp Chicago 2013
Building a theme? Use filters for core issues:
Example: generate error on sear...
twitter.com/joedolson
WordCamp Chicago 2013
Another Example:
Example: filter title attributes
add_filter('wp_nav_menu', 'r...
twitter.com/joedolson
WordCamp Chicago 2013
How developers can break accessibility
twitter.com/joedolson
WordCamp Chicago 2013
What code are you introducing?
Stylesheets
- display:none;
- contrast issues
-...
twitter.com/joedolson
WordCamp Chicago 2013
What about JavaScript?
Sometimes, it gets a bad rap...
- DOM manipulation: con...
twitter.com/joedolson
WordCamp Chicago 2013
ARIA examples:
<div class='slider' aria-live='polite'>
<div class='slide'>Your...
twitter.com/joedolson
WordCamp Chicago 2013
ARIA examples:
<label for="comment">Comment</label>
<textarea id="comment" nam...
twitter.com/joedolson
WordCamp Chicago 2013
ARIA examples:
<label for="comment" id="comment-
label">Comment</label>
<texta...
twitter.com/joedolson
WordCamp Chicago 2013
Accessible output and controls
- Do links make sense out of context?
- Do head...
twitter.com/joedolson
WordCamp Chicago 2013
What's moving in WordPress Accessibility?
twitter.com/joedolson
WordCamp Chicago 2013
WP-Accessibility (by me)
http://wordpress.org/plugins/wp-accessibility
• Remov...
twitter.com/joedolson
WordCamp Chicago 2013
Why is this not the best solution?
- You can't provide best practice accessibi...
twitter.com/joedolson
WordCamp Chicago 2013
Media A11y(Stephanie Leary)
http://wordpress.org/plugins/media-a11y/
-Easily a...
twitter.com/joedolson
WordCamp Chicago 2013
The Cities Project (Joseph O'Connor)
- http://accessiblejoe.com/cities/
- Goal...
twitter.com/joedolson
WordCamp Chicago 2013
Get involved!
- P2 Accessibility team: http://make.wordpress.org/accessibility...
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
Upcoming SlideShare
Loading in...5
×

WordPress Accessibility: WordCamp Chicago

7,992

Published on

Updated version of the WordPress Accessibility talk given at WordCamp Minneapolis. Understanding accessibility, implementing accessibility, WordPress Accessibility options and availability.

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

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

No notes for slide

Transcript of "WordPress Accessibility: WordCamp Chicago"

  1. 1. twitter.com/joedolson WordCamp Chicago 2013 Accessibility & WordPress Developing for the whole world.
  2. 2. twitter.com/joedolson WordCamp Chicago 2013 Who am I? - A WordPress dev: http://profiles.wordpress.org/joedolson - An advocate & consultant on web accessibility - A writer & speaker on practical accessibility - At http://www.joedolson.com or on Twitter, @joedolson
  3. 3. twitter.com/joedolson WordCamp Chicago 2013 WordPress Accessibility Today –Plugins –Themes –Core –Findability
  4. 4. twitter.com/joedolson WordCamp Chicago 2013 Why Accessibility? Why WordPress?
  5. 5. twitter.com/joedolson WordCamp Chicago 2013 Why Accessibility? Why WordPress? The impact of accessibility in WordPress is enormous.
  6. 6. twitter.com/joedolson WordCamp Chicago 2013 Why Accessibility? Why WordPress? 65% of the top 1,000,000 sites are running WordPress http://trends.builtwith.com/cms
  7. 7. twitter.com/joedolson WordCamp Chicago 2013 Where to start: Understanding Accessibility - P.O.U.R. Principles: –Perceivable, –Operable, –Understandable, and –Robust
  8. 8. twitter.com/joedolson WordCamp Chicago 2013 Developer's basic knowledge base: - Use WP core methods whenever possible even if they are not currently accessible. - Produce semantic output. - Create identifiable, focusable controls.
  9. 9. twitter.com/joedolson WordCamp Chicago 2013 Why use core methods that aren't accessible? - If there's a problem in core, submit a patch instead of rolling your own. - Improving core makes a better experience for everyone, not just users of your theme or plug-in.
  10. 10. twitter.com/joedolson WordCamp Chicago 2013 What problems are in core (on the front-end)? - Massive abuse of title elements. - Submission of an empty search doesn't return an error. - Default 'read more' text is meaningless out of context. - Text in default comment form that is not associated with form fields.
  11. 11. twitter.com/joedolson WordCamp Chicago 2013 What issues are in core (on the back-end)? - Issues with voice-activated control. - Keyboard navigability - Custom menu management - Add Media Panel - ATAG compliance http://core.trac.wordpress.org/query?status=new&component=Accessibility
  12. 12. twitter.com/joedolson WordCamp Chicago 2013 Building a theme? Use filters for core issues: Example: generate error on search add_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. twitter.com/joedolson WordCamp Chicago 2013 Another Example: Example: filter title attributes add_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. twitter.com/joedolson WordCamp Chicago 2013 How developers can break accessibility
  15. 15. twitter.com/joedolson WordCamp Chicago 2013 What code are you introducing? Stylesheets - display:none; - contrast issues - keyboard focus - mouse hover HTML - source/tab order - skip links - custom forms - semantic structure
  16. 16. twitter.com/joedolson WordCamp Chicago 2013 What 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. twitter.com/joedolson WordCamp Chicago 2013 ARIA 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. twitter.com/joedolson WordCamp Chicago 2013 ARIA 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 <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <code>blah blah blah</code></p>
  19. 19. twitter.com/joedolson WordCamp Chicago 2013 ARIA 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="HyperText Markup Language">HTML</abbr> tags and attributes: <code>blah blah blah</code></p>
  20. 20. twitter.com/joedolson WordCamp Chicago 2013 Accessible 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 voice activation? - Even if you can activate a control – can you tell what will happen before activating it?
  21. 21. twitter.com/joedolson WordCamp Chicago 2013 What's moving in WordPress Accessibility?
  22. 22. twitter.com/joedolson WordCamp Chicago 2013 WP-Accessibility (by me) http://wordpress.org/plugins/wp-accessibility • Removes redundant title attributes • Enable skip links with WebKit • Add skip links with user-defined targets. • Add language and text direction attributes if missing • 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 • Coming soon: diagnostic CSS
  23. 23. twitter.com/joedolson WordCamp Chicago 2013 Why is this not the best solution? - You can't provide best practice accessibility without knowledge of the theme. All of these features should be fixed in themes or in WordPress core. -But this is a quick and easy implementation, and great for retrofitting
  24. 24. twitter.com/joedolson WordCamp Chicago 2013 Media A11y(Stephanie Leary) http://wordpress.org/plugins/media-a11y/ -Easily audit media for accessibility attributes -Currently only checks for alt attributes -How to check for captions or transcripts?
  25. 25. twitter.com/joedolson WordCamp Chicago 2013 The Cities Project (Joseph O'Connor) - http://accessiblejoe.com/cities/ - Goal: create great, accessible themes for WordPress - Teams accessibility professionals with local WordPress developers. Chicago doesn't have a team yet!
  26. 26. twitter.com/joedolson WordCamp Chicago 2013 Get involved! - P2 Accessibility team: http://make.wordpress.org/accessibility - Weekly WP Accessibility chat: irc.freenode.net/wordpress-ui The WP-Accessible project: http://wp-accessible.com - Theme Accessibility Audit Guidelines: http://codex.wordpress.org/Theme_Review#Accessibility Slides: http://bit.ly/accessible-wordpress/
  1. A particular slide catching your eye?

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

×