wordpress accessibility: wordcamp chicago
Post on 16-Apr-2017
8.863 Views
Preview:
TRANSCRIPT
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
top related