The benefits of using ‘Alt attributes’ – improving accessibility and SEO

Well-chosen images to accompany your blog articles, social media posts and web pages will grab attention, reinforce your message, and enrich your online content.

High quality, relevant images will also improve your positioning in image search results.

Alt (alternative) attributes (sometimes mistakenly called tags) are text that describes an image on a web page.

By including alt attributes for your images, you not only improve the accessibility of your online content, you can also positively influence your SEO.

Here we explain how alt attributes achieve this and how to approach writing them.

Why include alt attributes?

Using alt attributes will bring two main benefits for your online content:

1.     Accessibility

Screen readers are software programs that enable blind or visually impaired users to access online text, via a speech synthesiser or braille display.

The image alt text informs the screen reader about an image by describing it in succinct, but highly accurate text. The image description is then relayed to the user. 

Other accessibility issues can occur if an image fails to load due to poor internet connectivity – in these situations the alt text is visible, ensuring that the image description and its purpose are still clear to the user.

2.     SEO

Google uses alt attributes to understand not only what the image shows, but its context, ie how it relates to the surrounding text.

Providing search engines with an image description enables better understanding of online content, which means more accurate indexing, possible ranking improvements – particularly for image searches – and increased organic traffic, especially when relevant keywords are included as part of the alt attribute.

How to write alt attributes

The key to writing effective alt attributes can be summarised in two words: descriptive and concise.

Not every image needs to have an alt attribute. Alt attribute text should be thought of as part of your online content, therefore it needs to add value to the user experience.

Which images need alt attributes?

Decorative images

A decorative image, which is there purely as a design device for the page, does not need alt attribute text. An example might be a border, an underline, or a design device that ties in with the logo or wider brand collateral.

Descriptions for decorative images can be distracting and confusing for users with visual impairments, and superfluous when a page fails to fully load.

(Note, it is best practice to code decorative images as HTML background images, which don’t have alt attribute fields).

Meaningful images

Alt attribute text should be written for images that provide meaning to the user. In these situations, an alt attribute is essential for the sight-impaired so they can use the site just as well as any other user.

For example:

• An image depicting statistical information should accurately describe the figures and what they are demonstrating, if this information is not addressed in the surrounding text.
• Icons denoting site functionality or signposting should be obvious to the user to help them navigate effectively.
• Photos that support the surrounding text should be accurately described, helping to underpin the message.

What text to include in alt attributes

When images are included in online content, their context is key.

The surrounding text and the audience should be considered when writing alt text, as well as the purpose of the content.

For example, the image below shows:

‘An attractive detached brick-built house, with large windows’.

However, for the replacement windows company, it is important that the alt text is more specific:

‘A spacious detached brick house with many large replacement, aluminium Crittall-style windows, which are black powder-coated’.

This not only accurately describes what is being shown, it underpins the message that would be provided in the accompanying text.

Keywords

Adding relevant keywords to alt attributes can support SEO, and help your images rank more highly in Google image search results. 

Including keywords such as ‘aluminium windows’ and ‘Crittall-style’ for the image above is accurate, and also beneficial from an SEO perspective.

However, keywords should always be used concisely. ‘Keyword stuffing’ is the excessive use of a keyword or phrase for SEO purposes. This creates a poor user experience for visually impaired people, and the alt text itself will read in an unnatural and unhelpful way. 

What not to include in alt attributes

To ensure that alt attribute text is both concise and helpful to the user, there are certain elements that do not need to be included:

• Photo credits and copyright information should be included in the image caption, rather than the alt text.
• It isn’t necessary to write ‘image of’ or ‘photo of’; these words are generally redundant.

125 character limit

Many screen readers have a limit of 125 characters (including spaces) for alt attribute text, therefore it is good practice to keep to this limit – it is also very much in the spirit of keeping text descriptive, yet concise.

Complex images

For complex images that may include substantial information that cannot be conveyed within the 125 character limit, such as graphs or diagrams, two-part alt attribute text is recommended.

The first part of the alt text is a short description to identify the image, the second part is a longer description detailing the full information depicted.

For further information, see: https://www.w3.org/WAI/tutorials/images/complex/

Alt text examples

Below are three image examples, each with two versions of alt text.

The first describes the image at an accurate, but basic level, the second includes relevant keywords that will drive SEO along with descriptive, helpful text that will enhance the user experience.

Alt attribute version 1

Window seat.

Alt attribute version 2

Handmade cabinetry seat for bay window, with comfortable seat pads and scatter cushions, concealing bespoke storage within. (122 characters)

Alt attribute version 1

Man cutting hedge.

Alt attribute version 2

Expert using a hedge cutter to shape a topiarised tree, alongside a neatly cut hedge. (84 characters)

Alt attribute version 1

Wedding cake.

Alt attribute version 2

Beautiful three-tiered bespoke wedding cake with naked frosting, fresh berries and chocolate drips. (98 characters)

Alt text and best practice

NASA’s alt text descriptions of the spectacular images captured by the James Webb Space Telescope, in July 2022, are one of the best possible examples of the value of alt text.

NASA firmly believes that the beautiful, ethereal images captured should be for everyone, and a visual impairment shouldn’t be a barrier to experiencing them.

Here is one of the spectacular images with its alt attribute text below:

A dramatic blade made of red gaseous wisps comes down top-to-bottom in the center of the image as smaller green wisps feather out in horizontal directions. A bright star shrouded in blue light is near the center of the bow-like blade. Blue dots in different sizes dot the background of the image, signifying neighboring stars.

Read more about NASA’s approach to alt text descriptions for the Webb Telescope images.

Supporting you with SEO and accessibility

To ensure that you’re making the most of every opportunity with your online content, we can run an SEO audit to assess the presence and quality of image alt attributes.

We’ll make recommendations for improvements, both for accessibility and SEO purposes.

Please contact us to chat though your requirements and find out more.