A picture may be worth a thousand words, but an image on your website won’t be worth anything to search engines or a vision-impaired person if it doesn’t have alt text.
What is Alt Text?
Alt text (short for “alternative text”) gives people and search engines a way to “read” images or audio clips on a website. Technically speaking, alt text is the alt attribute of the image tag. Its code looks like this:
<img alt=”This alt text describes what the image is” src=”http://whereimagelives.jpg”/>
Don’t know if your website’s images have alt text? Jump to the end of this article and learn how to check.
Help Visually Impaired People & Search Engines “See” Your Images
Search engines are blind when it comes to images, and so are some people. At least 10 percent of Web surfers use assistive technology to help them browse websites. Make sure your images can be seen by everyone.
Visually impaired people use screen readers that read text on websites to them, and hearing-impaired people use software to tell them what an audio clip is about. When you take the time to find and include an image on your website, including descriptive alt text ensures it’s visible and adds value for all your visitors.
For search engines, alt text is the one thing that tells them what an image is. Alt text can also help your website rank better in search results if you include the important keywords that best describe the image and its purpose on your site.
For example, a drug company’s website might include a chart showing the results of a clinical trial for its flagship product, MiracleDrug. The image will help a search engine understand what the page is about if its alt text says something like, “Chart of MiracleDrug clinical trial results.”
That same text will also help the web page rank higher in a web search or image search for the keywords, “MiracleDrug,” “clinical trial” and “clinical trial results.”
While including important and relevant keywords in the text of alt tags can help your site rank well for these keywords, don’t be tempted to stuff irrelevant keywords into alt text. This won’t help vision-impaired people understand your web pages, and search engines are smart enough to recognize keyword stuffing as an attempt to game search results. They won’t reward you for it.
Usability Perks of Alt Text
The “alternative” aspect of alt text has an added bonus for all people: If a website is loading slowly, or if an image fails to load, the alt text takes the place of the missing image.
A picture of hovering my mouse over an image to see its title text
The title text is similar to alt text and can be applied to both images and links. In many web browsers, title text provides a usability bonus I’m fond of: If you hover your mouse over an image, you’ll be able to read the title text. It’s like having an on-demand caption for images and links, which helps anyone, not just visually impaired people.
You can see how title text works in the image to the right by hovering your own mouse over the image.
You can use the same text for an image’s title text and alt text, or switch it up if you like, formatting it like this:
<img alt=”Alt text describes the image” title=”Title text will show up upon hover” src=”http://whereimagelives.jpg”/>
Adding Alt Text to Images on AboutUs.org
If you want to add alt text and title text to an image to the Wiki section of a page on AboutUs.org, follow these instructions and add the last part:
[[Image:FileName.jpg|Description of the image]]
Do Your Images Have Alt Text?
If you look at the HTML or source code for a web page*, you can look at the code for each of your images (they’ll start with <img ) and see if they all have something like this within the tag: alt=”the alt text”. If you don’t see an alt attribute, or if there isn’t text describing the image in the quotes after alt=, then that image doesn’t have alt text.
*Viewing this depends on the web browser you’re using. In Firefox, click Tools > Developer > Page Source. In Chrome, click View > Developer > View Source.
Want another way? The free Home Page Analysis section on every website’s AboutUs.org page can tell you whether images on that website’s home page have alt text. Check it out by searching for your website at the top right (example: MyWebsite.com) and click the “Home Page Analysis” tab in the left-side navigation. Then click on “Links & Images”.
How To Add or Change Alt Text
The HTML for an image with alt text will look like this:
<img alt=”This alt text describes what the image is” src=”whereimagelives.jpg”/>
If you can edit the raw HTML code for your images, you will add alt text by adding the alt=”This alt text describes what the image is” part. To improve or change the alt text for an image, find its HTML and change the part in quotes after alt=.
If you use a content management system (CMS) that makes it easier and keeps you from having to dive into HTML, you will want to go into the edit or settings mode for that particular image. There should be a field called “alt text”, “image description” or something similar that you can fill in.