Moved permanently 10

Status

Description

This test checks that <img> elements providing an empty alt attribute are solely for decorative purposes or part of a group of images, of which one provides a sufficient text alternative. Furthermore, it tests if the title attribute is not set.

• The value of an alt attribute may be null,
  • if the image is solely for decorative purposes.
  • if the image is part of a group of images and one adjacent item contains the text alternative for the group.
  • if the image is part of a link and the link-text is sufficiently descriptive.
  • if a non empty aria-label attribute is set.
  • if a aria-labelledby attribute is set pointing to a non empty element.
• If the value of the alt attribute is null and the image is solely for decorative purposes, the title attribute must be not set or empty.

Background

• ARIA6: Using aria-label to provide labels for objects
• ARIA10: Using aria-labelledby to provide a text alternative for non-text content
• F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
• G196: Using a text alternative on one item within a group of images that describes all items in the group
• H2: Combining adjacent image and text links for the same resource
• H30: Providing link text that describes the purpose of a link for anchor elements
• H37: Using alt attributes on img elements
• H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Assumptions

• The selector //img[@alt=""] matches the null value or the empty string, it does not match the negation of non-empty.

Test properties

Test procedure

Selector

//img[@alt=""]

Step 1

Check if the <img> element has adjacent siblings of type <img>, of which one has a non-empty alt attribute.

if yes, continue with #Step 2

else continue with #Step 3

Step 2

Present the image in context with the other images of the group and their corresponding alternative text to the user.
Question: Does the text sufficiently describe the image group?

if yes, return

else return

Step 3

Check if the <img> element has a non-empty <aria-label> attribute.

if yes, continue with #Step 6

else continue with #Step 4

Step 4

Check if the <img> element has a non-empty <aria-labelledby> attribute.

if yes, continue with #Step 6

else continue with #Step 7

Step 5

Check if the <img> element is part of an a element containing additional text.

if yes, continue with #Step 6

else continue with #Step 7

Step 6

Present the image and the corresponding alternative text to the user.
Question: Does the text sufficiently describe the image? Is there any textual information contained in the image and is this information also written in the text?

if yes, return

else return

Step 7

Present the image to the user.
Question: Is this image solely for decorative purposes and does not contain information?

if yes, continue with #Step 8

else return

Step 8

Check if the <img> element has a non-empty <title> attribute.

if yes, return

else return