What is Alt Text?
Alt text (alternative text) is a short, written description of an image that helps improve web accessibility and enhances search engine optimization (SEO). It allows visually impaired and Color-blind users to understand images through screen readers and provides context when images fail to load. Alt text is essential for compliance with the Web Content Accessibility Guidelines (WCAG) and other accessibility standards.
How Alt Text is Used
- Screen Readers Interpret Alt Text: Users with visual impairments rely on assistive technologies that read alt text aloud.
- Search Engines Use Alt Text for SEO: Google and other search engines analyze alt text to understand and rank image content, making it a critical part of accessible navigation.
- Fallback for Missing Images: If an image fails to load, the alt text appears in its place.
- Improving Social Media Accessibility: Platforms like Twitter, Facebook, and Instagram allow users to add alt text to images.
- Improving web accessibility: Ensures visually impaired users can access and understand image content.
- Ensuring Compliance: Many organizations must follow legal accessibility requirements, including the ADA and Section 508.
Other Names for Alt Text
- Alternative text
- Image descriptions
- Alt attribute
- Alt tag (though technically incorrect)
How to Write Alt Text Correctly
Writing effective alt text requires a balance between clarity, brevity, and SEO optimization. Follow these best practices:
1. Be Descriptive Yet Concise
Provide a clear and useful description without excessive detail.
Bad Example: alt="Dog"
Good Example: alt="Golden retriever puppy playing in a park with a red ball."
2. Avoid Unnecessary Phrases
Screen readers already announce images, so avoid phrases like “image of” or “picture of.”
Bad Example: alt="Image of a cat sitting on a windowsill."
Good Example: alt="Orange tabby cat resting on a sunny windowsill."
3. Use Context-Appropriate Descriptions
If an image is functional—like a button—describe its purpose rather than its appearance.
Bad Example: alt="Magnifying glass icon."
Good Example: alt="Search button."
4. Avoid Keyword Stuffing
Including relevant keywords can improve SEO, but forcing too many keywords into the alt text reduces readability.
Bad Example: alt="SEO image, best SEO practices, search engine optimization tips, SEO guide."
Good Example: alt="SEO expert analyzing website performance on a laptop."
5. Use Empty Alt Text for Decorative Images
If an image is purely decorative, use an empty alt attribute alt="" so screen readers ignore it.
Where to Find and Edit Alt Text
Alt text is typically added within the HTML dan also be added through:
- Content Management Systems (CMS): Platforms like Concrete CMS allow users to easily input alt text when uploading images.
