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.

A cat sleeping

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

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

A cat sleeping on the wall

<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

Anywhere from 16 to 20 hours a day, typically. For very young and very old cats, it's near the upper end of the range, and newborns sleep almost 24/7.

<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

sample image

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"