Sanna Kramsi - I would if I could a guide to web accessibility

Image accessibility

Images must always have an alt attribute in the HTML, if the attribute is completely missing, you will fail criterion 1.1.1 (Level A), which covers non-text content. The alternative text (or alt text for short) is added to the alt attribute. Decorative images should not have alternative texts, the alt attribute should be null or empty. That way screen readers can skip them. Non-decorative images should always have alternative texts so that everyone can get the information. I have written a blog post about alternative text for images, check it out if you want a bit more information than what is on this page.

What is an alternative text?

The alternative text is a concise written description of an image. The point of the alt text is to convey what is in the image when it can't be viewed.  Well-written alt texts are crucial for accessibility, but good alt texts also improve search engine optimization (SEO).

Good alternative text

The alt text of an image can vary depending on the context but the main point is that you should be able to know what is in the image by reading the alt text.

The alt text should not contain the word "image" or "image of". The screen reader will tell the user that it's an image.

The alt text should only be a sentence or two, often only a few words are enough. Keep the alt text short, the recommendation is under 125 characters. If you need a much longer description, add it on the page instead and leave the image alt text empty. Also, if you have the same info on the page that you would add as the alt text, leave the alt text empty in that case. It will be an unpleasant and confusing experience for the screen reader users if they get the same info twice.

Text in images

Using images to present text should generally be avoided. Text in JPGs, GIFs, and PNGs cannot be resized and becomes pixelated when zoomed. Text in images cannot be read by screen readers or search engines. If you have to have text in an image, it is recommended to use Scalable Vector Graphics (SVG). There is a testing tool for text on background images, I recommend using it if you plan on adding text on images.