How screen readers announce images
Type of image how screen readers treat the image
Alt text: Screen readers read the alt attribute of images if alt text is given and will announce the word “graphic” before the alt text.
For example,
<img src=”cat_0123.jpg” alt=”A cute cat playing with a ball of string”>
Screen reader will read as “Graphic, a cute cat playing with a ball of string.”
Note: Don’t write “image of…” or “graphic” (or similar) in the alt text, because screen readers already announce that!
Missing alt text:
If an image does not have alt text, JAWS announces the image’s file name.
For example,
< img src=”cat_0123.jpg”>
The screen reader will announce only the file name.
Null alt text:
Screen readers completely ignore images marked with null (empty) alt text (which is what you want them to do, if you’ve used null alt text on purpose)
. For example, screen readers will say nothing when they come across <img src=”cat.jpg” alt=””>.
Linked images:
If an image is a link, JAWS says “link graphic” before saying the image’s alt text. For example,
< a href=”cat_page.html”><img src=”cat_0123.jpg” alt=”A tabby cat playing with a ball of string”></a>
The screen reader will read as “Link graphic, a tabby cat playing with a ball of string.”
Linked images missing alt text:
If the image without alt text is a link, JAWS will generally read the link destination, which is the href attribute in the HTML markup for the link.
For example,
< a href=”cat_page.html”><img src=”cat_0123.jpg” alt=””></a>
Screen reader will read as “Link graphic, cat underscore page dot H T M L”
Note:
Web developers should use graphics with alt attribute. And the text description for the alt attribute should be appropriate. In that way, a screen reader user will understand easily what this graphic is all about.
