What is Image Alternative Text?
Image Alternative Text, or “Alt Text” provides a textual alternative to an image on your web page in cases where the user cannot view the image.
As a textual alternative to an image, the role of Alt Text is to clearly and concisely describe the purpose of the image on the page. This may include both its contents (What does the image show?) and its functionality (What happens if the user clicks on the image?)
Alt Text is often presented and utilized in cases where the user is:
- Browsing the web with images disabled, or
- Visually impaired, or
- A robot.
Unlike headlines and body copy, Alt Text is not normally visible on web pages for most users. Instead, each image has its own Alt Text which exists as a hidden HTML attribute.
Screen reader programs and search engine web crawlers that don’t have the ability to parse the meaning of an image will instead access its Alt Text and either read it to the user or process it to better understand its contents and purpose on the page.
Adding Alt Text to Images on Your Website
In HTML5, all image elements on the page are required to have an alt attribute where the publisher can include alternative text. Alt attributes can be (and sometimes should be) left empty, but they should never be entirely absent from an image.
If you’re coding directly in HTML, you will need to include an alt attribute when adding an image element to the page. Your code might look something like this:
<img src=”mydog.jpg” alt=”My Dog” width=”1240” height=”960”>
If you’re using a content management system (CMS) like WordPress, Wix, or similar, you should have a user interface option to input Alt Text, either when you upload an image to the CMS, or when it gets added to a page.
Why is Image Alternative Text Important?
Accessibility
Alt Text is a crucial component of web accessibility.
Users with visual or cognitive impairments may browse the web with the help of a screen reader that converts text on the page into an audio output. Screen readers can’t do this with images, so instead, they read the image Alt Text to the user. This allows the user to discover the contents and purpose of an image, even if they can’t see it directly.
If the image alt text is missing, empty, or poorly written, the user misses out on any content or functionality the image provided.
In some cases, improper Alt text can have a significant negative impact on user experience for visually or cognitively impaired users. For example, stuffing the Alt text with keywords means that a screen reader will take longer to read it, preventing the user from discovering the actual relevant content on the page.
Search Engine Optimization
Image alt text also plays a role when optimizing your web pages for Google Search.
Search engines use web robots called crawlers to scan the contents and structure of your website for indexing and ranking purposes.
And just like screen reading software, crawlers can’t directly parse what an image means or how it relates contextually to the content on your site. Instead, crawlers use other information like image titles, file names, and image alt text as clues about the contents of an image.
With that in mind, including target keywords in your image alt text can provide Google with a stronger signal about the contents of your page and may help with your rankings in Google Image Search.
Google is also getting more focused on UX when it comes to ranking pages in the SERPs. Deploying high-quality image alt text across your website creates a better experience for users, impacting downstream metrics like bounce rate and time-on-page that figure into Google’s SERP ranking algorithm.
4 Simple Rules for Adding Alt Text to Your Images
All Images Get an Alt Attribute
Every image on your website should have an Alt attribute. While it’s usually best to include some image alt text, alt attributes can sometimes be left empty (more on that shortly) – but should never be entirely absent.
Text Should Present Content and Function of Images
As a general rule for ensuring accessibility, the text on your web page should present the entire content and function of all images on the page.
This means that the alt text, together with the image title, caption, and body copy, should capture the entire contents and functionality on the page. This practice ensures that no content or function will be lost if the image cannot be displayed.
Alt Text Should Be Descriptive, But Not Redundant
Alt Text should describe the contents/function of the image on the page, but there’s no need to repeat information that appears elsewhere on the page. There’s also no need to include the phrase “image of…” or “picture of…” in the image alt text.
Publishers should be as concise as possible when adding image alt text. A few words, or in rare cases, a sentence or two, should be enough to convey the meaning of an image in simple terms.
Empty Alt Attributes are Sometimes Okay
If the contents and purpose of an image are adequately described by its caption or the body copy, it might be acceptable to leave the image alt text attribute empty.
When an image is included on a page for decorative purposes only, the image alt attribute can be left empty as the contents of the image have no relationship to the contents of the page.
For even more detailed guidelines on writing Image Alt Text, visit WebAIM.
5 Alt Text Examples from Worst to Best
Check out these five examples of Alt Text for the image below, arranged from “worst” to “best”. For each example, we’ll explain why the image alt text is good or bad and the overall impact on user experience.
Worst: (alt=”picture of a tiger, lion, cheetah, orange, black, white, paws, tail, stripes, snow, grass, woods, running, leaping, bounding, tiger lily, tiger moth, tiger habitat”)
This is an example of keyword-stuffing the alt tag. A screen reader would read the entire contents of this tag before getting to the rest of the page, forcing the reader to wait to discover any useful content. This image alt text does not accurately convey the contents/purpose of the image.
Bad: no alt attribute
Just marginally better than our worst example, having no Alt attribute is also pretty bad. It means that both visually/cognitively impaired users and web crawlers will end up clueless about the contents and purpose of this image.
Neutral: (alt=””)
If this image were purely decorative, or if its contents were already described on the page, it would be fine to leave the image alt attribute empty. Otherwise, images with relevant content or a purpose should always have alt text added. If we imagine this image on an Encyclopedia page
Good: (alt=”Tiger”)
Alt text should typically be a few words or a short sentence, so just adding the word “Tiger” is a great start. However, depending on the contents and purpose of the page, it might be appropriate to include more details in the Alt Text.
Best: (alt=”Siberian Tiger Hunting in Snow”)
This alt text example is short and concise while being highly descriptive of the associated image. As long as the information provided here is not redundant with the body copy on the page, this alt text should work well for both human users with screen readers and for search engine crawlers.
