The proper use of alt text

May 5, 2023
Steve Turnbull
<< back to resources
The proper use of alt text for accessibility

When adding images to a website, it's important to use "alt" text to describe the image. This is especially important for visually impaired users who rely on screen readers to navigate the web. By providing descriptive "alt" text, you can ensure that all users are able to understand the content of your website.

However, there are times when using "alt" text may not be necessary. For example, if your website includes decorative images such as background patterns or icons used for visual design, using a blank "alt" attribute is appropriate. This tells screen readers to skip over the image and not read it out loud, allowing users to focus on the main content of the page.

Here are some examples of when to use "alt" text and when to use a blank "alt" attribute:

When to use alt text

Use "alt" text when an image conveys important information: For example, if you have an image of a graph or chart that shows data, it's important to use "alt" text to describe what the image represents. This allows visually impaired users to understand the data without needing to see the image.

When to use a blank alt text

Use a blank "alt" attribute for decorative images: If you have an image that is purely decorative, such as a background pattern or icon used for visual design, it's appropriate to use a blank "alt" attribute. This tells screen readers to skip over the image and not read it out loud, allowing users to focus on the main content of the page.

Improved accessibility

By using "alt" text appropriately, you can improve the accessibility and usability of your website. This not only benefits visually impaired users but can also improve your website's SEO by providing more information for search engines to index.

However, it's important to use "alt" text appropriately and only when it provides value for the user.

Side note - don't stuff keywords into alt text

If you are wanting a page to rank in search engines for a given keyword, don't add alt text purely to add that keyword. By all means use the keyword, but only if it adds value and helps to explain the image.

But it’s getting flagged as an issue?

It's possible that some website crawlers like Ahrefs, SEMRush and Screaming Frog might flag the use of alt="" as a potential issue to be addressed, as they may consider it to be an incomplete or missing alt text. However, it's important to note that in some cases, using alt="" for decorative images is actually the correct and recommended approach according to web accessibility guidelines. If the image does convey important information, then a more descriptive alt attribute should be used instead.

Essentially, it's important to use human judgement and knowledge of accessibility guidelines to determine whether flagged issues are actually problematic and need to be addressed.

By following these guidelines, you can ensure that your website is accessible to all users, regardless of their abilities.

If you would like to chat to us about your website accessibility and SEO, get in touch.

Tell us what you like, we'll make it happen