Image text alternatives...

  • convey the purpose of an image, including pictures, illustrations, charts, etc. Text alternatives ("alt text") are used by people who cannot see the image. For example, people who are blind and use screen readers to hear the alt text read out.
  • the text should be functional and provide an equivalent user experience, not describe the image literally. For example, appropriate text alternative for a search button would be "search", not "magnifying glass".
  • you do not usually see the alt text on a web page, it is in the web page markup.
    (like this: img src="pointer_to_image.png"alt="here's where the alternative text goes").

Image type

  1. Informative images
  2. Functional images
  3. Complex information graphs
  4. Decorative images
 

Informative images

Example

UBS headquarter flagged with pride flags, Zurich

Alternative text: "UBS headquarter flagged with pride flags, Zurich"

Example

David James and Malcolm Gordon discussing at a table

Alternative text: "David James and Malcolm Gordon discussing at a table"

 

Functional images

Example

QR-code for Web publishing guidelines

Alternative text "QR-code for Web  publishing guidelines"

For QR code-images add an alt-text: alt="QR-code for X" where X is a short description of the link target or function.

Note: QR codes on web pages can't be scanned when browsing on a mobile device. Always add the link target additionally or provide an alternative when linking to a mobile app.

Example

Screenshot with facebook icon

Alternative text "on facebook", "on linkedin", "on twitter"

The alt text convey the action.

 

Complex information graphs

Example

Screenshot of a infograph

Alternative text : “73,000 employees working in 50 countries and representing 145 nationalities - find long description below.”

Complex information graphic needs a text alternative explaining all the information. The alt text is used to indicate where this information is on the page.

Please read detailed information on the page "Alternatives for infographics".

 

Decorative images

Decorative images do not inform or improve the meaning of the content, they simply enhance the visual look and feel of the page.

Example

screenshot of images with null alt text

Alternative text can be empty. Simply ' alt="" ' is used in the html-code. When a screenreader comes across to this null alt text, it will completely skip over the image.

Example

showing link list with icons

Alternative text = ""

The icons in this context are purely decorative and therefore would need an empty alt text.

What to check for

  • Every image has alt with appropriate alternative text:
    • If an image conveys information useful for interacting with or understanding the web page content, then it needs alternative text (please no longer than 125 characters).
    • If an image is just decorative and people don't need to know about the image, then it should have null alt (alt="").
  • Automated tests can tell you if alt is missing. To determine if the alternative text is appropriate, you need to see the image and judge it in context.

Crosslinks

Editor has full control
The editor has full control and a thorough editing is necessary.

Decision tree and tips for text alternatives

showing decision-making process

Tip

  • The text needs to convey the same meaning as the image so that if someone cannot see the image, they get the important information from the image in the alternative text.
  • Alternative text depends on context. For example, for an image of a dog on a kennel club website, the alt text might include the breed of the dog; however, the same image on a dog park website may be there just to make the page more attractive, and the image might not need any alt text (and should have null alt). One way to help think about appropriate alt text is: if you were helping someone read and interact with the web page and they cannot see it, what would you say about the image?
  • Images that are functional – for example, images that initiate actions (like submit buttons) and linked images (like in navigation)
    – need alt text that is the functional equivalent.
  • If there is text in the image – for example, in a logo – that text needs to be included in the alt text.
  • If the image has complex information – such as charts or graphs – the image should have a short alt text to identify the image, and then the detailed description of the information should be provided elsewhere (for example, in a data table).

What is not needed

  • If the image is not important for understanding the content – for example, it is just decoration or "eye candy" – it should have null alt (alt=""). One way to help determine if an image should have null alt is to ask yourself: If the image was removed, would the user still get all the information they need from the page?
  • The alternative text does not need to include the words "button", "link", or "image of …". (Screen readers automatically provide that information.)
  • If the image is sufficiently described in the text – for example, a simple diagram illustrating what's written in the web page text – it can have brief alt text such as "Diagram of work flow as described above.“
  • Alt text has a big impact on page ranking in search engine results, do not use them just to fill in keywords. This hinders accessibility and can result in a poor site.