If a picture is worth a thousand words, what is it worth to people who cannot see?
In our digital world, it is easy for people with visual impairments to miss critical information or have a frustrating and negative experience. Imagine, for example, that a keynote speaker sends out their presentation after a conference. The presentation contains infographics to illustrate a key point. Without descriptions of the infographics, anyone with a visual impairment cannot understand the infographic and misses out on key information.
Alternative text (alt text) is descriptive text which conveys the meaning and context of a visual in a digital setting, such as on an app or web page. When screen readers read digital content with alt text, they will read the alt text aloud, allowing people to better understand what is on the screen.
Well-written descriptive alt text dramatically reduces confusion and improves user experience as people hear words objectively but understand them subjectively.
Note: All image sources should always be cited to adhere to copyright legislation.
-
When to use alt text
Images and pictures
Make sure to convey the content and the purpose of an image in a concise and unconfusing manner. The alt text shouldn't be longer than a sentence or two - most of the time a few thoughtfully selected words will do. Consider what is important about an image. For example, important context may be the setting, the emotions on people's faces, the colours, or the relative sizes.
Do not repeat the surrounding textual content as alt text or use phrases referring to images, such as "a graphic of" or "an image of".
Diagrams, flow charts and charts
When dealing with objects that give details information, such an an infographic, use alt text to provide the information conveyed in the object. Describing a charts as 'A bar chart showing sales over time. In July, sales for brand A surpassed sales for brand B and kept increasing through the year'.
Alt text should clearly describe the beginning point, progress and conclusion of flow charts
-
When not to use alt text
Decorative visual objects
Decorative objects add visual interest but aren't informative (for example stylistic borders). People using screen readers will hear these are decorative, so they know they aren't missing any information information.
If you're not sure what type of image you are using and you're not sure what alt text to give it, this decision tree can help. It asks you questions and guides you to the type of image. It then links to the tutorials on how to write alt text for that image.
-
How to add alt text to an object in a Microsoft Program
- Right-click the object and select 'Edit Alt Text'.
- In the Alt Text pane, type 1-2 sentences in the text box to describe the object and its context to someone who cannot see it.
-
How to write better alt text descriptions for accessibility
Adding alt text to images is an important part of web accessibility. It allows people using screen readers to process images on a page. It includes visually impaired and blind users in the conversation.
If no alt text is provided, a screen reader will simply say "image" or, depending on the device, may read the file name (for example "078GUU.jpeg") aloud.
Any image that contains critical information or information that improves understanding in the content of the document must have alt text. If not, that information becomes inaccessible to those users.
Alt text is also shown when images do not load on a web page. Some users may also have images turned off in areas with slow internet access.