Alt Text is an attribute used in HTML to describe the content of an image. Its core function is to allow people who cannot see the image to understand its meaning. There are several principles to follow when writing Alt Text: 1. Be concise and clear, convey core information; 2. Describe the content rather than the form; 3. Adjust the description according to the context; 4. Avoid duplication and redundancy. For specific types of pictures such as charts, pictures in links, complex images, etc., Alt Text should be more specific or adjusted according to the purpose. Common errors include writing too general, replacing descriptions with file names, stacking keywords, and ignoring decorative images that should leave blank Alt attributes.

Writing Alt Text for HTML pictures is the most basic and critical part of web accessibility. Many people know to add the alt attribute, but not many people actually write it effectively. A good alt description allows visually impaired users to understand the image content and also provides useful information when the image fails to load.

What is Alt Text?

Alt text is an attribute of the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175173376629497.jpeg" class="lazy" alt="Writing Effective Alt Text for Images in HTML for Accessibility" > tag in HTML that describes the content or function of the picture. Its core function is to allow people who cannot see the picture to understand its meaning .

for example:

 <img src="/static/imghw/default1.png"  data-src="dog.jpg"  class="lazy" alt="A yellow labrador retriever running on the grass">

In the example above, the alt text clearly describes the image content. If the image cannot be displayed, or the user uses a screen reader, he or she can obtain key information through this text.

Not all images require detailed descriptions. Some pictures are only decorative, in which case you can leave blank alt attribute:

 <img src="/static/imghw/default1.png"  data-src="decoration.png"  class="lazy" alt="">

How to write a valid Alt Text?

There are no fixed formulas for writing alt text, but there are several general principles that can help you write a more practical description:

• Concise and clear : It doesn't take too long, as long as it can convey the core information of the picture.
• Describe content rather than form : for example, don’t say “red button in the picture”, but just say “submit button”.
• Adjust according to the context : The same image may be placed on different pages and different alt descriptions may be required.
• Avoid duplication and redundancy : For example, if there is already text description next to the picture, you don’t need to repeat the alt again.

For example, if you have a product picture, it appears on the product details page:

 <img src="/static/imghw/default1.png"  data-src="shoes.jpg"  class="lazy" alt="Black sneakers with white sole and blue stripes">

This description is more helpful than just writing "shoes".

What situations should be paid special attention to?

Some image types require more alt and need to be more careful when processing.

1. Charts and data visualization

This type of picture has a lot of information, and alt needs to briefly summarize the content of the chart, and sometimes it also needs to provide more details with the hidden text area.

For example:

 <img src="/static/imghw/default1.png"  data-src="chart.png"  class="lazy" alt="The bar chart shows sales in the four quarters of 2023 were 1.2 million, 1.5 million, 1.7 million and 2 million respectively">

2. Pictures in the link

If the image itself is a link, the alt text should indicate the target after clicking, rather than just describing the image content.

For example, a "Return to Homepage" icon:

 <a href="/"><img src="/static/imghw/default1.png"  data-src="home-icon.png"  class="lazy" alt="Back to Home"></a>

3. Complex images or works of art

If it is an artistic picture used for display, alt can appropriately add descriptive language to emphasize visual elements and atmosphere.

For example:

 <img src="/static/imghw/default1.png"  data-src="sunset.jpg"  class="lazy" alt="The sunset is setting, orange and purple intertwined on the sea">

Some of the easiest mistakes to make

Many people will fall into some common pitfalls when writing alt text. The following should be paid special attention to:

• ? The writing is too general, such as "picture", "photo", "this thing";
• ? Treat the file name as alt, such as "IMG_1234.jpg";
• ? Using alt to pile keywords for SEO will affect the barrier-free experience;
• ? Forget decorative pictures, you also need to clear the alt, otherwise you will be read out and disturb the user.

It is actually not difficult to solve these problems, just remember one thing: alt is for people who cannot see the pictures. Think from their perspective and you will know how to write.

Basically that's it. Writing alt text is not complicated, but it is indeed easy to be ignored. Taking some time to write carefully will help the user experience much more than you think.

The above is the detailed content of Writing Effective Alt Text for Images in HTML for Accessibility. For more information, please follow other related articles on the PHP Chinese website!