How to prevent screen reader from reading src attr

Question

I am facing a very straight forward problem with screen readers in IE9 or below. When the screen reader looks at an image tag, which has the src attribute, it reads the content of the src. Even if the alt attribute is present, it reads the contents inside the src.

To be perfectly clear: this only happens in IE 9 or below

Here is a very simple example of my code:

<img src="http://placehold.it/100x100" alt="some image"/>

I don't understand why this is happening. Any help on how to get around this issue or the fact that no, there is not solution plus proof, would be very appreciated.

Answer 1

I think you should try using a 'title' attribute. A lot of times, 'title' is what is used for readers to get the description.

<img src=".." alt=".." title="some image" />

Hope this helps!

Answer 2

I think you're hitting a bug with a new verison of NVDA, and an old version of IE.

Try the code with Firefox (recent) and NVDA, or a version of JAWs from the IE9 era (version 12 I think would do), and I'm fairly sure you'll get the alt text.

In terms of proof, the official document for this is the WAI ARIA roles "Text alternative computation", which then refers to the HTML4 "How to specify alternative text".

Basically, the alt text is what should be used, you're hitting a bug in a combination of screenreader and browsers that are very unlikely to be used together. (NVDA works best with Firefox, you would use Jaws with IE9.)