Best Practice: Writing alt-text for images

In this Article

• Why does alt-text matter?
• General guidelines for writing alt-text
• Best practices by image type
• Common mistakes to avoid
• Ensure ADA compliance by requiring alt text
• Need additional help? 
• Next step: Add alt-text to images

---

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.

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.

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.