Alternative text for images is rule number one of web accessibility. While the lack of appropriate alternative text is perhaps the biggest barrier to accessibility for screen reader users, I have noticed a tremendous increase in the use of alternative text and thus, general web accessibility, in recent years. However, I am now noticing a very alarming trend of missing or inappropriate alternative text for images within links.
When an image has no alt attribute or if the alt attribute is empty or null (alt=””), screen readers essentially ignore those images. Decorative images should be given empty or null alt text. When the content presented in an image is conveyed elsewhere, such as in a caption, the image may also be given empty alt text. However, any time an image is the only content within a link, the image MUST be given alternative text that presents the function of that link.
Consider the following, examples that may be found in an online photo album.
Photo of an amazing lightning storm
In this case, the content of the image is presented in the caption, so the image may be given empty alt text.
Photo of an amazing lightning storm
In the above example, the image itself is a link. When a screen reader encounters a link, it must present something to the user. For text links, it would typically identify that a link is present and then read the text within the anchor element. When the content of the link is an image that does not have alternative text, the screen reader has no content to identify for the link. As a result, screen readers will typically read either the image file name or the URL of the page being linked to. In most cases, this is of little or no value to the user – or even worse, it makes the page even more inaccessible than if the link and image had been ignored altogether.
Presentation of linked images are becoming more prevalent, yet they rarely have appropriate alternative text.
In the situation above, one solution would be to duplicate the caption within the alternative text of the image. This will result in redundancy – the screen reader would read something like, “Link. Photo of an amazing lightning storm. Photo of an amazing lightning storm.” An even better solution is to place both the image AND the caption within the link.
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value.
The HTML 5 working group is currently proposing that the alt attribute be made optional for images. The argument is that screen readers ignore images that have no alt attribute, so there is little justification in requiring the attribute for images that do not need it. This argument is quite sound, although I believe that this would promote a much more lax approach to accessibility and will result in more content-conveying images that do not have appropriate alternative text. But when an image is the only element within a link, it must have alternative text so that the function of the link is provided to all users. Unless the HTML 5 specification explicitly requires this, their proposal that the alt attribute be made optional will certainly cultivate an environment where accessibility is decreased.
Alt text is often mentioned as a simple technique to make make content more accessible for developers unfamiliar with accessibility issues. The reality it can be complicated- use alt text, unless it is decorative except where the decorative image is a link.
If the working group decides to forgo the waive the requirement for alt text, then it will be imperative on accessibility community to promote a better awareness of the different between decorative images vs images that add contain meaningful content.
What happens if the enclosing link tag has a title tag?
Is the title tag on the link read by screen readers?
no frederick the title is not read with the default configuration in most of the screenreader (even with text link)
“When the content presented in an image is conveyed elsewhere, such as in a caption, the image may also be given empty alt text.”
For information I have done a comment on this case during the wcag 2 period and their response is that I can’t do such thing even if the caption is just after the image. The image need to have at minimum an alt to say “the description is just after this image” otherwise if I use an empty alt the image is not announced so it can be tricky to know from what is the description
It is inane that by default screenreaders do not read link titles! Even Lynx reads the link “title” attribute!
Mr. Peabody-
I think it’s a good thing that screen readers do not read the title values for links. Title is intended to provide supplementary information. If title is necessary for accessibility, then it is therefor NOT supplementary. Because of the vast misuse of title for links (primarily for search engine optimization), it’s no wonder most users prefer to not hear them read.
However, there is an argument for having screen readers read the title for links when the content of the link is an image that has no alt text.
Still, you should never rely on title to provide accessibility, because if it is inaccessible when title is ignored, you are naturally abusing the purpose for having the title attribute in the first place.
I don’t believe the alt attribute should be made optional for images. As stated, for decorative images, we leave the alt blank–simple and consistent. In the example above, I don’t see a problem with the caption and alternative text having “redundant text”. This is a very minor issue. Besides, a sighted user would also digest the content twice, just once with an image and once with text (rather than twice with text). PS: Mr. Peabody, I agree that the title attribute should be treated more importantly by not only screen readers, but Safari as well!
Regarding the HTML 5 controversy, you said “The argument is that screen readers ignore images that have no alt attribute.”
Well, that simply isn’t true. The default settings for today’s screen readers is to try to inform the user about every image. The first place they look is the industry standard place, the ALT attribute. If there’s not alt attribute, they do NOT ignore the image but announce the file name as an attempt to inform the user. The ONLY time screen readers outright ignore an image is when they find alt=”” which serves as an explicit signal to ignore the image.
Screen readers -can- be configured to also look for the title attribute, but they are not by default. The reasons are exactly as stated earlier. Title is intended, by the standards, as supplemental information and should not be depended upon to convey critical primary information. The overuse of titles for search engine placement is yet another reason to have them remain unannounced.
Bob, what you describe regarding screen readers identifying images without an alt attribute is only true if the image is within a link. If you place only an image that has no alt attribute on a page, both JAWS and Window Eyes will ignore it by default, as they should.
Thought it was worth noting that some voice recognition software (Dragon Naturally Speaking, I believe) uses the alt text as implied link text where an image is a link, which serves as a convenient trigger phrase for activating the link.
So is it better to use the empty alt=”” tag so all images are ignored and therefore a huge time-saver for users with visual impairments using programs to read the content? Seems it would make it much quicker to just ignore useless images/graphics, no?
What about linked icons? E.g: An icon that represents “open this link in a new window” or “expand/colapse information”. The alt attribute is necessary in this case, but if the image information is not enough clear by itself, the title attribute is necessary for the vast majority of users (those who don’t use a screen reader) supposing that their user agent doesn’t display alt attribute as a tooltip, like Firefox.
Wich is the best option in this kind of linked images?
Not sure if this is the right spot to post this but it’s worth mentioning that at my work we are required to meet all W3C Checkpoints 1 & 2 but we have even more strict requirements developed in house as we have 45K employees and many staff who have a disability of some sort (visual, dexterity, cognitive etc).
Anyhow, an effective photo gallery solution was something that we were on the hunt for and stumbled upon this: http://highslide.com/
It met all our needs (was accessible to users who don’t use a mouse and use their keyboard only, works when Javascript is turned off, we tested is on a JAWS user and they found it easy to navigate, images are alt taggable, the enlarged image has an alt tag etc etc). Anyhow, on this site there are 6 different versions of the way a photo gallery could work, so we took the barn photo example (as the navigation instructions were below the enlarged image) but removed the black out feature on the screen.
So, if you are on the hunt for a fully accessible photo gallery solution, then I’d recommend this.
C
Note that there are accessibility issues with HighSlide JS. Some are identified and possible solutions addressed at:
http://www.lessfussdesign.com/blog/2008/08/highslide-accessibility/
Jared “In the situation above, one solution would be to duplicate the caption within the alternative text of the image. This will result in redundancy — the screen reader would read something like, “Link. Photo of an amazing lightning storm. Photo of an amazing lightning storm.” An even better solution is to place both the image AND the caption within the link.”
Can you please clarify – do you mean the image and caption should be in the alt text attribute. If it is in the link in “title” there is a risk the screenreader will not read it?