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.
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
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
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.