What image alt text should I use?

Is the image relevant and important to the content?

If your image is part of the content and provides more context than the text alone then you should provide some alt text for the image.

🤖 Need some help? Generate alt text using machine learning

The image must in JPEG, PNG, GIF, or BMP format, less than 4MB in size and between 50 x 50 and 10,000 x 10,000 pixels

Tips for writing good image alt text

Take into account of the context of the image.
Make them short and descriptive.
Describe the image without users having to visually see the image.
Isn't just "image of" or "photo of".

If the image is a purely presentational and a text alternative is not needed, then simply add an empty alt attribute as follows.


                        <img src="/presentational-image.png" alt="" />

Examples of purely presentational images are dividers between sections or an icon next to text that doesn't provide any more context.

It is important that the image has an empty alt attribute instead of not having one at all, as some screen readers will announce the file name of the image if no alt attribute is present.

What is alt text?

Alt text refers to providing a text alternative to non-text based content such as images. For images this is usually done by adding an appropriate value to the alt attribute on an img tag.

Why is alt text important?

Alt text is important for two main reasons; accessibility and SEO.

For users of assistive technologies such as screen readers, alt text helps users to understand non-text content such as images without having to visually see them. In the Web Content Accessibility Guidelines (WCAG) 2.2 this is covered in Success Criterion 1.1.1 Non-text Content.

For SEO, it can help you images rank better in search engines and help drive traffic to your website.