Describing Your Images for Better Web Accessibility With Alt Attributes

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Describing Your Images for Better Web Accessibility With Alt Attributes." ThoughtCo, May. 15, 2017, thoughtco.com/describing-images-for-better-web-accessibility-3466479. Kyrnin, Jennifer. (2017, May 15). Describing Your Images for Better Web Accessibility With Alt Attributes. Retrieved from https://www.thoughtco.com/describing-images-for-better-web-accessibility-3466479 Kyrnin, Jennifer. "Describing Your Images for Better Web Accessibility With Alt Attributes." ThoughtCo. https://www.thoughtco.com/describing-images-for-better-web-accessibility-3466479 (accessed October 20, 2017).
Caucasian photographer taking picture of crab on beach
Jeremy Woodhouse/Getty Images

One of the simplest ways to make your website more accessible is to use an alt attribute in your image tags. It's amazing to me how many people forget to use this simple attribute. In fact, now, if you want to write valid XHTML, the alt attribute is required for the img tag. And yet people still don't do it.

What Is the ALT Attribute?

The alt attribute is an attribute of the img tag and is meant to be an alternative for non-visual browsers when they come across images.

This means, that the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.

Many browsers also display the alt text when the customer rests their mouse on the image. This means that the text should be clear and easy to read and not create a huge popup nightmare for any reader pausing their mouse on your page.

Adding alt text is simple, simply use the alt attribute on your image. Here are some tips for writing alt tags:

1. Be Brief

Some browsers will actually break if the alt text is too long. And while it might seem nice to describe what is exactly in the image, that's not the purpose of the alt tag. Instead, it should be filled with exactly the words needed to put the image in context and no more

2. Be Clear

Don't be so brief that the context is confusing. Remember, some people will ONLY see the text in your alt tags, so if it's too brief they might not understand what you're trying to show them.

For example:

  • a tree -- good
  • a sycamore tree -- better
  • a 10-foot tall sycamore tree with mostly brown leaves and possibly something wrong with its bark -- too much

3. Be Contextual

Don't describe the image if it's meant to be viewed in context. For example: If you've got an image of the company logo, you should write "Company Name" and not "Company Name Logo."

4. Don't Display Your Site's Inner Workings

If you're putting in spacer images, just use a space for your alt text. If you write "spacer.gif" it just calls attention to the site, rather than providing useful information. And technically, if you're trying to write valid XHTML, you should use CSS rather than spacer images, so you might as well leave the alt text off of those images.

5. Be Search Engine Conscious

If you have good, concise, clear alt text, that can actually help your search engine rankings, as the images on your page promote and enhance your keywords.

6. Don't Use It Only for Search Engine Optimization

Many sites think that if they use alt text as an SEO tool, they can "fool" the search engines into optimizing their site for a keyword they don't have there. However, this can backfire if the search engine decides you are trying to fake your results and removes you from the results completely.