The problem.

Providing alternative text for non-focusable background images (background images that are not part of a focusable element).

Solutions

Using aria-label or aria-labelledby on divs and spans

The tests will consist of divs with a background image of the Google logo. The plan is to provide alternative text of those images using ARIA.

First we will try to provide its alternative text by using aria-label or aria-labelledby on the div tag without providing a role.

Then we will try the identical set-up except we will add a role of image.

If successful, assistive technologies will

• Recognize the element as an image, which means include it in a list of images on the page or when user navigates by images
• Announce the supplied text alternative for the image at the location where it is most appropriate.

Plain div with an aria-label

The alternative text provided by the aria-label must include the word "Image" since the div has no role.

We recommend this search engine.

Results:

Somewhat successful if screen reader announces the word "Google image" when user explores this text.

Since the element is not programmatically exposed as an image, assistive technologies cannot recognize it as such, The first criterion from the success list is already broken. But it gets worse:

• Jaws
  • With IE (11) - the words "Google Image" not announced anywhere.
  • With Firefox (42) - The words "Google Image" not announced anywhere
• NVDA:
  • With IE (11) - the text "Google Image" announced before "we recommend..." text when exploring page usin arrow keys.
  • With Firefox (42) - the text "Google Image" is announced before "we recommend..." text when you explore the page using arrow keys.

The reason for this lack of success is that, though technically allowed, the aria-label attribute is intended for elements that have a role. Divs and spans are pure containers when not mapped to an ARIA role, so assistive technologies often ignore the accessible names assigned to them using ARIA. NVDA has done a good job here and announces the aria-label text.

Adding an image role.

What if we mapped the container with the background image as an image?

The WAI-ARIA Spec defines a role attribute just for this purpose. The role is called "img".

The role can be used on a tag that contains an image or group of images that require a common text alternative.

The text alternative can be supplied by using an aria-label, aria-labelledby or alt attribute on the container tag that has role="img"

We cannot put the text alternative into the element with the img role, because the aforementioned ARIA specification says that its Children are presentational.

This means that any content inside the container should be ignored by assistive technologies.

The example

We recommend this search engine.

Test results

• Jaws:
  • With IE (11) - Does not recognize image or announce its text alternative.
  • With Firefox - Recognizes the div as an image and announces its text alternative.
• NVDA:
  • With IE (11) - Recognizes the image and announces its text alternative.
  • With FF (42) - Recognizes the image and announces its text alternative.

Conclusion

If one has to resort to an ARIA workaround for exposing a background image to assistive technologies one should:

1. Place the background image class on an empty html element (div or span preferably since they have no semantic meaning.
2. Add role="img" to that element.
3. Add alternative text using aria-label or alt attribute on the same element.