Image

When using images on a page, you must provide way to describe the conten of image to screen reader users. This alternative text can be either within the alt attribute in the img element, or surrond by the image itself

Alt Attribute

Screen reader could read the words in the alt tag. According to the requirement of HTML standard, Every image must have an alt attribute. If the image is decorative or have no meaning, the alt attribute can be empty (alt="")

Type the image code alt attribute in the textarea, click the speak bottom, you will hear how screen reader will react with your code.

Speak

There are few rules for alt description that need to be pay attention:

• Repeated images have the same alt text
• text in the image should be included in the alt text
• Avoid redundant
• If the image has a function, for example within a link, the alt text must present the function of the image

Surrounding content

If the image is surrounding by the text that clearly describe the content on the image, the alt attribute can be empty.

Correct

<img src="\images\sd30ij4.jpg" alt="">

In this example, the text below the text is clearly discribe the information inside the image. Therefore, it is okey to keep the alt attribute empty if the text and image are bounded together.

Incorrect

<img src="\images\sd30ij4.jpg" alt="">

In the example above, the surrding text is not directly related to the content within the image, so we still need to add descriptive text in alt attribute. The surrounding text must describe exactly what is in the image.

Let's take a quiz

What would be the most appropriate alt attribute for the image above?

A. The image doesn't convey content, so alt="" will suffice.
B. "Link to Products"
C. "Product"
D. "Navigation bar"

Correct

Wrong

In this case, option C is the best answer. It provides both the content and the function of the image. The image displays the word "Products" and also is a link to the products page on the site. For option A, Because the image is the only object within a link, null alt text is never appropriate. The image will be identified as being within a link, so "Link to" is not necessary, making option B a poor choice. Option D is too vague.When an image contains only text, the text being displayed can usually be used as alternative text.