What is Alternative Text? A Key Element Supporting Web Accessibility

*This article is an English translation of a Japanese article.

In web accessibility, providing alternative text (alt text) is a crucial method to ensure that users with visual impairments, or those in environments where images are not displayed, can still access information. This article explains the basic role of alt text, how to create it, and best practices for improving accessibility.

What is Alternative Text?

Alternative text refers to the text displayed when an image cannot be shown. It is written in the alt attribute of the HTML <img> tag and is primarily used for the following purposes:

• For users with visual impairments: Screen readers read aloud the alt text, allowing users to understand the content and meaning of images.
• Providing alternative information when images are not displayed: If images fail to load or the user is in a low-bandwidth environment, the text ensures that information is still conveyed.
• SEO benefits: Alt text helps search engines understand the content of a page, contributing to improved search rankings.

Basic Guidelines for Creating Alternative Text

Creating effective alt text requires tailoring it to the image’s content and function. Well-crafted alt text enhances accessibility. Below are some basic guidelines:

1. Briefly describe the image’s content: Express what is shown in the image simply and clearly.

   <img src="flower.jpg" alt="A red rose">
   

2. Describe the function for functional images: For images serving as buttons or links, explain their role.

   <img src="submit-button.jpg" alt="Submit button">
   

3. Use an empty alt attribute for decorative images: For purely decorative images, set alt="" to instruct screen readers to ignore them.

   <img src="decorative-line.jpg" alt="">
   

Best Practices for Providing Alternative Text

To effectively use alt text, keep the following best practices in mind:

• Accurately convey meaning: Consider not only the content of the image but also its role in the context of the page. Think about whether the image illustrates something, points to something, or serves a decorative purpose.
• Be concise and specific: Alt text should be short and clear. Avoid unnecessary details. For example, phrases like “This image shows…” are redundant and should be omitted.
• Consider the context: The appropriate alt text for the same image may vary depending on its context and use on different pages.
• Avoid redundant information: If the same information is presented in nearby text, do not repeat it in the alt text. For instance, if an image has a caption, do not duplicate the caption’s content in the alt text.
• Omit unnecessary words: Words like “image” or “picture” are unnecessary in alt text since screen readers already recognize that the alt attribute relates to an image.

When Alternative Text is Necessary and When it’s Not

Not all images require alt text. Whether it is necessary depends on the image’s role.

When Alternative Text is Needed

• For informative images: Product photos, infographics, or portraits that convey essential information.
• For navigational images: Icons that function as buttons or links.
• For instructional images: Screenshots or other images used to demonstrate steps or procedures.

When Alternative Text is Not Needed

• For purely decorative images: Images used solely to enhance the visual appeal of a page without contributing any meaningful information. These images should have an empty alt attribute (alt="") to prevent screen readers from reading them.

How Alternative Text Improves Accessibility

Providing alternative text is a fundamental way to significantly enhance web accessibility. Appropriate alt text benefits not only visually impaired users but also those in situations where images cannot be displayed. By following accessibility standards and ensuring proper alt text is set, we can provide equitable access to information for all users.

Conclusion

Alternative text is one of the key elements supporting web accessibility. By designing content that does not rely solely on visual information, we can make the web more accessible to a broader audience. Web developers should ensure that alternative text is appropriately set, helping create websites that are accessible to everyone and providing user-friendly designs for all. Properly providing alt text is an essential first step towards building an accessible web.

We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.

If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.