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" />

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" />

Niagara couple in alt

(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>

Niagara couple

(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>

Niagara couple

(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 coupleNiagara 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>

Niagara coupleOld Niagara couple

Results of screen reader tests

Note:The table cells show the spoken screen reader output when arrowing through content. The order of output willl be different when tabbing through content, e.g. "Niagara couple - Grafik - Link" (tabbing) instead of "Grafik - Link - Niagara couple" (arrowing).

Variants Win 8.1
FF 44
NVDA 2015.4 1)
Win 8.1
IE 11
NVDA 2015.4 2)
Win 8.1
Chrome 41
NVDA 2015.4
Win 8.1
FF 44
JAWS 17
Win 8.1
IE 11
JAWS 17
Win 8.1
Chrome 41
JAWS 17
iOS 9.2.1
Safari
VoiceOver
Android 5.0
Chrome
TalkBack (Samsung Galaxy Note)
(1) same alt-text in alt AND title Grafik - Niagara couple Grafik - Niagara couple Grafik - Niagara couple Grafik - Niagara couple Grafik - Niagara couple Grafik - Niagara couple Niagara couple - image Niagara couple - double tap to select
(2) different alt-text in alt AND title Grafik - Niagara couple in alt Grafik - Niagara couple in alt Grafik - Niagara couple in alt Grafik - Niagara couple in alt Grafik - Niagara couple in alt Grafik - Niagara couple in alt Niagara couple in alt - image -(2 sec) Niagara couple in title Niagara couple in alt - double tap to select
(3) alt-text in title, empty alt Grafik - Niagara couple [skipped] [skipped] [skipped] [skipped] [skipped] [skipped] [skipped]
(4) alt-text in title, alt missing Grafik - Niagara couple Grafik - Niagara couple [skipped] Grafik - Niagara couple Grafik - Niagara couple Grafik - Niagara couple Niagara couple - image Niagara couple - double tap to select
(5) alt-text only in title of enclosing link, empty alt Link - Niagara couple Link - Niagara couple Link - Niagara couple Link - Niagara couple Link - Niagara couple Link - Niagara couple Niagara couple - link Niagara couple - double tap to select
(6) alt-text in title of enclosing link, missing alt Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Niagara couple Link - Niagara couple Link - Niagara couple Link - Niagara couple Niagara couple - link - image Niagara couple - double tap to select
(6a) alt-text in title of linked image, missing alt Link - Niagara couple Link - Niagara couple Link - alt+title-test.html Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Niagara couple - link - image Niagara couple - double tap to select
(7) same alt-text in title of img and in title on enclosing link, and in alt attr. Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Niagara couple - link - image Niagara couple - double tap to select
(8) same alt-text in title of img and in title on enclosing link, missing alt Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Niagara couple - link - image Niagara couple - double tap to select
(9) different alt-text in title of img and in title on enclosing link, missing alt Link - Grafik - Niagara couple image title Link - Grafik - Niagara couple image title Link - Niagara couple link title Link - Grafik - Niagara couple image title Link - Grafik - Niagara couple image title Link - Grafik - Niagara couple image title Niagara couple link title - link - image Niagara couple link title- double tap to select
(10) three different alt-texts in title of img, in title on enclosing link, and in alt Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Niagara couple - link - image - (2 sec) Niagara couple photo Niagara couple - double tap to select
(11) same alt-texts in title of img, alt, and in link text Link - Grafik - Niagara couple Niagara couple Link - Grafik - Niagara couple Niagara couple Link - Grafik - Niagara couple Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Link - Grafik - Niagara couple Niagara couple Niagara couple - link Niagara couple Niagara couple - double tap to select
(12) same alt-texts in title of img, alt, but different link text Link - Grafik - Niagara couple Old Niagara couple Link - Grafik - Niagara couple Old Niagara couple Link - Grafik - Niagara couple Old Niagara couple Link - Grafik - Niagara couple Old Niagara couple Link - Grafik - Niagara couple Old Niagara couple Link - Grafik - Niagara couple Old Niagara couple Niagara couple Old Niagara couple - link Niagara couple Old Niagara couple - double tap to select

Notes