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