• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessibility & WordPress: Developing for the whole world.

Accessibility & WordPress: Developing for the whole world.



Presented at WordCamp Minneapolis 2013

Presented at WordCamp Minneapolis 2013



Total Views
Views on SlideShare
Embed Views



5 Embeds 255

https://twitter.com 183
http://www.lireo.com 40
http://www.scoop.it 30
http://tweetedtimes.com 1
http://www.navitasdesign.co.uk 1



Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


Accessibility & WordPress: Developing for the whole world. Accessibility & WordPress: Developing for the whole world. Presentation Transcript

  • Joe DolsonWordCamp Minneapolis 2013Accessibility & WordPressDeveloping for the whole world.
  • Joe DolsonWordCamp Minneapolis 2013Who am I?- A WordPress developer (since 2006)- An advocate and consultant on web accessibility (since2004)- A writer & speaker on practical accessibility- At http://www.joedolson.com or on Twitter, @joedolson
  • Joe DolsonWordCamp Minneapolis 2013WordPress Accessibility Today–Plugins–Themes–Core
  • Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?
  • Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?The impact of accessibility inWordPress is enormous.
  • Joe DolsonWordCamp Minneapolis 2013Why Accessibility? Why WordPress?65% of the top 1,000,000 sitesare running WordPresshttp://trends.builtwith.com/cms
  • Joe DolsonWordCamp Minneapolis 2013Where to start:Understanding Accessibility- P.O.U.R. Principles:–Perceivable,–Operable,–Understandable, and–Robust
  • Joe DolsonWordCamp Minneapolis 2013Developers basic knowledge base:- Use WP core methods whenever possible evenif they are not currently accessible.- Produce semantic output.- Create identifiable, focusable controls.
  • Joe DolsonWordCamp Minneapolis 2013Why use core methods that arentaccessible?- If theres a problem in core, submit a patch instead of rollingyour own.- Improving core makes a better experience for everyone, notjust users of your theme or plug-in.
  • Joe DolsonWordCamp Minneapolis 2013What problems are in core (on the front-end)?- Massive abuse of title elements.- Submission of an empty search doesnt return an error.- Default read more text is meaningless out of context.- Text in default comment form that is not associated with formfields.
  • Joe DolsonWordCamp Minneapolis 2013What issues are in core (on the back-end)?- Issues with voice-activated control.- Keyboard navigability- Custom menu management- Add Media Panel- ATAG compliancehttp://core.trac.wordpress.org/query?status=new&component=Accessibility
  • Joe DolsonWordCamp Minneapolis 2013Building a theme? Use filters for core issues:Example: generate error on searchadd_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;}}
  • Joe DolsonWordCamp Minneapolis 2013Another Example:Example: filter title attributesadd_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
  • Joe DolsonWordCamp Minneapolis 2013How developers can break accessibility
  • Joe DolsonWordCamp Minneapolis 2013What code are you introducing?Stylesheets- display:none;- contrast issues- keyboard focus- mouse hoverHTML- source/tab order- skip links- custom forms- semantic structure
  • Joe DolsonWordCamp Minneapolis 2013What 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();
  • Joe DolsonWordCamp Minneapolis 2013ARIA 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>
  • Joe DolsonWordCamp Minneapolis 2013ARIA 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 <abbrtitle="HyperText Markup Language">HTML</abbr> tagsand attributes: <code>blah blah blah</code></p>
  • Joe DolsonWordCamp Minneapolis 2013ARIA 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="HyperTextMarkup Language">HTML</abbr> tags and attributes:<code>blah blah blah</code></p>
  • Joe DolsonWordCamp Minneapolis 2013Accessible 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 voiceactivation?- Even if you can activate a control – can you tell what will happenbefore activating it?
  • Joe DolsonWordCamp Minneapolis 2013Whats moving in WordPress Accessibility?
  • Joe DolsonWordCamp Minneapolis 2013My WP-Accessibility plug-in• Removes 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
  • Joe DolsonWordCamp Minneapolis 2013Why is this not the best solution?- You cant provide complete accessibility without knowledge ofthe theme. All of these features should be fixed in themes or inWordPress core.
  • Joe DolsonWordCamp Minneapolis 2013The Cities Project- The Cities project, by Joseph OConnor:http://accessiblejoe.com/cities/- Teams accessibility professionals with WordPressdevelopers.
  • Joe DolsonWordCamp Minneapolis 2013Other Plans- The P2 Make.Wordpress.Accessible group:http://make.wordpress.org/accessibility- Weekly WordPress Accessibility chat on IRC atirc.freenode.net/wordpress-uiThe WP-Accessible project highlights plug-ins and themesthat help accessibility at http://wp-accessible.com- Theme Accessibility Audit Guidelines:http://codex.wordpress.org/Theme_Review#Accessibility