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.

Image sprites – flexible and accessible packages

User generated ratings and reviews are an important part of all Yahoo! sites. You can find them on just about every page of Yahoo! Tech.  It was important for us to develop a ratings presentation device that was easy to code, accessible, flexible, and as light-weight as possible. Our final design uses a combination of image sprites and negative text-indent to satisfy these requirements.

Product ratings are represented with 1 to 5 stars. Other sites have used inline images; repeating a solid or empty version for each of the five stars. stars image from Yahoo! ShoppingOther sites, such as Yahoo! Shopping, have used a single inline image representing the number of stars.  At best, the image will have an alt attribute that descibes the number of stars. However, the content is locked inside the image. This is an easy approach for coding but isn’t the most accessible approach.

Yahoo! Tech uses the content first approach to design

Content-first design improves accessibility. This approach places the relevant content in semantic markup. It then uses CSS to transform that content into the visual design. Here is a sample rating from Yahoo! Tech: Overall:4/5, Quality:5/5, Support: 3/5. Our CSS transform that simple text into a series of stars and accompanying text. User testing with a screen-reader user led us to remove visual descriptions from the content, i.e."stars" or "bars".

With the content in the page, it was time to look at the visual design.

Ratings are presented in either an unordered list or definition list. We need to place descriptive text in front of the stars and want the stars to be aligned with each other. These considerations lead to using spans with a combination of CSS rules to hide the text, insert a background image, and absolutely position the ratings to the right side of the list item. Let’s look at the code.

The HTML – span

To use a background image for the stars, we need a container that can be manipulated with CSS and not include presentational behaviors of its own. This is why we use the span, a generic inline container. We could use a strong or em, but feel the span offers the best versatility. You never know when the graphic designer will ask for some text to be bolded or emphasized in the same list item.

Sample code for a rating

  • Overall: 4/5

The span’s title will generate a tooltip when the user places their mouse over the rating (not Internet Explorer). Screen readers’ default settings ignore title attributes on non-form items.

The CSS

Spans are inline elements.  To display background images, we need to make them display block, define a height, width, and move the text off the screen. To keep them inline with the text, we are also positioning them absolutely. We could position them relatively or floated the spans. Position absolute works the best for our pages.The parent list item is positioned relatively to give the span a contextual anchor. Negative text-indent will hide the rating text.


.ratingslist {list-style-type:none;}
.ratingslist li {position:relative; padding:3px 5px; }
.ratingslist li span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}

Image sprites display the desired number of stars

The list item is given a class with a number at the end (stars8). This will display an image with four out of five red stars. We are using a scale of 0 to 10 to accomodate half stars. To display other rating variations, we change the modifier, i.e. prostars4, retstars4, bars4, bigstars4, etc…

To simplify the maintenance of the site and reduce server requests; Yahoo! Tech also uses image sprites. Sprites are single images that include multiple icons with a consistent spacing between them. Use background positioning to display the desired chunk of the image. Each sprite represents the possible color variations used on the site: red, blue, and green. Minimizing the color palettes reduces the final image size. For more information on sprites, read CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea. As a further enhancement, alpha transparent png images are used for most browsers and index-transparent gifs are presented in the Internet Explorer 6 style sheets. 

Background images are positioned with the set of numbers after "no repeat." The horizontal positioning is first. Our sprite is vertical, so we are leaving it alone, hence the 0 value. The vertical positiong comes next. If we want to display 2 out of 5 stars, we need to shift the background down to that part of the image (-530px). Here is the CSS for presenting the specific star variant.


/* Ratings images
======================================= */
.stars0 span {background:url(/images/bg-ratings.png) no-repeat 0 -650px;}
.stars1 span {background:url(/images/bg-ratings.png) no-repeat 0 -620px;}
.stars2 span {background:url(/images/bg-ratings.png) no-repeat 0 -590px;}
.stars3 span {background:url(/images/bg-ratings.png) no-repeat 0 -560px;}
.stars4 span {background:url(/images/bg-ratings.png) no-repeat 0 -530px;}
.stars5 span {background:url(/images/bg-ratings.png) no-repeat 0 -500px;}
… (repeated for each variation of the stars and bars)

This approach has allowed the Yahoo! Tech engineers to maintain a consistent presentation with minimal markup. For pages that need special tweaks we can easily adjust the positioning by using descending selectors:


#mytech .ratingslist li span { right:5px;}

Caveats

We’ve only found a few small issues with this approach.

  • You cannot count on background images being displayed on the printed page. Our print style sheet removes the text-indent and background images to display “Overall: 4/5”.
  • When someone includes more than 4 products in the comparison table, the text of some rating parameters will begin to overlap the stars. If they were inline images or if we floated the spans, they may drop to the next line.

Yahoo Tech! ratings are another example of creating accessible and visually dynamic pages by considering the underlying content structure before attacking the styles. Users of all abilities are presented with solid information. That’s how you can deliver a 5 star page every time.

Related Information

Microformats and Yahoo! Tech

You’ve probably heard of Microformats by now. It’s that vague concept floated amongst the standardistas which promises to solve world hunger and bring peace to the Middle East. You’ve always got something more immediate to do and hope to read about it soon. Heck, you don’t even know how it is actually used as an end product. Isn’t it just more code in the page?

All of these questions and issues kept me from trying out microformats until Tantek Çelik  gave a lecture at Yahoo! this year.  While the usefulness of the concept was still vague, the ease of implementation inspired us to give it a try.

Microformats let you define information in your page with a set of recognized classes. A parser (program or web site that transforms your information into useful tools) looks for containers with those classes and collects the information within them.  The user is then able to add people, events, recipes, web sites, etc to their organizers, databases, etc. Think of it as a way to multi-task your web pages.

