Accessibility & WordPress: Developing for the whole world.
4 likes•4,257 views
This document summarizes Joe Dolson's presentation on accessibility and WordPress at WordCamp Minneapolis 2013. The presentation covered improving accessibility in WordPress core, themes, and plugins by following principles like perceivable, operable, understandable, and robust. It provided examples of using ARIA attributes and filters to make WordPress more accessible. It also discussed initiatives to improve WordPress accessibility like the Cities project and weekly accessibility chats.
![Joe Dolson
WordCamp Minneapolis 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;
}
}](https://image.slidesharecdn.com/minneapolis-wordcamp-2013-130427073036-phpapp02/85/Accessibility-WordPress-Developing-for-the-whole-world-12-320.jpg)
![Joe Dolson
WordCamp Minneapolis 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](https://image.slidesharecdn.com/minneapolis-wordcamp-2013-130427073036-phpapp02/85/Accessibility-WordPress-Developing-for-the-whole-world-13-320.jpg)
Accessibility & WordPress: Developing for the whole world.
- 1. Joe Dolson WordCamp Minneapolis 2013 Accessibility & WordPress Developing for the whole world.
- 2. Joe Dolson WordCamp Minneapolis 2013 Who am I? - A WordPress developer (since 2006) - An advocate and consultant on web accessibility (since 2004) - A writer & speaker on practical accessibility - At http://www.joedolson.com or on Twitter, @joedolson
- 3. Joe Dolson WordCamp Minneapolis 2013 WordPress Accessibility Today –Plugins –Themes –Core
- 4. Joe Dolson WordCamp Minneapolis 2013 Why Accessibility? Why WordPress?
- 5. Joe Dolson WordCamp Minneapolis 2013 Why Accessibility? Why WordPress? The impact of accessibility in WordPress is enormous.
- 6. Joe Dolson WordCamp Minneapolis 2013 Why Accessibility? Why WordPress? 65% of the top 1,000,000 sites are running WordPress http://trends.builtwith.com/cms
- 7. Joe Dolson WordCamp Minneapolis 2013 Where to start: Understanding Accessibility - P.O.U.R. Principles: –Perceivable, –Operable, –Understandable, and –Robust
- 8. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 2013 How developers can break accessibility
- 15. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 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. Joe Dolson WordCamp Minneapolis 2013 What's moving in WordPress Accessibility?
- 22. Joe Dolson WordCamp Minneapolis 2013 My 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. Joe Dolson WordCamp Minneapolis 2013 Why is this not the best solution? - You can't provide complete accessibility without knowledge of the theme. All of these features should be fixed in themes or in WordPress core.
- 24. Joe Dolson WordCamp Minneapolis 2013 The Cities Project - The Cities project, by Joseph O'Connor: http://accessiblejoe.com/cities/ - Teams accessibility professionals with WordPress developers.
- 25. Joe Dolson WordCamp Minneapolis 2013 Other Plans - The P2 Make.Wordpress.Accessible group: http://make.wordpress.org/accessibility - Weekly WordPress Accessibility chat on IRC at irc.freenode.net/wordpress-ui The WP-Accessible project highlights plug-ins and themes that help accessibility at http://wp-accessible.com - Theme Accessibility Audit Guidelines: http://codex.wordpress.org/Theme_Review#Accessibility