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.
  • 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.

 

Categories: Development

About Steve Faulkner

Steve is the Technical Director at TPGi. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group.

Comments

Anon says:

Just for clarification, does this mean both alt and title should be used?

Steve Faulkner says:

Just for clarification, does this mean both alt and title should be used?

I strongly suggest if you want to provide a text alternative for an image use the alt attribute and follow the advice in the HTML spec on providing text to act as an alternative for images. In regards to title attribute usage refer to Using the HTML title attribute.

I’m surprised there is no mention of what happens when the image fails to load or anything. As far as I know, browsers in this case show the alt text, not the title.

Steve Faulkner says:

hi Thierry, I looked into this a few (5) years back: alt and title content display in popular browsers.

Hi Steve, it seems the following does not display anything in Safari, Firefox, and IE:

[img src=”broken.jpg” title=”testing”]

or this:

[img src=”broken.jpg” title=”testing” alt=””]

I believe that’s what the specs say they’re supposed to do; I don’t think Chrome should use “title” as a fallback.

Steve Faulkner says:

Hi Thierry,

I have argued that this statement from the HTML5 Spec:

The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute.

Means that as well as not displaying alt content as a tooltip, title content is not to be displayed as replacement text for an image.