Yahoo! Tech launched with basic support of the hReview microformat. We’ve continued to investigate how we can further support microformats and similar technology.

Introducing the Yahoo! Tech Bloggers with hCard microformat

The hCard microformat is based on a pre-existing standard (vCard).  There are many programs, web sites, and aggregators that are already prepared to use your information. You can add this to your site quite easily.

hcard microformat details on Yahoo! Tech

Let’s look at some code on a blog post by Robin Raskin (http://tech.yahoo.com/blogs/raskin/621) This block begins with a list of content for the microformat parser, since it is not a part of the visual design, we are hiding it with CSS. The next section includes a set of links, her bio link has class=”url”.


 

Microformat classes and their functions

  • div.vcard: This triggers the parser, letting it know the following information conforms to the hCard microformat
  • li.fn: This is the formatted name of the person: Robin Raskin.
  • li.title: Robin Raskin’s title – Yahoo! Tech Advisor
  • li.org: The company Robin works for – Yahoo! Tech
  • img.photo: This is a photograph of Robin
  • a.url: This is a web site for Robin.
  • a.url.email: If the Email Robin link were in the classic mailto:foo@foo.com format, we’d use these classes. Instead, the target is a contact form. To avoid confusion, we’ve left this link alone.

Testing your microformatting

Tails is a great Firefox extension for testing your code. It will display an icon in the browser if a page has microformatting. You can then click on it to open a window with all of the available information. This is a great debugging tool. Be sure to get the latest version for the best microformats support and extensibility.

An intertwining pattern library

Microformats are a rapidly growing technology. As patterns develop, they can be integrated into various other microformats and patterns. This requires going beneath the surface of the microformat twiki to harness its power.  While your results may not bring immediate benefits, the level of work can be minimal. This also requires having some faith in your code, as you may not be able to test the results.

The rel-tag microformat

Technorati has made the rel-tag an important addition to web sites. Simply add rel=”tag” to a link that refers to a page that is an index for information about the link text.  For instance, Robin Raskin’s page features a set of category related links. The rel-tag microformat lets Technorati and other parsers know where to will find the category index pages. 

The rel-directory pattern extends this concept. If Robin’s post was about digital cameras and she included a link to the digital camera index, we could add “directory” to the rel tag.  The final code would be:


Digital Cameras

The rel-home draft

Ther rel-home draft allows web developers to specifically define the link that takes the user to the home page of the site. Currently this can be done without microformatting; but lacks significant browser support. To use straight HTML, place this in the head of your page: <link rel=”home” href=”/index.html” />. Theoretically, the browser would detect this and give the user a hotkey to go back to the home page.

The rel-home microformat draft allows the developer to easily label the home page link. For instance, on Yahoo! Tech, the user can either click the large Tech logo or the products tab. Neither of these are the most intuitive, the rel-home could provide further assistance. Browsers don’t support this yet, but its simplicity makes it a natural to begin now.
The code is quite simple, add rel=”home” to your link:


Products

Should you begin using Microformats?

As you can see, the code is fairly simple. If your site is already presenting contact information, reviews, calendar events, or category indices, it’s time to look at adding a few Microformat details. The rel-tag, rel-home patterns are the easiest to apply. The hCard and hCalendar formats will give you the most usable information. Keep an eye on microformats.org for the latest developments and join their discussion list to play an active part in the evolution of patterns. Microformats may not bring peace to the Middle East, but they will give your web site’s content more power and functionality.

Resources

The hReview format on Yahoo! Tech

Yahoo! Tech launched with basic support for the hReview microformat. Initially, I had no way of testing the output and didn’t realize our limited output. Tails, a Firefox extension, has helped me fine-tune the hReviews. However, Yahoo! Tech still has an outstanding bug with these reviews.

microformats logo
Due to the modular construction of this page,  I am not able to get the product name into the hReview. Dan Cederholm’s post about using the object include microformat pattern may actually solve this issue.

The include pattern lets you define the product or person’s identity earlier in the page and then reference it in individual reviews or blog posts with an object tag. Unfortunately, Safari and Internet Explorer do not behave properly when the object element appears multiple times. An updated version of the pattern uses the link tag instead.

Link-based Object Pattern

Before you get to your reviews, define the product or person with the microformat classes item and fn. Item defines the nature of the content and fn tells us the content is the formatted name of the item. You’ll also need to add a unique id.

Product Name

In your hReview, you need to reference this product by its id.

Unfortunately, a screen reader will announce this as a link. We have a special class, microformatdetail, to hide microformat details that are not part of the visual design. This is a convenient way to add some background information to your hReview, hCard, and hCalendar elements.

.microformatdetail {display:none; /*content for microformat parsing only */}

The final Yahoo! Tech hReview microformat

Let’s look at the code for a digital camera product page. We’ll first define the product name in the top module and then present the reviews later on the page.

Add the product name at the top of the page

Olympus CAMEDIA C-5500 Sport Zoom Digital Camera

Create an individual review

Note: the new link is at the end of the metadetails paragraph

good camera

By John Doe - See all John Doe's reviews - 02/09/06

  • Overall: 5/5
  • Features: 5/5
  • Quality: 5/5
  • Support: 5/5
  • Value: 5/5
Pros:
great camera
Cons:
blurry when flash is off

I got it for 170 $ it us a great camera, I have loved it great pictures great features and a great value i would recomend it to any one

How is the hReview actually used?

We are still working on this final element of hReviews on our product pages. Once it is live, we should begin seeing the benefits. Technorati is the first search engine to begin scraping microformatted information. When hReviews become more prevalent, more search engines and sites will consolidate products with their reviews from around the web. This will give users much more flexibility with shopping decisions.

Resources