How to use Alt Text for Images and why?

Alt Text for Images is a short alternative text description used when the image itself cannot be seen. It is useful to search engines and people with sight issues (or for everybody if the image does not load for some reason).

Wrongly “stuffing” the Alt Text with keywords is a common SEO bad practice. Using Alt Text as intended can be beneficial to SEO.

Also called Alt Tag, Alternative Text, Alt Attribute or Alt Description.

Alt Text and Accessibility for people with disabilities

Alt Text for Images is primarily there for accessibility purposes to provide a readable alternative to the image.

Blind and visually impaired people will use assistive technology like screen readers (text to speech browsers) which read aloud the text content of the web page. They can’t see the image so the assistive software will read the Alt Text instead to tell the user about the image.

Some people with certain types of cognitive issues may not understand the purpose of an image. They can see the Alt Text if they want help to understand.

Accessibility rules tell us that every image should contain Alt Text

This applies to every image that is a useful part of the content. The images that are there to enhance the text content.

Other images such as Background Images should be part of the CSS, not the content, so Alt Text is not applicable.

Images in the content but used purely for decorative effect or that add nothing useful to the content should still have an empty Alt Text which will then be ignored by the screen reader. However if there is no Alt Text tag at all then a screen reader will read the image file name which is not helpful.

By default WordPress will add an empty Alt Text tag to all images loaded into the content.

Alt Text should be meaningful in relation to the image and the context

The same image may have different Alt Text depending on the context and the surrounding information.

What meaning do you want your audience take from this image? Consider what the image depicts, why have you used this image and what will someone miss if they cannot see the image?

Alt Text should focus on the purpose of the image and not necessarily a description of what you see.

Functional images: An image used as a Button or a Link should have Alt Text to say what action will be initiated rather than a description of the image.

Complex images: Charts, graphs, and data visualizations require more than just Alt Text and will probably need a short description in the Alt Text and a Long Description elsewhere. See W3C Guidance on complex images.

Photo credits: belong in Captions (which appear in the text) not in the Alt Text.

Alt Text for Images should be short

Alt Text should describe an image in just enough detail to paint a mental picture without including unimportant information.

Be accurate but brief. Typically a few words should be enough but if you need a short sentence then do so. Screen readers usually cut off Alt Text at 125 characters. Images needing a longer description should be described in the text content leaving the Alt Text brief.

You don’t need to waste space with words like “This is a photo of…” or “illustration of…” unless it is especially important to point out it is a Photo or Illustration. Screen readers announce “Image” then reads aloud the Alt Text so you could also just be repeating yourself.

Don’t just repeat information

Alt Text should not repeat text information that is nearby. For example in the photo Caption.

Examples of Alt Text for Images

Which of the following gives you a mental picture of the above image?

• Mundesley beach scene
• tractor and trailer
• tractor and trailer on beach at Mundesley
• tractor and trailer waiting for fishing boat
• old tractor and trailer on beach waiting for fishing boat to return
• Mundesley summer beach scene – tractor waiting for fishing boat’s return

None are definitively right or wrong – it depends on the context of the image. On this site it means nothing more than “example of alt text”.

Images should not replace text (except for logos)

Where you want text you should use text rather than an image. I do use images with text in but they are for graphic effect, not as a replacement for text.

If you do use an image of text then the Alt Text should be the same as on the image but this only works if the text is short (under 125 characters). If you have more text than 125 characters and this text is useful information then it needs to also appear as real text on the web page. See Poster Images: How to add posters to websites correctly.

Alt Text and SEO

Alt Text (along with sensible descriptive file names) helps make your images part of the searchable content. Alt Text that accurately and concisely describes an image helps a search engine understand the image and the context. So it can give you an SEO boost.

Everything said about Alt Text and Accessibility still applies.

Using your keywords in Alt Text

Alt Text is often used in SEO as an additional place to hide keywords without spoiling the appearance or readability of the text content (except for disabled people).

Clearly this is wrong if you are just cramming (stuffing) in keywords that don’t really belong in the Alt Text from an accessibility perspective just to try to boost your SEO.

When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.

Quote from Google

This is right when the relevant keywords relate to the image and do not adversely affect the use of the Alt Text as a alternative explanation of the image for disabled people. It is then another signal to search engines that your page is relevant to a particular search.

Your first priority should be describing and providing context to the image for accessibility and only if it makes sense to do so, include your keywords in the Alt Text.

Carefully select images so the Alt Text will naturally include keywords as part of the description.

Focus on writing descriptive Alt Text that provides context to the image and if possible, includes your target keywords.

Use your keywords sparingly in Alt Text 

Prioritising keyword optimization over clarity and readability will hurt your accessibility. You should only include your main target keywords if they are easily included in your Alt Text.

If you have a number of images on the page don’t just repeat your keywords in each one. Think about synonyms or related keywords that are on subject as this will still help reinforce your SEO.

Alt Text for Product images

Images of specific products Alt Text should be detailed, include the full product name and the product ID so that it can be more easily found. If a suitable keyword phrase fits include this as well. (Remember the limit of 125 characters.)