[Speaker] Welcome! Content Lab brings you the next in our series
about accessibility practices.
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 pages
performance in search results.
Alt text or alternative text is a text
description of an image.
It lets people who use screen readers fully experience your
site, especially when an image is an
important part of your content.
Alt text also provides more information for search engines,
which can help boost your page in search results,
and if for some reason your images aren't loading,
alt text will be displayed in their place.
In this example, there's a photo
of a statue without alt text.
Only a broken image icon is shown.
When the alt text is displayed.
The visitor can still have context for the image.
Whenever you use an image on your page,
there are four questions you should ask yourself
to determine your image's purpose.
The answers will help you determine what kind
of alt text you need to be writing.
Does my image tell a story related to my content?
If your image tells a story, your alt text should convey
that story instead of the specific image details.
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.
The suggested alt text gives us the important context.
"A concerned middle-aged man looks down at a desk full
of bills and financial documents."
Is my image necessary to understand my content?
If your image is a screenshot in a tutorial,
the alt text should be more literal and exact.
This example shows an image from the Mass.gov CMS.
If used in a tutorial,
The details of the image are important to know.
The suggested alt text for this image is
"The Mass.gov CMS text editor
with the paragraph styles dropdown in the toolbar
highlighted."
Is my image functional?
If your image is functional, then it's better
to describe its function rather than how it looks.
Social media icons are commonly used on websites,
but there's no need to describe the appearance of the icon.
You only need to identify what the icon represents.
For example, you might use "Facebook
icon" for a Facebook link.
Does my image have any meaning at all?
If your image is simply decorative,
it should be marked that way.
Screen readers will ignore images marked as decorative.
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.
For example, this image
of a lighthouse on a login landing page,
you should avoid using images with text whenever possible.
If you absolutely need to include text on an image,
make sure you include that information in another way,
whether that's in the alt text or in the text on the page.
Charts and images with statistics can present this issue.
In this example, the text on the image is important,
however, it's too long to put into the alt text.
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.
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.
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. The exception to this is the banner image
that appears on service, organization, and info details pages.
These images must be decorative
and should not contain required information.
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.
Consider the purpose of the image
and keep the alt text short while also including the
necessary information or context.
Let's review some of the best
practices when writing alt text.
Keep it short, usually one to two sentences at most.
Don't overthink it. Consider key elements
and the purpose of your image
when writing alt text, instead
of describing every little detail. There's no need
to say "image of" or "picture of."
Use correct grammar and punctuation.
Start with a capital letter,
and end the alt text sentence with a period.
Consider context. It's better for the alt text
to convey important information than
to be a straightforward description.
Think about what is most critical
for your audience to take away.
The image used earlier of the man
looking at bills is an example of these points.
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.
It's written with proper grammar
and doesn't start by stating it's an image or photograph.
Do say if it's a logo, illustration, painting,
or cartoon, if that's important to the context.
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.
Avoid images with text when possible.
If you need to use text heavy images such as charts
or statistics, don't put the information into the alt text.
Instead, include the information on the page in the text,
an accessible table,
or other accessible format. In the example of this chart,
an accessible table would be a good option.
The alt text should simply state what the image is, such
as "A map of Massachusetts shaded
to show school immunization data."
For more accessibility help
and resources, visit the ACCESS team website.