wordpress accessibility enhancements
Post on 12-May-2015
798 Views
Preview:
DESCRIPTION
TRANSCRIPT
Making Wordpress more accessibleTed Drake, Yahoo! Accessibility Lab
UC Berkeley, June 14, 2011
Tuesday, June 14, 2011
Tuesday, June 14, 2011
Yahoo! Accessibility: http://accessibility.yahoo.com
Accessible CarouselYUI Carousel ARIA Plugin
Tuesday, June 14, 2011
ARIA and keyboard accessiblehttp://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin.html
Read More LinksTuesday, June 14, 2011
Avoid repetitive read more links. These links contain the article title, which is hidden via CSS
With CSS disabledTuesday, June 14, 2011
<?php the_content("Continue reading <span>" . the_title(”, ”, false) . "</span>"); ?>
Tuesday, June 14, 2011
http://yaccessibilityblog.com/library/avoid-read-more-links-in-your-word-press-blog.html#more-6
ARIA LandmarksTuesday, June 14, 2011
The site uses ARIA landmarks: navigation, search, main, and contentinfoThe carousel uses tabindex, button, option, and presentation strategically to provide keyboard support.
<div role=”navigation”>
< form role=”search”>
<div role=”main”>
<a role=”button”>
Tuesday, June 14, 2011
Landmarks provide additional navigation. Consider it advanced skip to main content linksrole=”button” is for javascript links
Give your iframe a title
What is this?
Tuesday, June 14, 2011
Think of the web page as a hallway with doors and windows. An iframe is a locked door with no window. What’s behind that door? Is it worth entering? The title tells the screen reader what to expect.
<iframe title=”Like us on Facebook”>
Use the plugin editor to add the title
Tuesday, June 14, 2011
Use the plugin editor to find the iframe code that requires a title. Facebook, twitter, comments, flickr, google ads, amazon, youtube, and other modules may use iframes.
Tuesday, June 14, 2011
top related