Proper Use of ALT Text in HTML

The alt attribute in HTML is one of the most improperly used HTML code elements. Either webmasters completely neglect to use it or simply use it in a way in which it was not intended. But by using it properly, you can take advantage of SEO benefits and achieve greater accessibility.

Purpose of ALT Text

The ALT attribute is used to specify alternative text.The HTML Specification from W3C states:

The alt attribute specifies alternate text that is rendered when the image cannot be displayed. User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

So in short, ALT text is used when images cannot be displayed or loaded. For example, this situation might occur if users opt to use a text-only browser, are on a slow internet connection, or if the web server is unable to serve images.

Proper Use of ALT Text

Below, we’ve listed a few cases you’ll encounter and how to use the ALT attribute.

1. Meaningless or decorative image. Sometimes, you will have an image that is used as a spacer, a bullet, or is used for some creative effect. In this case, you’d simply specify a blank alt attribute, like this alt="". (For bullets, you may also use an asterisk, like this alt="*".)
2. Image contains meaningful text. When your image contains text, you should put that text in the ALT attribute. Similarly, if you use an image as a link, the ALT attribute should contain the text in the image, or the link text that you would have used had you not chosen an image.
3. Image contains meaningful non-textual information. Sometimes, an image may not fall into either of the above categories. This might be the case if it is a photograph or a graph, or some other type of informational image. In this case, the appropriate ALT text would be a brief description of the image. For a graph displaying Boston temperature data, for example, you might write alt="Boston has seen steady temperature increases during the past decade." If, however, you want to supply a simple description, you could use square brackets and use the alt attribute like this, alt="[Graph of Mean Temperature in Boston, MA during the 1990's]".

In addition, there are two guidelines that should be followed. First, alt text should be kept to under 50 characters. And second, you should avoid using specialized symbols. If you need to include a symbol, consider a textual alternative.

Once you get familiar writing alt attributes, you will find that they are very easy to use and make the page very accessible for all users. Additionally, they have great search engine optimization benefits. Images, for example, cannot be read and interpreted by search engines. But alt text can. And finally, alt text is required by the W3C specification for valid html.