�Ӱ�ԭ��

Accessibility

Alternative text (alt text) provides a written description of images so that people who cannot see them can still understand their meaning.

Reason

Screen readers read alt text out loud to describe images. Without it, users may miss important information or context that images provide.

Best practice

• Write short, clear descriptions that explain the meaning of the image
• Include important text that appears inside the image
• Use empty alt text (alt="") for decorative images
• Focus on the purpose of the image, not every visual detail. For example, in a picture of people, describe them (age, race, gender location) rather than their names
• This helps people enduring a higher cognitive load as well as folks who can’t see the image for any reason

There should be no confusion between alt text and a caption. Caption specifies, for example, who or what is identifiable in a photo. Alt text gives a physical description. So for example:

This is good practice: the alt text describes the images so the user with a screen reader knows what kind of people are being described – gender, race, age, clothing. Meanwhile, the caption identifies the people and their positions.

Example of poor practice

In this example, there are issues with the alt text and the caption:

• Nelson Mandela and Fidel Castro are not identified,
• there is no alt text,
• the caption describes what people who are accessing the content visually can already see anyway.
• Reference to one person on the left is not useful either.

The other side is adding alt text where none is needed. If this picture is used on a page about the sea:

it does not require any alt text – it is purely decorative, not illustrative. It certainly doesn’t need the alt text we placed on it: Image of the sea. It’s blue and it has waves.

Additional benefits

Alt text supports accessibility and improves how content works across different devices and platforms.

Usability

Helps all users understand images when they don’t load or when browsing quickly.

SEO

Search engines use alt text to understand images, which can improve visibility in search results.

Marketing

Ensures key messages in visuals are communicated clearly to all users.

What WCAG says

Checklist

• Meaningful image? Add clear alt text
• Decorative image? Do not enter any alt text
• Functional image (link/button)? Describe the action
• Ensure Alt text conveys the same meaning or purpose as the image
• Alt text is short and specific (no “image of…”)
• No duplicate or redundant text
• Complex images have a brief alt + longer description nearby