Blog
How to Maximize Alt Text and Why it's Important
There's a lot to consider when delivering image content to your audience. We take a deep dive into alt text and why it's so important.
There's a lot to consider when delivering image content to your audience. We take a deep dive into alt text and why it's so important.
September 9th, 2022
There's a lot to consider when delivering image content to your audience. We take a deep dive into alt text and why it's so important.
There’s a lot to consider when delivering image content to your audience. One of those things is alternative text, or alt text . Alt text is an HTML meta attribute attached to an image. The purpose of alternative text on images is to make them more accessible to the screen readers and search engine crawlers that will eventually digest your web content. Helping users understand the image and other content associated with it is the key purpose of alt text.
According to the CDC, 61 million adults in the United States live with some form of disability; that’s about 26% of the adult population, or one in four people! That means a significant portion of the population requires assistive technologies to comfortably navigate websites and applications.
An example of someone benefiting from alt text is if that person had limited vision and chose to use a screen reader to surf the web. The screen reader would read aloud the image meta provided in the alt text thereby making that image more accessible. By making your content accessible to screen readers you are making your content accessible to a bigger group of users.
Enriching your images with alt text will improve your search engine optimization ranking. When a web-crawler crawls your content it uses the image alt text to determine ranking and relevance. Including relevant keywords within the alt attribute will improve your chances of ranking higher for your targeted keywords.
<img src="puppy-laying.png" alt="dog laying">
The alt text in this example is “dog laying” and is defined within the HTML “alt” attribute of the “img” tag, “src” specifies the path to the image.
<img src="adorable-puppy.png" alt="dog laying on sofa">
The alt text here is good because it is relevant to the image and gives context to the reader.
<img src="adorable-puppy.png" alt="dog">
The alt text here is okay because it is relevant but it could have more context.
<img src="puppy-laying.png" alt="">
Bad because the “alt” attribute is left empty and offers no context to the reader.
<img src="puppy-laying.png" alt="image for article">
Bad because the “alt” attribute offers no context to the reader.
<img src="puppy-laying.png" alt="">
Bad because the “alt” attribute is left empty and offers no context to the reader.
Tip: Create a tooltip for an image by using the “title” attribute.
Articulate to convey meaning in context
Shorten alt text to less than 125 characters
Include meaningful keywords
Avoid using the same alt text for different images on the same page
Alt text that is too general to extract meaningful information
Using alt text that is user-unfriendly and difficult to read, e.g. word soup titles like ‘photo-image-12-12-2022’
Browsers like Google Chrome have Inspect tools to assist with spot-checking images. Auditing tools are available to test your content too.
Checking if an Image Has Alt Text Using a Desktop Browser Tool by Inspecting It
On a webpage, right-click the image you want to see the alt text for.
On the menu that appears, select inspect HTML. In Chrome or Firefox, select "Inspect." For Edge, choose "Inspect Element."
A pane displaying HTML should appear. Look for the HTML tag that says "alt=." What follows will be the alt text description
