When you upload an image in InstantGuide, you are presented with an optional field labeled Image alt text.
Ex: ZACH Theatre
- Image alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
- Image alt text describes the image or at least states what the image is trying to convey to the patron viewing the page.
- Image alt text also helps screen-reading tools describe images to patrons with visual impairments.
Where to Add Alt Text
- Program Header Image
- Page Header Image
- Thumbnail & Image Cards
- Horizontal & Vertical Lists (if they include images)
- Custom Blocks - Note that the field has a different label here. When you add an image to a custom block, you're prompted to add an Alternative Description.
Tips & Best Practices for Using Image Alt Text
- Get right to it. Don't begin your text with "picture of" or "image of." Screen readers automatically announce an image as an image. So an alt text “Image of a piano” would be read aloud by the screen reader as “image, Image of a piano”.
- Use correct grammar. Begin sentences with capital letters and use closing punctuation to optimize the description for screen readers.
- Be specific. You want to give enough details to provide context for the image. Consider the difference between these two descriptions:
- A man plays the cello for a group of children.
- Cellist Yo-Yo Ma plays a Bach concerto for first graders at Jackson Park Elementary School.
- Keep it brief. While the field gives you a maximum of 225 characters, it's best to keep your description to 125 characters or less. Many screen-reading tools typically stop reading alt text at that point. If the image requires a lengthier description, it's better to describe the image in the content and provide a shorter alt text.
- Reserve for informative images. If an image is purely decorative and not meant to convey important information, best practice is to leave the "Image alt text" field blank.