Alt-er Ego: Images and Alt Attributes

I was recently reading an article on Sitepoint.com about SEO mistakes and, in the comments to this article was an interesting discussion on the correct usage of the misnamed "alt tag." This inspired me to pen my own thoughts on the use of alt on accessible web sites.

Well, first things first, as another blogger points out, there is no such thing as an "alt tag", alt is an attribute of an img tag. As such, I shall (try to) refer to it as an attribute rather than a tag.

Before we can really discuss correct usage of the alt attribute, we need to discover what purpose this attribute is intended to serve. The W3 Web Content Accessibility Guidelines (WCAG) describe the purpose of the alt attribute as providing a "short text equivalent" of the image. The WCAG also states "[t] equivalents must be written so that they convey all essential content."

This is still a tad vague and elsewhere the alt attribute is described as being used to specify the purpose of the image or "to provide in textual form whatever information was provided by the image."

W3 also offers some guidelines on the correct usage of the alt attribute:

1. The alt attribute is required for all images, even if it is left as an empty string ("")
2. Users should not "specify irrelevant alternate text when including images intended to format a page" (which should be indicated by an empty string).
3. The alternate text must be meaningful.

It's also important to remember that correct HTML markup provides two other attributes that are often confused with the alt attribute, the longdesc and title attributes and the alt attribute should not be used instead of these.

Another incorrect usage of the alt attribute, which is seen on many web sites, is using it as a tooltip. The text in the alt attribute must never contain information that is additional to that conveyed by the image. In fact, browsers are not even "required" to display the alt text as a tooltip at all and some popular browsers, such as Firefox, do not do so.

Purpose of the Alt Attribute

Before I examine the correct usage of the alt attribute, it's also important to recognize that there is some disagreement as to its fundamental purpose.

As stated above, its purpose is to provide a text equivalent, but an equivalent for whom? Many people concentrate on this attribute solely as a means of providing information to visually handicapped users who cannot see the image being displayed. However, this attribute is not there just for those with visual handicaps but is also intended to be used for anyone whose web software does not display images. Thus, it is also for users of text-only browsers, screen readers, and so on.

Sometimes the accessibilty needs for visually handicapped users needs to be balanced against the needs of other users. However, in my personal opinion, in the real world, the vast majority of web sites are browsed by sighted users using standard web browsers and the only people that would gain any real benefit from well-formed alt attributes are visually handicapped users. In fact, alt attributes serve no purpose whatsoever for sighted users using standard web browsers (IE, Firefox, Safari, Opera, etc.) and they are not meant to!

Thus, my discussion of the correct usage of this attribute will have a definite bias towards straightforward accessibility for users with visual handicaps.

Correct Usage of the Alt Attribute

I'm going to start off with a bold and possibly controversial statement: in most cases, unless the image is both functional AND contains text within the image, the alt attribute may serve no purpose at all.

So, let's examine that statement in the light of a few scenarios.

Supposing you have a web page containing an image that is merely illustrative of the surrounding text. For example, a web page about yourself, containing a head and shoulders photo of yourself . . . or a page about San Francisco containing an image of the Golden Gate Bridge. In such instances, the images only really serve a purpose for sighted users. Does a blind user gain anything from knowing there's a picture of yourself, or the Golden Gate Bridge on the page? In my opinion, the answer to that question is a clear "No" - even if the user had, at one time, seen either yourself and/or the Bridge. What use does it serve the typical user with a visual handicap to have "picture of Golden Gate Bridge" or "Golden Gate Bridge" read out by their screen reader, or transformed into braille, or whatever? In fact, it may even interrupt the flow of text such that it actually causes confusion.?

On the other hand, what if your navigation bar uses images containing text such as "About Us," "Contact Us," etc. linking to the relevant pages. In this instance, unless those images contain alt text, fundamental functionality of your site will be lost to anyone that cannot, for whatever reason, see those images. So, here you clearly need to have alt attributes that describe the purpose of those images and that contain the same information as those images, as discussed above.

This is in clear contradistinction to the self-photo or Golden Gate Bridge examples. The head and shoulders photo really just serves the purpose of giving a sighted user a visual cue as to your appearance. The GGB shot, on the other hand, probably only serves the purpose of breaking up the monotony of the text on the page or to provide a more pleasing visual layout. Thus, in both cases the purpose is primarily visual and serves no other function.

