WordPress Accessibility: WordCamp Chicago

  • 7,573 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,573
On Slideshare
0
From Embeds
0
Number of Embeds
13

Actions

Shares
Downloads
12
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. twitter.com/joedolson WordCamp Chicago 2013 Accessibility & WordPress Developing for the whole world.
  • 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. twitter.com/joedolson WordCamp Chicago 2013 WordPress Accessibility Today –Plugins –Themes –Core –Findability
  • 4. twitter.com/joedolson WordCamp Chicago 2013 Why Accessibility? Why WordPress?
  • 5. twitter.com/joedolson WordCamp Chicago 2013 Why Accessibility? Why WordPress? The impact of accessibility in WordPress is enormous.
  • 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. twitter.com/joedolson WordCamp Chicago 2013 Where to start: Understanding Accessibility - P.O.U.R. Principles: –Perceivable, –Operable, –Understandable, and –Robust
  • 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. 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. 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. 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. 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. 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. twitter.com/joedolson WordCamp Chicago 2013 How developers can break accessibility
  • 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. 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. 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. 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. 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. 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. twitter.com/joedolson WordCamp Chicago 2013 What's moving in WordPress Accessibility?
  • 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. 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. 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. 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. 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/