Image Files

For images (and other non-text content), you must provide a text description of the content contained within the image. This text description serves as an alternative to the visual experience; hence it is called alternative text or alt text.

You must provide text alternatives for any non-text content. This encapsulates many components and situations, such as images, charts, or decorative elements.

Best practices

When writing alternative text include:

  • Be concise - Long alternative text can make it more difficult for a screen reader software user to get through a page. Try 125 characters max.

  • Don’t duplicate nearby text - If you do, the information will be read twice by a screen reader.

  • Avoid using “picture of…” or “graphic of…” - For any element, a screen reader will announce the element type, so there is no need to be repetitive.

  • All alt text should end with a period “.” - Screen reader will pause after reading.

File name:

  • Keep file name short

  • Don’t use punctuation and special characters

  • Stick to lowercase for all words

  • User hyphens to separate words

 

Decorative Images

If an image is only for decoration, like a background or a pretty image (eye-candy), and it doesn't add any useful information. You don't need to provide a description for it.

Complex Images

Images that contain a lot of visual information (such as graphs, charts, diagrams, or maps) must include both a short alternative text and a longer description that explains all the key details. The long description must either appear right next to the image or be immediately accessible via a link placed after the image.

Linked Images

Linked images must have descriptive text. Images used as links cannot be decorative because their alt text is read aloud by screen readers as the link text.

Images of Text

For images with text, If the same information can be presented using text, use regular text instead of an image of text. The exceptions are images that are customized or essential.

Customized: When the image is uniquely designed and cannot be exactly reproduced with text.

Essential: When keeping the original look is crucial for its meaning (for example, logos).