What is the ALT Attribute?
Alt Attributes are text that describes an image. They are helpful to search engines and visually impaired visitors.
An alt attribute is the “alternative” text version of an image that is displayed on a website when an image is not available or when a visitor wants the text alternative. Below in bold is what an alt attribute looks like in HTML:
<img src="book.gif" alt="opened leather journal" />
Alt attributes benefit three primary groups:
- visually impaired visitors
- search engines
Visually Impaired Visitors
Alt attributes provide visually impaired visitors with an alternative to images. This allows visitors to use programs that read text out loud to understand what images add to content.
For instance, visually impaired people are at a disadvantage when browsing a website that use images for navigation, since they don’t have a way of knowing the main categories of the website. But, if images have alt attributes, there is a way to figure out the purpose of these images.
The alt attribute helps search engines decipher the subject of an image so they know when to include an image in relevant search results. This makes images with alt attributes more likely to be found.
It is a best practice to use alt attributes with relevant images, since alt attributes are more likely to rank higher in search results. Google Image search gets well over 1 billion page views a day. Optimizing your images could bring you a greater slice of this traffic.
More eyeballs on your images can increase brand awareness if your images showcase your brand. Additionally the higher your images rank in image search, the more likely people will click through image results and visit your pages. So, optimizing images can result in higher traffic to your website.
A Short Technical Guide
The alt attribute is used within the image tag within HTML.
HTML is a formatting language. Its primary role is to explain to programs like Chrome how to arrange design elements like images and text on a webpage. HTML is made up of different tags that explain what should be displayed and how.
If you want to see what HTML looks like, edit a blog post in WordPress and click the Text tab to show the HTML version of a blog post. One common HTML tag you’ll likely see is the image tag. It looks like this:
The attributes within a tag specify what is displayed and how it looks. Within the image tag, the src attribute (short for source) explains which image to display. The image tag below has a src attribute which specifies that the book.gif image should be displayed.
<img src="book.gif" />
There are lots of other image attributes. For instance, you can specify the height and width of an image with attributes.
<img src="book.gif" height="200" width="100" />
The alt attribute in particular is the text alternative of an image. Typically alt attributes explain what an image is. Here is an example of an image tag using the alt attribute.
<img src="book.gif" height="200" width="100" alt="opened leather journal with writing in it" />
People often incorrectly use the terms “alt attribute” and “alt text” interchangeably. Alt text is the value the alt attribute specifies. Smily face is the alt text specified within the alt attribute alt=”Smily face”.
The term “alt tag” is incorrect usage and a melding of two separate terms. The alt attribute is a type of attribute used within the image tag. Technically, “alt tags” don’t exist even though they are used to commonly refer to alt attributes and/or alt text.
Alt Attribute Resources
- Google’s Image Publishing Guidelines
- W3C’s technical guide to Alt Attributes
- Image Accessibility Tips From Penn State
- How to add alt attribute to images in WordPress
- Alt text
- Alt tag