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.
Great post Mig. If there is an image that was sort of vague would you ever consider using an empty alt tag? like alt=”” – That way it would validate but not be seen by search engines?
It is true that the search engines and the user agent software will ignore them. I prefer not to use empty tags and attributes – they are misleading and they look like sloppy work – but this is only my perception. 🙂 (Btw, I read “unspecified” instead of empty – LMAO)
Here is an alternative from W3C:
Speaking about empty tags… why didn’t you link to your site?
Great insights but some confusions though:
“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.”
— Is this there any solidly confirmed source for this? I’d seriously give it a shot if it’s said by Matt Cutts.
“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.”
— I thought alt attribute is indispensable for all images in XHTML 1.0 Strict or the document won’t validate.
Oh, Yang so if it comes from the Google guy it’s the gospel for you. Well, Matt Cutts knows probably more about Google than he knows about accessibility and in case you didn’t notice, this is the topic of the discussion. In my comment above yours you’ll see the valid source of my statements. You see, I am not reinventing the wheel here, I am just trying to help people like you understand accessibility, which, I repeat, has nothing to do with SEO or with the Google guy.
Styling elements should be separated from content so images used for styling purposes should be added using CSS. This not only avoids having to use the alt attribute (overcoming validation problems) but creates cleaner html for accessibility purposes. (I have not used spacer images for years and the styling options that made the hr tag useful are now deprecated.)
You say Alt is not SEO. I think we could consider it, anything that is text in the page is SEO. The content itself is SEO, as long as you write what is needed there, is SEO and ALT is considered also a SEO element. Think of it this way: you make a website and don’t put ALT on images and then you send your site to somebody to optimize it. What will be one of the first thing to observe? You don’t have ALT on images, you should have relevant text on any image. Not for the sake of accessibility but for SEO…
You are right, Sue, this is pretty much what I do too. Only that when an image is very important for the context, it should be added. See the article Learn how to Create Effective Alternative Text at WebAIM. in the updates list.
Evenflo, if that’s your experience with SEO it is very unfortunate. Img alt is today misused for SEO – its main purpose was not SEO and this is what you should understand.
I said already that ALT helps SEO, what I mean by this article is exactly what I wrote: don’t mistake using “alt text” for an SEO magic answer to your ranking problems.
I have never tried this before Mig. I really appreciate the post. I have been self learning anything SEO lately to help out my t shirt site without paying high costs for someone else to do it. I love the blog and am a big fan of Cigars too. Smoke’em if you got em.
Thanks for this great and thorough explanation about the Alt Tag Attribute. I’m also new to SEO and I’m still doing a lot of research to understand further about the important details. And with your article I learned something new today. 😉
I didnt know anything about Alt Tag Attribute.thanks for the tips.By the way i didnt know that i shouldn use keywords so i changed it.Sorry again
I didn’t say you shouldn’t be using keywords at all – just use them if they are relevant to the content of the image.
I disagree used correctly and not stuffed, alts do help you out and I wouldn’t do an image or header without one. Plus when at image is broken it helps you find the mess up in your code.