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

Posted on Wednesday, 10 February 2016 by Steve Faulkner

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

 

About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group 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. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

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

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

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

Comments for this post are closed.