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