Dockbar

Alternative text

Last updated: 11/04/2023

What is alternative text

Alternative text, also called "Alt text", is a textual description for non-text content that explains the presence or function of an image on a webpage.

It is inserted in HTML (Hypertext Markup Language) documents, which is very important for screen readers used by blind and visually impaired people.

This is because screen readers read aloud this alternative text as a description of the image, so users with disabilities can understand what is on the website or document they are using.

It is also very useful for SEO as alternative text is used in combination along with computer vision algorithms and page content to recognize the subject matter of the presented images in the context of the entire site. Additionally, it helps search engine crawlers properly index the images.

How to implement alternative text

To include alternative text in code, we should add the “alt” attribute to the <img> tag in the code, or to the <input> element when images are used as buttons:

Usually, this alternative text is not visible to sighted people and is only audible through the screen reader. However, when there is a problem with the Internet connection and images fail to load, then alt text may appear on the screen. Example below:

broken image icon and alt text visible 'Publications Office in Luxembourg'

If you don't add alternative text, the screen reader will either skip the image or read the file name or link destination, which may be misleading for the users and provide a bad experience for blind and visually impaired users.

SVG’s

In case of SVG (Scalable Vector Graphics) image formats, you can provide alternative text in a <title> element. You should also add the "aria-labelledby" attribute in the SVG element, which should refer to the added "title" element. Example below:

</svg>

When alternative text is required

1. Informative images

For images that provide additional and relevant information on a webpage. In this case, the description provided by the alternative text should be concise and put into a short sentence or a phrase.

In order to create a good alternative text for informative images, we will have to look at the page's context and adapt the alt text to the type of page and the nature of the text that is placed on that page.

Additionally, the alternative text does not have to completely describe what is in the photo, but rather convey the details and meaning in the context of the page on which it is presented.

For example: The Publications office logo graphic on the home page as a link should have alternative text "Publications Office homepage":

In this next case, if the following photo was in the "About Us" or similar section of the website, the most appropriate alternative text would be: “Entrance to the Publications Office building in Luxembourg at 20 Rue de Reims”:

2. Decorative images

For images that don't convey any meaning or useful information and are therefore considered decorative, you may use the empty alternative alt=”” so screen readers will ignore the image. Examples of decorative images:

Elements making the website more visually attractive like visual styling such as borders, spacers, and corners, e.g.
Decorative image as part of a text link.
Images which content has already been identified and described by surrounding text.
Napoleon Bonaparte
Napoleon was born on the 15th of August, 1769,
in French occupied Corsica. His father was Carlo...
Eye candy images – when an image has no function and does not convey information.
Email us at contact@email.com

3. Functional images

Functional images are the images which involve an action rather than convey general information. They are used in links, buttons and other interactive elements. Alternative text for these should describe what happens when a user clicks on the element. E.g. "Register for the upcoming edition of 'Meetings for Editors'".

It should not describe what the element looks like, because it may be of no use to the user and and does not reliably describe the interaction on the site.

In this case the Publications Office logo image is the link to the homepage of the Publications Office website therefore we should have the alternative text set as: "Publications Office home" or "Publications Office homepage" what clearly describes where the user would be redirected after clicking on this element.

In case the Publications office logo were to be placed inside the link text, we would use the null (empty) alternative text alt=”” because it does not have a different function or it does not add additional information.

Publications Office Homepage

Icons

In the case of icon images, we should also add alternative text to it if an icon on a page is intended to communicate information and bring value to the user. This will allow it to be announced by the assistive technologies including screen readers. In this example the icons convey very important information to the user, without which he would not be able to understand the relationship of individual items in the table:

matrix of aria roles along with compatibility of different screen readers along with checkmark icon and x icon assigned accordingly

This principle also applies to the stand-alone icons placed on the webpage such as Print, Share or Help if they have a function that we would need to communicate to the user.

In this next example, when the icon image is placed after the text and is within the link, we can apply the following alternative text ”New window” or ”Opens in a new window” which will add value to the user by identifying its meaning. This is also often used to mark file formats such as DOC or PDF:

WCAG 2.1 Guidelines

If an icon is used for purely decorative purposes, then as mentioned in the section for “Decorative images“, we should provide it with the empty alt to exclude it from assistive technologies.

Best practices

Meaningful alternative text should represent what is being communicated in the photo and not just list which elements are in the photo.
Do not use wording “image of ” or “graphic of ” because the screen reader will still communicate this information.
Do not use “Click here” or “Link” in the alt text for functional images to avoid repetition as screen readers will already communicate these as the links.
Try to keep the length of your alternative text to 125 characters or less.