0:05
Speaker 1: Welcome! Content Lab brings you the next in our series about accessibility practices.
0:10
In this video, we'll learn about why writing good alt text for images is important not just for accessibility, but also for improving your page's performance in search results.
0:20
Alt text, or alternative text, is the text description of an image.
0:25
It lets people who use screen readers fully experience your site, especially when an image is an important part of your content.
0:31
Alt text also provides more information for search engines, which can help boost your page in search results.
0:37
And if, for some reason, your images aren't loading, alt text will be displayed in their place.
0:43
In this example, there's a photo of a statue without alt text.
0:47
Only a broken image icon is shown.
0:50
When the alt text is displayed, the visitor can still have context for the image.
0:55
Whenever you use an image on your page, there are four questions you should ask yourself to determine your image's purpose.
1:01
The answers will help you determine what kind of alt text you need to be writing.
1:05
"Does my image tell a story related to my content?"
1:08
If your image tells a story, your alt text should convey that story instead of the specific image details.
1:14
This image, for example, shows a man in a state of distress over paperwork that is likely to be relevant, but the color of his shirt is not.
1:22
The suggested alt text gives us the important context:
1:25
"A concerned middle-aged man looks down at a desk full of bills and financial documents."
1:31
"Is my image necessary to understand my content?"
1:35
If your image is a screenshot in a tutorial, the alt text should be more literal and exact.
1:40
This example shows an image from the Mass.gov CMS.
1:44
If used in a tutorial,
1:45
the details of the image are important to know.
1:48
The suggested alt text for this image is: "The Mass.gov CMS text editor with the paragraph styles drop-down in the toolbar highlighted."
2:00
"Is my image functional?"
2:02
If your image is functional, then it's better to describe its function rather than how it looks.
2:07
Social media icons are commonly used on websites, but there's no need to describe the appearance of the icon.
2:14
You only need to identify what the icon represents.
2:17
For example, you might use "Facebook icon" for a Facebook link.
2:22
"Does my image have any meaning at all?'
2:25
If your image is simply decorative, it should be marked that way.
2:28
Screen readers will ignore images marked as decorative.
2:32
An example of a decorative image would be a background image that's being used for aesthetic purposes, but doesn't directly relate to any of the content or the context of the page.
2:41
For example, this image of a lighthouse on a login landing page.
2:46
You should avoid using images with text whenever possible.
2:49
If you absolutely need to include text on an image, make sure you include that information in another way, whether that's in the old text or in the text on the page.
2:58
Charts and images with statistics can present this issue.
3:02
In this example, the text on the image is important.
3:04
However, it's too long to put into the old text.
3:08
Instead, consider a brief description of the visual and putting the detailed information either in the text of the page or in an accessible table format.
3:18
When you add an image on a Mass.gov page in the CMS, whether in a rich text field or an image section, you'll be prompted to enter alternative text for it.
3:26
You can leave the field blank, but if you do, the image may be automatically marked as decorative and skipped, potentially causing confusion for the screen reader users if the image is important to the context.
3:37
The exception to this is the banner image that appears on service, organization, and info details pages.
3:43
These images must be decorative and should not contain required information.
3:48
Remember, when adding images and creating alt text, you want the purpose of the images to be as clear and quick to the users with screen readers as it is to those without them.
3:57
Consider the purpose of the image and keep the alt text short while also including the necessary information or context.
4:04
Let's review some of the best practices.
4:06
When writing alt text, keep it short, usually one to two sentences at most.
4:11
Don't overthink it.
4:13
Consider key elements and the purpose of your image when writing alt text.
4:17
Instead of describing every little detail, there's no need to say image of or picture of.
4:24
Use correct grammar and punctuation.
4:26
Start with a capital letter and end the alt text sentence with a period.
4:30
Consider context.
4:32
It's better for the alt text to convey important information than to be a straightforward description.
4:37
Think about what is most critical for your audience to take away.
4:40
The image used earlier of the man looking at bills is an example of these points.
4:44
The alt text, "a concerned middle-aged man looks down at a desk full of bills and financial documents," is short and focused on the key elements and context.
4:53
It's written with proper grammar and doesn't start by stating it's an image or photograph.
4:58
Do say if it's a logo, illustration, painting, or cartoon, if that's important to the context.
5:05
If you're using an image of the state seal, for example, you should describe it as the state seal of Massachusetts, but you don't necessarily need to describe what the state seal looks like.
5:15
Avoid images with text when possible.
5:17
If you need to use text-heavy images such as charts or statistics, don't put the information into the alt text.
5:23
Instead, include the information on the page in the text, an accessible table, or other accessible format.
5:31
In the example of this chart, an accessible table would be a good option.
5:35
The alt text should simply state what the image is, such as a map of Massachusetts shaded to show school immunization data.
5:43
For more accessibility help and resources, visit the ACCESS team website.