Graphics or Images

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.

 

 

 

Author: admin

Freelance Certified Web Accessibility Specialists