WordPress Accessibility: WordCamp Chicago

twitter.com/joedolson
WordCamp Chicago 2013
Accessibility & WordPress
Developing for the whole world.

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

WordPress Accessibility Today
–Plugins
–Themes
–Core
–Findability

Why Accessibility? Why WordPress?

The impact of accessibility in
WordPress is enormous.

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*titles*=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:
<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>

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>

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>

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?

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

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

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?

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!

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/

WordPress Accessibility: WordCamp Chicago

WordPress Accessibility: WordCamp Chicago

Related slideshows

More Related Content

WordPress Accessibility: WordCamp Chicago