Conclusion

1. You must have an alt attribute for all of your images, even if it's empty
2. Alt attributes must not contain information additional to that in the image itself
3. Alt attributes are really only useful if the image is both functional and textual

Technorati Tags:
alt tag, html, accessibility

Gotcha Captcha!

In a recent post on the Official Google Blog, the author describes how Google is implementing an audio alternative to the highly visual Captcha human-verfication methodology for users with visual handicaps.

Kudos to Google! As an advocate for accessible web sites, I applaud Google for introducing this and I urge any readers implementing Captcha on their own web sites to consider the usability ramifications of this method. Captcha, by its very essence, is a non-accessible method of verification so, if your site is using it, you may even be breaking the law, particularly if your site is in the U.S. where Rehabilitation Act and ADA (Americans with Disabilites Act) requirements are pretty stringent, and especially if you run a government web site or you sell directly to government bodies.

Although not web-related, a recent lawsuit in the U.S. has highlighted accessibility issues and gives an indication as to how serious this issue is becoming. In the case, American Council for the Blind v. Paulson, Sec'y of the Treasury, the court ruled that the Treasury's failure to provide the blind with "meaningful access" to paper money violates federal law.

The judge ruled that the "Treasury Department's failure to design, produce and issue paper currency that is readily distinguishable to blind and visually impaired" people violates federal law, since paper money effectively precludes them from "meaningful access to U.S. currency."

I have to admit, I'd spoken about this very issue before--after living in the U.S. for several years and realizing how difficult it is, even for a sighted person, to distinguish American bills. In the U.K., each denomination of paper money is made to be as distinguishable as possible from other denominations, by color and size. It surprised me that, in a country that places such an emphasis on accessibility that the country's own currency would be extremely inaccessible ... but, then again, the American people seem pretty resistant to change when it comes to money!

So, to get back to the world of web accessibility, how accessible is your site? Do you comply with Web Accesibility Initiative standards or legal accessibility requirements, such as the American Section 508 requirements, British requirements under the DDA (Disability Discrimination Act) or European accessibility initiatives? And if you've implemented Captcha, what alternatives do you provide, or are you blocking the visually handicapped from your site?

Technorati Tags: captcha, accessibility

Disappointed with IE7

I'm disappointed with IE7. I had read so much blurb about IE7 was supposed to be sacrificing backwards compatibility in order to be more standards compliant. Compliant schmompliant!

I'm an avid fan of Cascading Style Sheets (CSS) but, like many web developers, was disappointed by the number of CSS properties that IE6 did not support. Never mind, I thought, IE7 will support them, then we'll be fine. How wrong I was. So far, I haven't found a single CSS property that I was hoping IE7 would support that is actually supported. Maybe it now actually now does correctly the stuff it always supported, but incorrectly, but it doesn't seem to have added anything new ... at least, nothing that I was hoping for.

Two examples, fixed positioning and the IE disappearing text bug.

Fixed Positioning

The idea of fixed positioning is that it enables a page element to be displayed in the same position on the screen (or, more correctly, "viewport"). This gives a simple method, avoiding Javascript, of creating those "sliding menus" etc. that always stay in the same position on your screen even when you scroll up and down ... such as those found on the British Royal Family's web site, for example.

In CSS, to achieve this functionality, all you have to do is assign the style "position: fixed" and then assign the left (or right) and top (or bottom) properties. This works great in Firefox and Opera but doesn't work at all in IE6 and still doesn't work in IE7!! Why? Isn't this supposed to be Microsoft's standards compliant browser?

Disappearing Text Bug

This is a pretty well-known bug in IE where by text in an element close to a floating div, just disappears ... though you can see if if you select the area of the screen where the text should be, using your cursor. The simplest way to fix this bug is to assign the style position: relative to the offending elements. This bug is a great annoyance, particularly when you primarily check your code in a non-IE browser. Surely IE7 would fix such a serious bug, so serious that it actually causes page content to disappear?! Well, yet again, just the other day as I was checking a new web page in IE7, I noticed text vanishing before my very eyes, so, good ole position: relative to the rescue.

Let's hope IE8 does a better job ... I wonder how long we'll have to wait.

Technorati Tags: ie7, internet explorer 7, internet explorer