Warning:
This wiki has been archived and is now read-only.
Moved permanently 10
Status
Contents
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, thetitle
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.
aria-label
or aria-labelledby
attribute sufficient and should be handled here?
Test properties
Property | Possible values |
---|---|
Success Criterion | 1.1.1 Non-text Content |
Test mode | SemiAuto |
Test environment | rendered page |
Test subject | web page state |
Test procedure
Selector
earl:automatic
//img[@alt=""]
Step 1
earl:automatic
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
earl:manual
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
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-pass1 |
Outcome | passed |
Pointer | position |
Info |
else return
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-fail1 |
Outcome | failed |
ErrorMessage | ALT attribute not sufficiently descriptive. |
Pointer | position |
Info |
Step 3
earl:automatic
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
earl:automatic
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
earl:automatic
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
earl:manual
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
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-pass2 |
Outcome | passed |
Pointer | position |
Info |
else return
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-fail2 |
Outcome | failed |
ErrorMessage | ALT attribute not sufficiently descriptive. |
Pointer | position |
Info |
Step 7
earl:manual
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
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-fail3 |
Outcome | failed |
ErrorMessage | Empty ALT attribute on image with informational content. |
Pointer | position |
Info |
Step 8
earl:automatic
Check if the <img>
element has a non-empty <title>
attribute.
if yes, return
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-fail4 |
Outcome | failed |
ErrorMessage | Non-empty title attribute combined with empty ALT attribute on image with no informational content. |
Pointer | position |
Info |
else return
Property | Value |
---|---|
TestCase | SC1-1-1-img-empty-alt |
Identifier | SC1-1-1-img-empty-alt-pass3 |
Outcome | passed |
Pointer | position |
Info |