Alt Text
Answer
Images and other static visual non-text content that convey information must have a text alternative. This is primarily accomplished through alt or alternative text. Alt text should:
- be concise and contextual
- not be redundant
- be equivalent in function
Screen readers will announce that the alt text is describing an image, so these labels are redundant.
Wikipedia's Style Guide offers these questions to ask yourself when writing alt text:
- Why is this image here?
- What information is it presenting?
- What purpose does it fulfill?
Images that are purely decorative should have empty or null alt text. Linked images always need alt text that describes where the link goes.
Do
- include alt text for images, charts or graphics.
- include information in alt text that is important in the context of the resource
- keep alt text short. Aim for around 125 characters, or an old-school tweet.
- include information shown in images or graphs in the text of projects when possible, especially when alt text would be long.
- review alt text to ensure all provided alt texts are descriptive.
- include "headshot of" or other labels that convey meaning
Don't
- include the words "photo of","picture of", "screenshot of" or similar in the alt text.
- include alt text for images that are purely decorative.
- include alt text for graphs or charts that are thoroughly explained in the text of a project.
- write alt text that is the filename of the image or the figure number.
Examples:
Consider this graph. The alt-text you would include would depend on the context, but can follow a template suggested by Cesal: alt="chart type of type of data where reason for including chart". For example: Alt=“Bar chart of where consumers learn about brand production practices where labels and no relevance are indicated at similar rates.”
Then, present a link to the data, an accessible table with data, or a long description in the body of your document. Here's an accessible table for the chart above.
Where do you learn about production policies of specific brands? From Textile Insight March/April 2019 pg 32. 111 Respondents 18 years and older.
Information Source | Percentage |
---|---|
Labels/hang tags | 28 |
Websites/ Newspapers/ Magazines | 26 |
Brand's Social Media | 15 |
Retail Sales Associate | 3 |
Not relevant to my purchasing decision | 28 |
- If including a chart in the regular text isn't an option, you might consider including alt text like this "Where do you learn about production policies of specific brands? labels/hang tags 28%, websites/news 26%, brand's social media 15%, sales associate 3%, 28% not relevant info".
- If you are presenting the chart for a specific piece of information or in a specific context, your alt text might be more pointed. Consider "Similar numbers of respondents indicated that they learned about brand production policies from labels (28%), websites or news (26%) or that the information wasn't relevant to their purchase (28%).
For this screenshot, assume it is included in the context of a tutorial. I've written the following alt-text: "Statista database highlighting the Digital and Trend Report option in the Reports drop down from the main menu."
This alt-text doesn't need to describe every nuance of the Statista Interface because that isn't what we want sighted viewers to get out of the image. We're trying to show our users where to find a specific feature, so the alt text does that using language that doesn't rely on sensory characteristics.