Presented at WordCamp Minneapolis 2013

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