Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Accessibility: WordCamp Chicago


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
  • Be the first to comment

WordPress Accessibility: WordCamp Chicago

  1. 1. WordCamp Chicago 2013 Accessibility & WordPress Developing for the whole world.
  2. 2. WordCamp Chicago 2013 Who am I? - A WordPress dev: - An advocate & consultant on web accessibility - A writer & speaker on practical accessibility - At or on Twitter, @joedolson
  3. 3. WordCamp Chicago 2013 WordPress Accessibility Today –Plugins –Themes –Core –Findability
  4. 4. WordCamp Chicago 2013 Why Accessibility? Why WordPress?
  5. 5. WordCamp Chicago 2013 Why Accessibility? Why WordPress? The impact of accessibility in WordPress is enormous.
  6. 6. WordCamp Chicago 2013 Why Accessibility? Why WordPress? 65% of the top 1,000,000 sites are running WordPress
  7. 7. WordCamp Chicago 2013 Where to start: Understanding Accessibility - P.O.U.R. Principles: –Perceivable, –Operable, –Understandable, and –Robust
  8. 8. 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. 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. 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. 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
  12. 12. 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. 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:
  14. 14. WordCamp Chicago 2013 How developers can break accessibility
  15. 15. 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. 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. 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. 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. 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. 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. WordCamp Chicago 2013 What's moving in WordPress Accessibility?
  22. 22. WordCamp Chicago 2013 WP-Accessibility (by me) • 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. 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. WordCamp Chicago 2013 Media A11y(Stephanie Leary) -Easily audit media for accessibility attributes -Currently only checks for alt attributes -How to check for captions or transcripts?
  25. 25. WordCamp Chicago 2013 The Cities Project (Joseph O'Connor) - - Goal: create great, accessible themes for WordPress - Teams accessibility professionals with local WordPress developers. Chicago doesn't have a team yet!
  26. 26. WordCamp Chicago 2013 Get involved! - P2 Accessibility team: - Weekly WP Accessibility chat: The WP-Accessible project: - Theme Accessibility Audit Guidelines: Slides: