The Intersection of Usability, Accessibility, and SEO (Part III)

The Intersection of Usability, Accessibility, and SEO (Part III)

A couple of weeks ago I had the opportunity to guest lecture before the Web Design students at Wake Technical Community College on the similarities between Usability, Accessibility, and SEO, a topic I first addressed here in 2009. Since my initial blog post, I assembled a talk, which I presented at BarCampRDU twice, and at Internet Summit 2010 in Raleigh last November.

While the Internet Summit was a great opportunity to speak before a few hundred people, the talk was only fifteen minutes, and I had a lot of ground to cover. The Wake Tech talk, while only attended by about three-dozen students and faculty, gave me the opportunity to cover additional topics and examples during my hour speaking time. So if you read my previous post, and viewed the Internet Summit presentation on SlideShare, this one has about thirty additional slides, focused on two more intersections, and includes two extended case studies illustrating best and worst practices in website design and eCommerce application development.

For a list of valuable resources for testing usability, accessibility, and search engine optimization, please refer to my Internet Summit blog preview.

View more presentations from DesignHammer Media Group LLC.

Accommodating the color blind

In my last set of slides, I focused on accessibility issues related to optimizing websites for the profoundly blind; users that require screen readers. There are, however, a wide variety of disabilities that must be considered when designing and testing for accessibility, more than just profound blindness. With an estimated 8% of men and 1% of women (the statistics I found varied), suffering from some degree of color blindness, color cues and contrast issues need to be considered.

Color blindness or color vision deficiency is the inability to distinguish between different wavelengths of light (perceived as color) that the majority of people can. In nearly all cases, the color blind do not see solely in grayscale—a complete absence of color—but certain colors are hard to distinguish between. The most common forms manifest in difficulty distinguishing between red and green. To those suffering from the multiple conditions generally classified as red-green color blindness, red and green colors are perceived as shades of yellow-brown. If the colors are of similar value (brightness) very different colors may be difficult for them to distinguish.

More importantly, while a color blind person may be able to distinguish that two colors are different, they are more likely to not be able to be able to identify which is, say, green or red. If you rely exclusively on color cues, such as buttons of a given color, this can be problematic. If the color cue is backed up by text (such as “submit” and “cancel”), then you are covered.

In my talk, I presented bar charts that initially relied solely on color to distinguish between two sets of data. If I referred to the green bars in my accompanying text, a colorblind user would have trouble knowing which data I was referring to. In addition, a sighted user using a grayscale display (or a black and white printout) would experience the same problem. Depending on the relevance, the Search Engine could also get less than optimal context, as well as prove to be a missed opportunity to add additional keyword phrases to your text.

Accessibility issues when embedding audio and video

In addition to color blindness, I addressed problems faced when embedding audio and video content. Proper accessibility requires providing transcripts for audio and video soundtracks, so hearing impaired users can access the content. Transcripts are also a good idea for usability and SEO. A search engine (at least for now), can’t index an audio track, and even if it could, it would have the same shortcomings of indexed Flash; a lack of HTML structure that is essential for successful SEO.

While maybe not as obvious, a transcript provides a better user experience for non-hearing impaired users as well. A user looking to find a particular passage of a long audio track on a website could do a site-wide search to locate the desired track, followed by an on-page search to find the desired section, and then easily copy-and-paste the text for use in another document, as just one example. A written transcript could also include time stamps for different sections to allow users to easily jump to the part they are most interested in.

Best and worst practices in website design and eCommerce application development

After looking at problems associated with relying on color cues, and reviewing audio/video issues, I covered some real world examples of what I consider to be best and worst practices from two fashion industry icons: Prada S.p.A. and Levi Strauss & Co. I'll save my reviews of these websites for my next post.