ARIA support with the YUI library

AJAX and DHTML have made web sites more interactive and easier to use. At least for visitors who are not using a screen reader. Screen reader users have to struggle with pages that lose focus, change without prompting the user of new data, and much more. However, there are many developers working on solutions to this problem.

Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

Related articles

Progressive enhancement of links using the CSS attribute selector

Attribute Selector Test Page

We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

Attribute Selectors

CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

Announce the file type of a link with CSS

I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:

Foo presentation (.pdf, 5kb)

That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:

It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

Now, let’s look at the CSS:

a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;}
a[href$="png"]{background-position: 0 -48px;}
a[href$="pdf"] {background-position: 0 -99px;}
a[href$="mp3"]{background-position: 0 -145px;}
a[href$="doc"]{background-position: 0 -199px;}
a[href$="exe"]{background-position: 0 -250px;}

a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;}
a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;}
a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}
a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;}
a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}

See the final test page.

Pattern matching in the attribute selector

We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
Patrick Hunlon has a good summary of the pattern matching:

  • [foo] — Has an attribute named “foo”
  • [foo=”bar”] — Has an attribute named “foo” with a value of “bar” (“bar”)
  • [foo~=”bar”] — Value has the word “bar” in it somewhere (“blue bar stools”)
  • [foo^=”bar”] — Value begins with “bar” (“barstool”)
  • [foo$=”bar”] — Value ends with “bar” (“I was at the bar”)
  • [foo*=”bar”] — Value has bar somewhere (“I was looking for barstools”)

Attach icons to anything with CSS

The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

Adding an icon to the link

First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or

Adding the descriptive text

Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
We will also adjust the color and give it a bit of spacing.

A big step forward with a small chunk of work

There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

Captioning Sucks and Needs a Jump Start

Captioning Sucks - No shit Sherlock, lets fix it
The internet is awash in video. YouTube, Yahoo Video, and other video sites host millions of videos with little attention to close captioning. For many sites, the text translations exist, they simply are not used. This sucks.

Television shows have featured captioning for many years. It’s sometimes the only way to figure out what they are saying on South Park. However, captioning standards are all over the place, the quality of text is questionable, and the industry is not supporting new innovations. This sucks.

Joe Clark is working on a new standard to fix these issues. He probably knows more about captioning than any other breathing creature in the world is the new home to the future of captioning. Perhaps it is time to buy the domain:, for hopefully it won’t suck much longer.

Related articles

RNIB releases guidelines for accessible Flash banner ads

The Royal National Institute of Blind People has just released a set of guidelines for building accessible Flash ads. While these are aimed at ads, there’s no reason you can’t use the same guidelines in all of your Flash projects.

  1. Provide a text equivalent for the animation.
  2. Provide an alternative for the Flash animation
  3. Readability
  4. Looping and blinking
  5. Test your move
  6. WCAG compliance
  7. Navigating Flash with a screen reader

See the full article for more information on these Flash accessibility guidelines.

Class Equals Screen Reader Info

I’ve been using a little CSS trickery to hide content and data from the average user. I hate to mention it too often as it can open pandora’s box. There was a recent thread on the Microformat’s discussion list about this very topic. The gist of many programmers is that data worth sharing is data worth displaying.

However, there are times when your UED provides a design that lacks visual hooks for your screen reader users. A good example may be the ever-popular search form. Most sites will have an input and a button that says “search”. The label for this input is nowhere to be found.

The average sighted user can figure out such a simple form but the screen reader needs a bit more help. Here’s a sound clip of a screen reader trying to use the search form on Yahoo! Kids (.mp3). This was further complicated by the missing alt attribute on the image-based submit button.

I’ve also had to work with table based forms that need some assistance. The table is marked up with appropriate table headers and scopes, but the individual inputs lack labels due to the UED.

The simple solution

There are many ways to hide content via CSS. You want to avoid visibility:hidden and display:none. These will also hide it from the screen reader. You could use text-indent:-1000 em. I prefer using position:absolute; top:0; left:-1000em;. This hides the label by pushing it off screen yet the screen reader is still able to use it.

Updated CSS (updated 4/24/2008)

Adding a top position to your hidden may cause the page to jump when the item is focused. Only use a negative left position and leave the top position out of the equation.


Let’s look at the complicated table with hidden inputs. The table is properly coded with summary and scope. However, the table would still be difficult for a screen reader without form labels.

Here’s a sample of the HTML code:

Here’s the CSS for the labels

.srinfo {position:absolute; top:0; left:-1000em;}

Extending the hidden screen reader concept

I’ve written earlier about how Yahoo! Tech used a hidden collection of links to replicate an inaccessible flash movie. In a nutshell: screen readers cannot see a flash movie that has wmode:transparent. To get around this, we duplicated the flash content and moved it off-screen for screen readers and search engines.

You could also use this technique for providing information specific to screen reader users, such as:

Please note, this page uses JavaScript to continually update stock information. Look for the link: "disable stock updates" to turn this feature off

Hold the Presses, this isn’t perfect!

You can’t just throw anything off screen for the screen readers. The earlier Yahoo Tech example took about made 6 links invisible yet they were still accessible to keyboard users. So, remember, when you use the srinfo class to hide content for screen readers, keep in mind the impact on keyboard users.