Alt Text in the CMS
Alt text is often called an "alternative description" or an "image description" in
the CMS. Regardless of which snippet your image is part of, writing descriptive alt
text is important for communicating the visual information in your image to screen
reader users.
Steps for Writing Alt Text in the CMS
- Don't begin with "Image of..."
A screen reader will already tell the user that this is an image, so you don't need
to include the words "image of" or "photo of" in your alt text. However, do mention
if your visual is a particular type of image like an illustration, headshot, infographic,
collage, chart, or diagram.
- Examine the image closely.
What visual information is the image conveying in the context of your page? What information
would you not have if you could not see this image? Only mark it as a decorative image if it truly does not convey any important information or if its visual information
is already repeated nearby on the page.
- If the image is linked, write alt text that describes the link's purpose.
Linked images (e.g., in video callouts or image galleries) should have alt text that conveys the function of the link or where the link will
transport the user.
However, if the image is part of a link that already has visible text describing the
link's purpose (e.g., in an image grid or simple list snippet), you should either describe the image's visual information or mark it as decorative.
- Include the text in the image.
It's best to avoid using images with text embedded in them. However, if words are
part of your visual, you should include them in your alt text so that screen reader
users don't miss out on important text.
- Determine if the image is complex.
Complex images such as infographics or charts & diagrams should have brief alt text that identifies the basic properties of the image, followed
by a long description that contains the essential text and information communicated
by the image.
- Consider the context of your snippet or component.
Most images that you add in the CMS are part of a snippet or component. Check out
our examples of alt text within each of these snippets for ideas of how to craft your
alt text and how to add it to your image.
Examples of Alt Text in the CMS
General Help with Writing Alt Text
