Over the next few weeks, we are going to take a look at the top five accessibility issues discovered on Carleton websites by our scanning tools. We will also look at the top five issues we discovered by doing a visual check on sites. The first item is:
Linked image missing alternative text
What it means
An image without alternative text results in an empty link.
Why it matters
Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.
How to fix
Add an alt text attribute to any image that is to be used as a link. The alt text should describe what action will occur, so for example: Visit our testimonials page
What all this means in essence is that when you present images usually on a website, the image should not have an alt text attribute IF the picture is purely decorative.
For example, in an article about cats, this image should not have any alt text:
Why not? Because it doesn’t add anything to the experience for the partially- or unsighted visitor if there is alt text reading “A sleeping cat” associated with the picture.
If the article was about the fashion for tabby cats with blue eyes this image could have the tag “Example of a tabby cat with blue eyes” but in a general cat article, no alt text required.
BUT
if that image is being used as a link, then the image definitely does need alt text, even if to look at it is purely for decoration on the page. The issue which is reported more than any other on Carleton sites is the lack of alt text on images used as links.
Without alt text being added to the image a screen reader has nothing to read to the user. The link is blank and so nothing can be read. Instead, we have to add alt text and that alt text has to be descriptive about the action associated with the image. So in this case:
the image has the alt text of “Find out about the true status of cats in Ancient Egypt”. This text can be edited once you make the image into a link, by rolling over the image here and clicking on the little editing pencil.
Look out for the next post about empty headings as an accessibility issue.
For more information about alt text, visit module 3 of our accessibility training: