Go to overview: Standard HTML mark-up in screenreader tests

Testing output for different combinations of alt and title attributes on img

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de), last update: 3 May 2016

Young man and girl seated on the Canadian side of Niagara Falls. Library and Archives Canada

Description

The The text alternative computation (accName calculation algorithm) includes the title attribute in its hierarchy which suggests it should be sufficient to meet Success Criterion 1.1.1 (although I currently can't find it in this horribly difficult text when searching for "title"). The BITV-Test currently still insists on the alt attribute since title is meant to supply ancillary information, not the alternative text of an image. One argument for that goes that title may not be spoken if screen readers have disabled the output of title in their settings. (That does not seem to be always true, however. I still need to test with changed title settings in JAWS.)

We increasingly find implementations that use title instead of alt on images, particulary linked ones as in teaser images, sometimes without alt attribute or with an empty alt attribute (alt="").

One rationale for this design pattern may be to avoid the potential redundant rendering of alt and title title values in screen readers - chatty redundant output which can be very distracting. A further option is to add title not to the image but to the link around the image.

This page serves to test different variants of using alt and title and report on the output of a number of screen readers.

If you test another combination of user agent and screen reader (including SR settings) let me know and I will add your results here.

Examples

Go straight to Results

(1) same alt-text in alt AND title

<img src="img/niagara-couple.jpg" alt="Niagara couple" title="Niagara couple" />

(2) different alt-text in alt AND title

<img src="img/niagara-couple.jpg" alt="Niagara couple in alt" title="Niagara couple in title" />

(3) alt-text in title, empty alt

<img src="img/niagara-couple.jpg" alt="" title="Niagara couple" />

(4) alt-text in title, alt missing

<img src="img/niagara-couple.jpg" title="Niagara couple" />

(5) alt-text only in title of enclosing link, empty alt

<a title="Niagara couple" href="#"><img src="img/niagara-couple.jpg" alt="" /></a>

(6) alt-text in title of enclosing link, missing alt

<a title="Niagara couple" href="#"><img src="img/niagara-couple.jpg" /></a>

(6a) alt-text in title of linked image, missing alt

<a href="#"><img src="img/niagara-couple.jpg" title="Niagara couple" /></a>

(7) same alt-text in title of img, in title on enclosing link, and in alt attr.

<a title="Niagara couple" href="#"><img src="img/niagara-couple.jpg" /></a>

(8) same alt-text in title of img and in title on enclosing link, missing alt

<a title="Niagara couple" href="#"><img src="img/niagara-couple.jpg" title="Niagara couple" /></a>

(9) different alt-text in title of img and in title on enclosing link, missing alt

<a title="Niagara couple link title" href="#"><img src="img/niagara-couple.jpg" title="Niagara couple image title" /></a>

(10) three different alt-texts in title of img, in title on enclosing link, and in alt

<a title="Old Niagara couple link title" href="#"><img src="img/niagara-couple.jpg" title="Niagara couple photo" alt="Niagara couple" /></a>

(11) same alt-texts in title of img, alt, and in link text

<a href="#"><img src="img/niagara-couple.jpg" title="Niagara couple" alt="Niagara couple" />Niagara couple</a>

Niagara couple

(12) same alt-texts in title of img, alt, but different link text

<a href="#"><img src="img/niagara-couple.jpg" title="Niagara couple" alt="Niagara couple" />Old Niagara couple</a>

Old Niagara couple

(13) identical aria-label on link, same alt-texts in title of img, alt, but different link text

<a href="#" aria-label="Niagara couple"><img src="img/niagara-couple.jpg" title="Niagara couple" alt="Niagara couple" />Old Niagara couple</a>

Old Niagara couple

(14) different aria-label on link, same alt-texts in title of img, alt, but different link text, same aria-label in link

<a href="#" aria-label="Niagara couple, old photo"><img src="img/niagara-couple.jpg" title="Niagara couple" alt="Niagara couple" />Old Niagara couple</a>

Old Niagara couple

(15) different aria-label, different img alt-text, different title on link

<a href="#" aria-label="Niagara couple, old photo" title="what a couple" ><img src="img/niagara-couple.jpg" alt="Niagara couple" />Old Niagara couple</a>

Old Niagara couple

(16) different aria-label from img alt-text, title on link same as aria-label on link

<a href="#" aria-label="Niagara couple, old photo" title="Niagara couple, old photo" ><img src="img/niagara-couple.jpg" alt="Niagara couple" />Old Niagara couple</a>

Old Niagara couple

Notes

• 1) Windows 8.1, FF, NVDA 2015.4: No difference in output when activating "Report tooltips" in Preferences > Object presentation
• 2) Windows 8.1, IE, NVDA 2015.4: No difference in output when activating "Report tooltips" in Preferences > Object presentation

last updated: 12. Aug 2022