Warning:
This wiki has been archived and is now read-only.
SC1-1-1-css-image
This test case belongs to 1.1.1 Non-text Content
Status
Contents
Description
This test checks that images do not convey information when added to the page using CSS. If the image conveys information, it is checked for a description provided in text nearby.
Background
- C9: Using CSS to include decorative images
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
- Detecting Text in Natural Scenes with Stroke Width Transform
Assumptions
- Readable characters can be formed on a space of minimum 5 x 3 pixels. This test assumes that no images are used for applying vertical text.
- Additionally to the tests defined here, the image can be processed to detect shapes, symmetry or characters.
Test properties
Property | Value |
---|---|
Test name | CSS background decorative |
Success Criterion | 1.1.1 Non-text Content |
Test mode | SemiAuto |
Test environment | rendered page |
Test subject | web page state |
User expertise and skills | no prior knowledge |
User profile | Requires sight |
Test procedure
Selector
earl:automatic
Single element, which background property contains one or more URIs
-
object.style.background.match(url)
-
object.style.backgroundImage.match(url)
-
object.style.listStyle.match(url)
-
object.style.listStyleImage.match(url)
Note that the computed style has to be analyzed. Depending on the rendering technology these can be retrieved by using runtimeStyle
, currentStyle
or getComputedStyle
.
Step 1
earl:automatic
Check if the computed backgroundRepeat
property is set and its value is other than no-repeat.
if yes, return
Property | Value |
---|---|
TestCase | SC1-1-1-css-image |
Identifier | SC1-1-1-css-image-pass1 |
Outcome | passed |
Pointer | position |
Info |
else continue with #Step 2
Step 2
earl:automatic
Check if the height of all images added by the background-property is less or equals 5 pixels or its width is less or equals 3 pixels.
if yes, return
Property | Value |
---|---|
TestCase | SC1-1-1-css-image |
Identifier | SC1-1-1-css-image-pass2 |
Outcome | passed |
Pointer | position |
Info |
else continue with #Step 3
Step 3
earl:manual
Check if the element is really used for solely decorative purposes.
To prepare the element for presentation to the user, all calculated CSS properties of the element must be stored and its child elements must be removed.
User input question
Item presented to the user: Element containing background images without child elements but with previously calculated CSS properites applied.
Question: Is this image solely for decorative purposes?
Answer options: "yes/no"
Help text: Answer with 'Yes', if it is a decorative image such as a separator, line or menu-background solely used for layout purposes or an image that doesn't convey information useful for understanding the content of the page.
Repair suggestion: none
Properties of the test step:
- context-sensitive = yes
- user interaction (with the web content) required = no
if yes, return
Property | Value |
---|---|
TestCase | SC1-1-1-css-image |
Identifier | SC1-1-1-css-image-pass3 |
Outcome | passed |
Pointer | position |
Info |
else continue with #Step 4
Step 4
earl:manual
Get the current elements nearest ancestor with its display style set to block. Get any text from this ancestor, including shadow dom text and assign it to variable T1.
To prepare the element for presentation to the user, all calculated CSS properties of the element must be stored and its child elements must be removed.
User input question
Item presented to the user: Element containing background images without child elements but with previously calculated CSS properites applied.
Question: Does T1 sufficiently describe the element?
Answer options: "yes/no"
Help text: If the element shows content, which is redundant T1, answer 'Yes'. Otherwise, or if the element provides any functionality, answer 'No'.
Repair suggestion: If no, could you suggest a sufficient textual alternative?
Properties of the test step:
- context-sensitive = yes
- user interaction (with the web content) required = yes
if yes, return
Property | Value |
---|---|
TestCase | SC1-1-1-css-image |
Identifier | SC1-1-1-css-image-pass4 |
Outcome | passed |
Pointer | position |
Info |
else return
Property | Value |
---|---|
TestCase | SC1-1-1-css-image |
Identifier | SC1-1-1-css-image-fail1 |
Outcome | failed |
ErrorMessage | The image added by CSS is not decorative and not described in adjacent text. |
Pointer | position |
Info | Suggestions for texual alternative: {collection of repair-answers} |