Warning:
This wiki has been archived and is now read-only.

SC1-1-1-css-image

From Automated WCAG Monitoring Community Group
Jump to: navigation, search

This test case belongs to 1.1.1 Non-text Content

Status

Version 1.0: Completed

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

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

Test mode: 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

Test mode: 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

Test mode: 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

Test mode: 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

Test mode: 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}


Retrieved from "https://www.w3.org/community/auto-wcag/wiki/index.php?title=SC1-1-1-css-image&oldid=2268"