Common mistakes

Accessibility relies on the proper use of code for the correct organization of content. Some particular tags and attributes are used generally, such as those delineating links, headings, paragraphs, and styles. Others have semantic uses that are more specific to accessibility. The alt attribute is one of these, and like many accessibility-oriented tags, it's misused almost as much as it's ignored.

alt abuse

The purpose of the alt attribute is to provide a textual description of images that are part of the content, as an alternative to the image. Users who are blind or who just don't have images enabled on their browser should see this text, while those viewing the images shouldn't (Internet Explorer doesn't honor this guideline and shows the alt attribute as a tooltip, along with the image). The following are common examples of misuse of this attribute.

• Entering alt text for spacer/layout images --- Just don't do it. It doesn't help anyone. Instead, you should leave the alt text empty. The proper format is something like <img src="layoutimg.png" alt="" /> You'll notice the alt attribute is there, but it's an empty string. This tells the browser that it's part of the visual layout, not the content, and should be ignored in cases where the visual layout is not rendered. Further reading and examples can be found on this 456bereastreet.com post (4th item on the list) .
• SEO overkill --- sometimes overlapping with the previous type of alt abuse, SEO overkill involves keyword stuffing into alt attributes. For example, an image of a woman petting a dog could have alt text like, "Woman petting dog" or "Susan with her golden retriever" since these describe the image in a way that is useful to someone who can't see it and may want to know what they're missing. A keyword-stuffed alt attribute of the same image might say something like, "Susan's Golden Retriever Training Kennel Columbus Georgia grooming obedience boarding labradors" because Susan wants her dog kennel business to come up for all those words on Google searches. This is not what the alt attribute is supposed to do, and it interrupts rather than enhances the flow of the site for those users who see the alt text instead of the image.

Mislabeled abbreviations

The <abbr> tag allows you to make your page more readable by using abbreviations for long terms, such as "CMS" for "Content Management System" or "pet. eth." for "petroleum ether". The proper syntax is <abbr title="petroleum ether">pet. eth.</abbr> to give the full text (such as the first time the abbreviation appears on the page) or simply <abbr>CMS</abbr> to let the browser know that CMS is not a word that, for example, a screen reader would necessarily know how to pronounce. This tag is useful to those using assistive technologies, as well as those who simply don't know what your abbreviations stand for.

• Inappropriate labeling --- I can't top the following example, so I'll just paste it here (via Bruce Lawson's blog): Let's go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr> With abbreviations expanded, it no longer says “Austin TX”, but instead it’s an incomprehensible string of numbers: "Thirty point three oh oh four seven four semi-colon minus ninety-seven point seven four seven two four seven". Is that accessible?