accessibility & wordpress: developing for the whole world
TRANSCRIPT
Accessibility & WordPress
Developing for the whole world.
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
Joe Dolson
WordPress Accessibility Today
Plugins
Themes
Core
Why Accessibility? Why WordPress?
Why Accessibility? Why WordPress?The impact of accessibility in WordPress is enormous.
Why Accessibility? Why WordPress?65% of the top 1,000,000 sites are running WordPress
http://trends.builtwith.com/cms
Where to start:Understanding Accessibility
- P.O.U.R. Principles: Perceivable,
Operable,
Understandable, and
Robust
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.
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.
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.
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
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;}}
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*title\s*=\s*(["\']).*?\1/', '', $output);return $output;}
Download code: http://www.joedolson.com/wordcamp-code.zip
How developers can break accessibility
What code are you introducing?
Stylesheets
- display:none;
- contrast issues
- keyboard focus
- mouse hover
HTML
- source/tab order
- skip links
- custom forms
- semantic structure
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();
ARIA examples:
Your slide content
Your other slide
Previous
Next
ARIA examples:
Comment
You may use these HTML tags and attributes: blah blah blah
ARIA examples:
Comment
You may use these HTML tags and attributes: blah blah blah
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?
What's moving in WordPress Accessibility?
My WP-Accessibility plug-inRemoves 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
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.
The Cities Project
- The Cities project, by Joseph O'Connor: http://accessiblejoe.com/cities/- Teams accessibility professionals with WordPress developers.
Other Plans
- The P2 Make.Wordpress.Accessible group: http://make.wordpress.org/accessibility- Weekly WordPress Accessibility chat on IRC at irc.freenode.net/wordpress-uiThe 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
Joe DolsonWordCamp Minneapolis 2013