If you're new here, you may want to sign up for email alerts or to subscribe to my RSS feed.

WAI Logo.

To understand the idea of web accessibility we first need to understand its purpose: to improve the accessibility of the websites for people using different devices, not just web browsers. These include, but are not limited to: mobile phones, text-to-speech software, text-to-Braille hardware and other hand-held devices.

Contrary to popular beliefs, web accessibility is not exclusive to people with disabilities, but it is aimed at improving the web for all the users that need access to information on the Internet.

Although W3C, the entity that first started the Web Accessibility Inititative (WAI) is pretty clear in its guidelines, there are still many misconceptions about some aspects related to accessibility. I will try to address some of these in a series I call “Demystifying Accessibility Myths.”

Today I will speak about the use of “alt text” - that piece of code that explains the content of an image for people who have images turned off in their browsers.

To correctly place the alt attribute into an image source, your code will look like:

<img src=”http://yoursite.com/image-name.jpg” width=”100″ height=”100″ alt=”compelling image description.”/>

Use of Alt Text Is NOT Synonym with Accessibility

“Always use alt text” some so-called accessibility gurus will tell you, but the truth is that the use of alt attributes is not always compliant with the W3C accessibility standards.

An image description is only valuable when it completes the text on the page. If the image repeats words that are already present in the context, the value of the alt attribute is close to zero. For the visually impaired users repetition can be confusing, especially when the web coders forget to add that simple dot to end the description of the image.

In many situations we deal with websites using graphics that have no meaning whatsoever: empty images acting as “spacers”, horizontal lines and other elements of design. These are exceptional situations when alt must and should be omitted.

However, depending on the markup used to code the sites (for example HTML 4), omitting an alt attribute could cause the site to no longer comply with the W3C HTML validation standards. Valid HTML is important to help the browsers understand the web pages so it is not synonym with accessibility, but it is generally agreed that valid HTML is one step closer to complying to the WAI rules than broken code.

HTML stands for HyperText Markup Language, so logically something needs to “read and understand” that language. Unlike people, browsers do not have dictionaries. They follow some rules and when the language they suppose to be reading is misspelled or incomplete, they cannot make any sense of the content and they will display the pages with errors of layout or sometimes they will freeze and not display the page at all.

Many web designers still ignore the importance of valid HTML saying: “it’s not the code that matters, but the way the page looks in the browser.”

OK, in which browser? How many do you know: Internet Explorer, Firefox, Opera, Safari, etc. Invalid HTML will look and act different in each of these browsers. Invalid HTML will even confuse user agent devices used by people with disabilities. So it is preferable to keep your site HTML compliant.

A missing alt attribute is not a critical error, but it is an error nevertheless. So, how do you keep a site accessible when an alt attribute would only be detrimental for accessibility purposes but the absence of the alt attribute will create HTML validation problems?

Well, if the only problems on your site are the alt attributes then focus on accessibility. Non-passing a HTML validation test because of such minor errors will not affect your site’s look in any browser. If you include an alt attribute that has no meaning whatsoever you only hurt the users. What would an alt text saying “empty gif.” bring of value to the page? Who wants to know that you have an “empty gif.” on your site anyway? How is this relevant to your message and to the content of the page? Such alt attributes are useless.

If on the other hand you want to keep your site HTML compliant no matter what, but you also want to adhere to the WAI guidelines as closely as possible, then opt for a different site design that doesn’t require clear pixels and empty images or ask your web coder to use HTML5 or XHTML2 where omitting alt attributes will not generate HTML validation issues.

Alt Text Is Not SEO

Alt text is also useful for the search engines as it will help the bots understand the content of an image. There are no search engines able to index images based on pixel data. Until this technology is perfected the only ways to make a search engine correctly index an image is to provide the right image files names, proper alt attributes and to ensure that they blend harmoniously with the rest of the content on your page.

“Alt” stands for “alternative” hence “instead of.”

As you could see above its main purpose is not SEO. Of course, your SEO efforts can benefit from the use of alt attributes but don’t mistake using “alt text” for an SEO magic answer to your ranking problems.

Do not stuff the “alt text” with keywords, do not place there descriptions irrelevant for the content of the image - these are not good accessibility practices and in the long term they might even hurt your SE rankings, as any form of spamming does sooner or later.

UPDATES: