Best Practice: Writing alt-text for images

Misty Flowers

May 30, 2017 21:11

This article covers best practices for writing alt-text on website images in Finalsite, including guidelines by image type (informative, functional, decorative) and how to enforce ADA compliance by requiring alt text.

💡Quick answers

Why does alt-text matter for website images? It helps screen reader users understand the content and context of images, and it also improves overall user experience and SEO by giving search engines more context.
What are the general guidelines for writing alt-text? Keep it under about 125 characters, describe the purpose of the image rather than just its appearance, avoid redundant phrases like image of, use proper punctuation, and skip irrelevant background details.
Writing alt-text for different image types like logos or charts? Describe informative images by what they communicate, describe functional images like buttons by their action, leave decorative images empty using the Decorative image toggle, summarize complex charts with a brief description, include any important text shown in the image, and name the organization for logos.
Can alt-text be left empty? Yes, but only for purely decorative images; select the Decorative image (no alt text needed) option so screen readers skip it, since alt-text should not otherwise be left blank.
What common alt-text mistakes should be avoided? Don't repeat text already in a caption, don't stuff alt-text with keywords, don't leave it empty unless the image is decorative, and don't describe minor or irrelevant visual details.
Is there a setting to require alt-text sitewide? Yes, Resources settings include separate toggles for Resource elements and the content editor that can require alt text before images are allowed to display on the site.

Ensuring that images on your school’s website are accessible to all users is essential for meeting accessibility standards like the Web Content Accessibility Guidelines (WCAG). Alternative text (alt-text) plays a key role in helping screen readers convey the content and purpose of images to visually impaired users.

This article outlines best practices for writing effective alt-text to create an inclusive online experience for students, parents, staff, and all visitors.

Why does alt-text matter?

Alt-text helps users who rely on screen readers to understand the content and context of images. It also improves the overall user experience and enhances search engine optimization (SEO) by providing more context to search engines.

General guidelines for writing alt-text

Follow these key principles when adding alt-text to images on your website:

Be clear and concise

Keep alt-text short but descriptive—aim for fewer than 125 characters.
Focus on the key information the image conveys.

Describe the purpose, not just the image

Explain why the image matters in context, not just what it looks like.
Example: Instead of “Student holding a certificate”, say “Student receiving an award for academic excellence.”

Avoid redundancy

Screen readers already announce that it’s an image, so there’s no need to say “image of” or “picture of.”

Use proper punctuation

Adding commas and periods helps screen readers deliver the alt-text in a natural, understandable way.

Skip irrelevant details

Focus only on what’s important to the user. Avoid describing background details unless they are relevant to the image’s purpose.

Best practices by image type

Informative images

Informative images provide key content that enhances understanding. Alt-text should reflect what the image is communicating.

Example: “Chart showing a 20% increase in math test scores from 2022 to 2023.”

Functional images

Functional images are linked or serve a specific purpose, like buttons or navigation icons. Alt-text should describe the function rather than the appearance.

Example: “Search the school website.” (for a magnifying glass icon)

Decorative images

If the image is purely decorative and does not provide essential information, use an empty alt-text so the screen reader skips it. When adding or editing an Image element on a page, select Decorative image (no alt text needed) to mark an image as decorative.

Complex images (charts, graphs, infographics)

For complex images, provide a brief alt-text and link to a longer description if needed.

Example: “Bar chart comparing student performance across grade levels. Full details below.”

Text in images

If the image contains important text, include it in the alt-text

Example: “Welcome to Lincoln High School’s Open House.”

Logos

Describe the organization or function represented by the logo.

Example: “Lincoln High School.”

Common mistakes to avoid

Don’t repeat alt-text that’s already explained in a caption.
Don’t stuff alt-text with irrelevant keywords.
Don’t leave alt-text empty unless the image is purely decorative.
Don’t describe minor or irrelevant visual details.

Ensure ADA compliance by requiring alt-text

Resources settings are available to help ensure ADA compliance on your site by requiring alt text in order for images to be shown on the site. There are separate toggles for Resource elements and the content editor. A warning box will display the number of images that will be affected by enabling the alt text requirement for Resource elements.

require alt text ensure ada compliance.png

Need additional help?

For additional guidance on writing alt-text, refer to the WebAIM Alt-Text Guide.

Next step: Add alt-text to images

Now that you have all of the strategy and best practices in your toolbox, you're all ready to go add alt-text to your images. The article, "Add alt-text to images" will show you all of the ways you can make sure your images are accessible on your website.