The document summarizes Joe Dolson's presentation on accessibility and WordPress at WordCamp Chicago 2013. It discusses making WordPress more accessible through plugins, themes, and core code contributions. It provides examples of using ARIA attributes and filters to make themes more accessible. It also highlights existing WordPress accessibility plugins like WP-Accessibility and Media A11y and initiatives like The Cities Project to improve WordPress accessibility.
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
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;
}
}
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();
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?
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/