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.

Samples

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.

Using Screen Magnifiers on the Web an Introduction Video

They Yahooo User Interface group has added another video to their accessibility library. This time Karo Caron and Victor Tsaran introduce the screen magnifier.

Screen Magnifiers assist people with limited vision by magnifying small portions of the screen. This causes new problems with “popup” dialog boxes, sliding components, and more. It’s especially important for User Interface and DHTML programmers to understand the impact of screen interactions.

Web Accessibility Toolbar for Opera

Hot off the presses. Download the Web Accessibility Toolbar for Opera if you are an Opera user or develop for Opera as a supported browser.

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

  • identify components of a web page
  • facilitate the use of 3rd party online applications
  • provide links to references and additional resources.

The Paciello Group

Aggregate RSS from all over the web with Yahoo! Pipes

Yahoo! has been thriving on hacks. It’s quarterly Hack Days have given engineers the opportunity to build radical and sometimes silly alterations of existing services. Once in a while, these hacks are truly revolutionary. Enter Yahoo! Pipes.

Yahoo Pipes
This super cool project started as a Hack and has now become an official project. How cool is it? Think of the impact Digg, Flickr, Delicious, Technorati, and YouTube had on the internet in 2006. Pipes has that potential!

So, what is this potential “Segway” product? Pipes allows you to create aggregated feeds to publish on your own site.

Lets say you wanted to create a web page about Pizza in someone’s local area. B.P. (Before Pipes) you would have to write code for a form requesting a zip code, you’d then have to write code to request the appropriate rss feed from Yahoo! Local for restaurants, Epicurious for recipes, Craigslist for pizza loving personal ads, Flickr for images of pizza, etc. You’d then have to parse the XML and build modules to display the information.

That’s a lot of work for a simple project.

Enter the Pipe

Pipes allows you to do all of this in a simple drag and drop interface. I first used it in its early Alpha stage and it took me about 10 minutes to figure out what was happening. They’ve steadily worked on the interface and you can accomplish the above tasks in about 5 minutes. You can then use their tools to publish the results to your own blog or web site.

Mashing up has now become easier than opening a box of potato flakes and adding water. This is big folks, really big.

Here’s how the Pipes team describes their goal

Pipes is an interactive feed aggregator and manipulator. Using Pipes, you can create feeds that are more powerful, useful and relevant.
pipes.yahoo.com

It ain’t perfect… yet

Pipes does have some rough edges, there’s no doubt about it. It’s not very accessible, but they’re working on that right now. If you have suggestions or find bugs, let them know.

Enjoy this site as the super-cool, revolutionary site it is. It’s was created with passion and hard work by a small devoted team. They’ve got the spirit of a startup with the power of Yahoo!

Enjoy the new A.P. Era (After Pipes).