SC1-4-1-a

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

This test belongs to 1.4.1 Use of Color.

Status

Version 0.4: For review

Description

SC1-4-1-a checks if <a> elements meet 1.4.1 Use of Color.

This test checks if links within text are visually evident before they receive focus, in which case the test passes. If not, the test checks if the links have a significant contrast difference with the surrounding text. If this is the case, and if the link becomes visually evident when it receives focus and when it is hovered by a cursor, it also passes.

Background

Assumptions

  • This test assumes that the 3:1 contrast difference between text is minimal to what would be sufficient to meet WCAG 2.0. This value is part of G183 technique, but is not specified in the 1.4.1 success criterion.
  • This tests assumes that one of the following shorthand CSS-properties (or the related expanded properties) is used to make the link visually evident: background, border, color, font, or text-decoration.
  • This test assumes that any use of border will make links sufficiently distinguishable
  • This test assumes that the different font is presented to the user.

Test properties

Property Possible values
Test name Inline links are distinguishable
Success Criterion 1.4.1 Use of Color
Test mode automatic
Test environment Remote Controlled User Agent
Test subject single web page or DOM document fragment

Note: Tools only able to process HTML + CSS can implement the first two step and ignore step 3 through 4, returning 'cantTell' instead. A tool could ask the user to perform step 3 and 4 manually, in which case the test would be semi-automatic instead.

Test procedure

Selector

Test mode: earl:automatic


Select each element that matches a[href] that meets the following requirements:

  • link.textContent is non-empty text
  • Its nearest block-like ancestor has:
    • A different text color then the text color of the link
    • One or more child nodes of type text or containing text before or after the selected link

An element is considered 'block-like' when it's display style is set to one of the following: block, list-item, table, flex, grid, or any display value that starts with 'table-'.

Step 1

Test mode: earl:automatic


Determine computed style for the link and of the surrounding text. The background must be determined by finding the closest ancestor element with the css background property set, either containing an image or a color with a transparency great than 0.

  • Step 1a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
  • Step 1b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 1a or Step 1b was true, return:

Property Value
TestCase SC1-4-1-a
Identifier SC1-4-1-a-pass1
Outcome passed
Pointer position
Info


Else continue to #Step 2

Step 2

Test mode: earl:automatic


Determine color and background-color of the link and the surrounding text and compute
C1 = contrast difference of surrounding text color and link color
C2 = contrast difference surrounding text background color and link background color

If C1 or C2 is more than 3:1, continue to #Step 3

Else return

Property Value
TestCase SC1-4-1-a
Identifier SC1-4-1-a-fail1
Outcome failed
ErrorMessage The link is not sufficiently distinguishable from the surrounding text
Pointer position
Info


Step 3

Test mode: earl:automatic


Give focus to the link.

(As in step 1:) Determine computed style for the link and the surrounding text. The background must be determined by finding the closest ancestor element with its background set.

  • Step 3a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
  • Step 3b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 3a or Step 3b was true: Continue to #Step 4

Else return:

Property Value
TestCase SC1-4-1-a
Identifier SC1-4-1-a-fail2
Outcome failed
ErrorMessage The link is not sufficiently distinguishable from the surrounding text when it receives focus.
Pointer position
Info


Step 4

Test mode: earl:automatic


Remove the focus from the link.

Move the mouse pointer to the center of the link.

(As in step 1:) Determine computed style for the link and the surrounding text. The background must be determined by finding the closest ancestor element with its background set.

  • Step 4a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
  • Step 4b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 4a or Step 4b was true, return:

Property Value
TestCase SC1-4-1-a
Identifier SC1-4-1-a-pass2
Outcome passed
Pointer position
Info


Else return:

Property Value
TestCase SC1-4-1-a
Identifier SC1-4-1-a-fail3
Outcome failed
ErrorMessage The link is not sufficiently distinguishable from the surrounding text when it is hovered over with the mouse pointer.
Pointer position
Info