Best practice for image title and alt text for accessibility?

Question

JAWS says the description twice: "Back to Google's website link graphic. Google's Test Lon and dash back to Google's website".

Investigations reported this appears to be repeated twice as it is stated once for the image/graphic link and once for the title of the hyperlink.

I was wondering what the best practice is for this accessibility/disability coding wise, I'm I doing it the correct way or is their a best practice for this? please feel free to modify answer.

<div class="col-md-2">
<a href="https://www.google.co.uk/" title="Google’s Test Lon – Back to Google’s website">
<img src="/test.jpg" alt="Back to Google’s website">
</a>
</div>

Answer 1

The best way to do this is to have text within the link and make the image 'decoration' by giving it an empty alt tag in most circumstances - there is no 100% solution that fits all use cases

Please note - make sure the alt tag is there and empty as shown alt="" - having alt or no alt tag at all will likely result in the file name being read out.

We then hide the link text using the 'visually hidden' class which makes sure the text is still accessible but not visible.

Don't use the title attribute on links (yet again a general rule) as it tends to cause double announcements.

The fiddle should work in all screen readers, it works in JAWS, VoiceOver and NVDA when I last tested it (around 90% of screen readers).

 .visually-hidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }

 <div class="col-md-2"> <a href="https://www.google.co.uk/"> <img src="https://via.placeholder.com/150" alt=""> <span class="visually-hidden">Google's Test Lon – Back to Google's website</span> </a> </div>