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