WordPress Accessibility: WordCamp Chicago

Embed Size (px)

Citation preview

Accessibility & WordPress

Developing for the whole world.

Who am I?

- An advocate & consultant on web accessibility

- A writer & speaker on practical accessibility

- A WordPress dev: http://profiles.wordpress.org/joedolson

Find me: http://www.joedolson.com or Twitter: @joedolson

Joe Dolson

WP to Twitter: 1.5 million downloads

You might know me from:

My Calendar: 275,000 downloads

WordPress Accessibility Today

Plugins

Themes

Core

Findability

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?

WP-Accessibility (by me)http://wordpress.org/plugins/wp-accessibilityRemoves 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-uiThe 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 Today

Plugins

Themes

Core

Findability

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?

WP-Accessibility (by me)http://wordpress.org/plugins/wp-accessibilityRemoves 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-uiThe WP-Accessible project: http://wp-accessible.com - Theme Accessibility Audit Guidelines: http://codex.wordpress.org/Theme_Review#Accessibility

Slides: http://bit.ly/accessible-wordpress

twitter.com/joedolsonWordCamp Chicago 2013