This

1. Making Wordpress
more accessible
Ted Drake,Yahoo! Accessibility Lab
UC Berkeley, June 14, 2011
Tuesday, June 14, 2011

2. Tuesday, June 14, 2011
Yahoo! Accessibility: http://accessibility.yahoo.com

3. Accessible Carousel
YUI Carousel ARIA Plugin
Tuesday, June 14, 2011
ARIA and keyboard accessible
http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin.html

4. Read More Links
Tuesday, June 14, 2011
Avoid repetitive read more links. These links contain the article title, which is hidden via CSS

5. With CSS disabled
Tuesday, June 14, 2011

6. <?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

7. ARIA Landmarks
Tuesday, June 14, 2011
The site uses ARIA landmarks: navigation, search, main, and contentinfo
The carousel uses tabindex, button, option, and presentation strategically to provide
keyboard support.

8. <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 links
role=”button” is for javascript links

9. What is this?
Give your iframe a title
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.

10. <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.

11. Tuesday, June 14, 2011