Short note on use of alt=”” and the title attribute

A discussion occured on A11ySlackers gitter channel last evening about whether use of the following markup pattern was a WCAG 2.0 failure:

<img src="a.gif" alt="" title="some text">

The Important Question

The more important question is this – does this markup pattern result in the desired outcome? i.e. is the title attribute content conveyed to users?

From adhoc testing (test page) with Firefox, Safari, IE, Chrome, Edge, Window Eyes, JAWS, Narrator and VoiceOver, it was found that neither of the following work reliably across browser and screen reader combinations.

non empty title with empty alt

<img src="a.gif" alt="" title="some text">

or this pattern:

non empty title with no alt

<img src="a.gif" title="some text">

There a number of reasons for this:

• alt="" is a standardised indication to screen reader software that the <img> is decorative and can be safely ignored. Testing by Powermapper from 2015: IMG with null ALT and non-null TITLE attributes found issues with alt="" + non-empty title.
• Absence of an alt attribute results, in some screen reading screen reader software, not conveying the <img> to users.
  • Note: Found this issue with JAWS 17 and Chrome 48 on Windows 10. Testing by Powermapper from 2015: IMG with TITLE Screen reader compatibility found no issues with this pattern.
• Some browsers implement the HTML5 requirement that alt="" is equal to role="presentation" which results in the <img> being removed from the accessibility tree, so despite there being a non empty title, the <img> is hidden.

Notes:

Absence of an alt attribute on the <img> element is non conforming in HTML5, except under very limited circumstances, although it is not considered a WCAG 2.0 failure. Refer to a Short note on alt in HTML.

Use of the title attribute is known to be an unreliable method to visually convey information to users. Refer to Using the HTML title attribute. This is part of the reason why the use of the title attribute to provide a text alternative for an image was deemed non conforming in HTML5. Some history.