Go to overview: WAI-ARIA techniques with code examples

Using aria-label to compensate for a missing alt attribute on an image

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de) - Twitter: @wcagtest
Last update: 15 May 2013

Introduction

This example explores if assistive technology (AT) will use the value of aria-label to compensate for the missing alt attribute of an image, i.e. whether AT will use the value supplied in aria-label as accessible name instead.

The context of this exploration is the revision of WCAG Failures in the light of new WAI-ARIA Techniques. The goal of the revision is to ensure that the techniques described in WCAG Common Failures clearly fail WCAG Success Criteria.

The Failure in question here is F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image". When aria-label is used on an image without alt attribute and AT commonly uses aria-label to provide the accessible name, then arguably, the test in the Failure Technique should also check for the existence of a descriptive aria-label attribute and only fail the content if such attribute is not present or its value not sufficiently descriptive for the image in question.

Please note that dropping the alt attribute and replacing it with aria-label is not a recommended practice. The alt attribute is still required for images and omitting it will result in a validation error. Ommitting the alt attribute will also cause severe problems for people still stuck with equipment and older browsers / screen readers that do not (sufficiently) support ARIA.


Example 1: just aria-label

Example 2: aria-label and title

Example 3: just title


Results

For those user agents and screen readers that support aria-label, this attribute takes precedence over the title attribute (i.e. title is not spoken when aria-label is present and supported).

Win 7, IE 9, JAWS 14 Supported
  • Arrowing example 1: JAWS speaks aria-label graphic - naked mole rat
  • Arrowing example 2: JAWS speaks aria-label graphic - naked mole rat, ignores title
  • Arrowing example 3: JAWS speaks title graphic - ugliest animal
Win 7, FF 18, JAWS 14 supported Same results as in IE9.
Win 7, IE9, NVDA 2012.2.1 Not supported
  • Arrowing example 1: NVDA ignores aria-label, speaks filename graphic - ugly
  • Arrowing example 2: NVDA ignores aria-label, speaks title graphic - ugliest animal
  • Arrowing example 3: NVDA speaks title graphic - ugliest animal
Win 7, FF 18, NVDA 2012.2.1 Supported
  • Arrowing example 1: NVDA speaks aria-label graphic - naked mole rat
  • Arrowing example 2: NVDA speaks aria-label graphic - naked mole rat, ignores title
  • Arrowing example 3: NVDA speaks title graphic - ugliest animal
Mac OS 10.6.8, VoiceOver Supported? not yet tested
iOS 6.1, Safari, VoiceOver (iPad mini) Supported
  • Arrowing or touching example 1: VO speaks aria-label naked mole rat - image
  • Arrowing or touching example 2: VO speaks aria-label naked mole rat - image, ignores title
  • Arrowing or touching example 3: VO speaks ignores itle, speaks file name ugly - jpg, image
Android 4.1.2, Firefox, Talkback (Sony Xperia Z) Supported Same behavior in swiping and touch exploration.
  • Arrowing or touching example 1: Talkback speaks aria-label graphic - naked mole rat
  • Arrowing or touching example 2: Talkback speaks aria-label graphic - naked mole rat, ignores title
  • Arrowing or touching example 3: Talkback speaks title graphic - ugliest animal
Win 7, IE 9, SaToGo Not supported System Access SaToGo ignores aria-label.
  • Arrowing, example 1: SatoGo does not speak the image (also no file name as fallback)
  • Arrowing, example 2: SatoGo speaks title ugliest animal, ignores aria-label
  • Arrowing, example 3: Talkback speaks title ugliest animal