A Guide to Using Image Alternative Text (alt): A Key to Web Accessibility
In the digital world, visual information plays a critical role. Images are widely used to supplement information, convey emotions, or guide user actions. However, for users with visual impairments or those in environments where images cannot be displayed, accessing that information can be challenging.
This is where alternative text (alt attribute) comes in. By providing appropriate alternative text, the information contained in an image can be understood without relying on visual cues, greatly enhancing web accessibility.
In this article, we’ll explain how to write effective alt text, how to use it properly, and common mistakes to avoid.
1. What Is Alternative Text (alt Attribute)?
Alternative text is a textual description specified in the alt attribute of an HTML <img> tag, explaining the content of the image.
<img src="dog.jpg" alt="A Shiba Inu sitting on the grass">
By doing this, even if the image fails to load, the text will be displayed, and screen reader users can still understand the image content.
2. Why Is Alternative Text Important for Web Accessibility?
1. Communicates Information to Users with Visual Impairments
Screen readers read the alt attribute aloud, helping users understand the image’s meaning. Without this context, users may lose track of the overall message of the page.
2. Provides Information in Image-Blocked or Low-Bandwidth Environments
On mobile networks or when images are disabled, images may not load. In such cases, alt text prevents the loss of important content.
3. Enhances SEO
Search engines like Google cannot interpret image content directly. Alt text helps index images appropriately, improving search engine optimization.
3. Basic Principles for Writing Accessible Alternative Text
What to Include
- The information the image is intended to convey
- A description based on context
- Do not omit the alt attribute unless the image is decorative
What to Avoid
- Repeating words like “image” or “photo” (screen readers already indicate it’s an image)
- File names (e.g.,
img_001.jpg) - Overly long descriptions (ideal length: 40–100 characters)
4. Writing Alt Text Based on Image Purpose
[1] Informational Images (Content Images)
Example: A photo of food in a recipe article
<img src="pasta.jpg" alt="Spaghetti with basil and tomato sauce served on a plate">
→ Describes both the appearance and name of the dish.
[2] Functional Images (Icons or Buttons)
Example: A magnifying glass icon representing a search button
<img src="search-icon.png" alt="Search">
→ Clearly describes the function of the button.
[3] Decorative Images (Design Elements or Backgrounds)
Example: A small decorative line next to a heading
<img src="decorative-line.png" alt="">
→ An empty alt attribute tells screen readers to ignore it. This is known as “markup for decorative images.”
[4] Images with Captions or Surrounding Context
Example: After text saying “Below is the new product packaging.”
<img src="product.jpg" alt="">
→ If the image’s content is explained in surrounding text, you can omit alt text to avoid redundancy.
5. Common Mistakes and How to Fix Them
Bad Example: Missing alt attribute
<img src="dog.jpg">
→ A screen reader will simply say “image,” which fails to convey the content.
Good Example: Clear and Concise Description
<img src="dog.jpg" alt="Shiba Inu sitting on grass">
→ Short, descriptive, and meaningful.
6. Tips for Checking the Quality of Alt Text
Does the alt text reflect the image’s purpose?
Does it make sense when read aloud in context?
Are decorative images marked with alt=""?
Have you tested it on mobile devices and screen readers?
Useful Tools and Assistive Technologies
- NVDA (Windows) / VoiceOver (macOS, iOS) / TalkBack (Android)
→ Use to listen to alt text and check for clarity and flow - Accessibility Tree in Developer Tools
→ View how assistive technologies interpret the page
7. Conclusion: Alt Text Is a Bridge in Words
Alternative text is a bridge in words, conveying visual content without relying on sight. Far from being just a supplement, it’s a core component of web accessibility.
Key Takeaways:
- For images that convey information, always include an alt attribute
- For decorative images, use an empty alt (
alt="") to skip reading - Write clear and concise descriptions based on context
- Test with screen readers and other tools to ensure effectiveness