How to...Add Alt Text to Images

George Mason University is committed to ensuring an inclusive digital experience. One essential practice to maintain accessibility is adding descriptive alt text to images.

What is Alt Text?

Alt text, or alternative text, is a brief description of an image that allows screen readers to convey the image’s content to users with visual impairments. It ensures that images are accessible to everyone, providing essential context for those who cannot see them. Alt text also improves SEO, as search engines favor pages that provide meaningful alt text for images.

Best Practices for Writing Alt Text

• Be specific and relevant: Focus on what the image represents and its function within the content.
• Be concise: Keep descriptions short but informative. Avoid overly detailed or redundant explanations.
• Describe the purpose: If the image contains information not provided elsewhere, include that key information in the alt text.
• Use context-appropriate language: Tailor the description to fit the surrounding content, avoiding technical jargon or irrelevant details.
• Handle decorative images appropriately: If an image is purely decorative and doesn't add to the content, use null alt text (alt="") to signal screen readers to skip the image.

Example of Alt Text in Action:

• For a photo of a tree: “A large oak tree with green leaves in summer.”
• For a chart: “A bar chart comparing enrollment data from 2022 and 2023, showing a 15% increase in enrollment.”
• For decorative images: Use empty alt text (alt="").

SiteMasonry CMS – How to Add Alt Text to Images

SiteMasonry offers two main ways to add images: via the Featured Image block and by embedding images into a Text Block. Adding alt text ensures that images remain accessible and compliant with accessibility standards.

Adding Alt Text to a Featured Image

Featured images automatically prompt for alt text upon upload.

1. Navigate to your page and select the Featured Image block.
2. Upload your image and enter a brief, descriptive alt text.
3. Click Save to finalize.

Adding Alt Text to an Embedded Image

Embedded images require manual entry of alt text.

1. Place your cursor in the text block where the image should appear.
2. Use the Insert Media icon to upload or select an image.
3. After inserting, click the Edit Media icon on the image.
4. Add a descriptive alt text, then select alignment and size if needed.
5. Click Save to apply the changes.