SIA-R62Links in blocks of text are distinguishable

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

1.4.1 Use of Color

Description

This rule checks that inline links are distinguishable from the surrounding text through a difference not based on color alone.

Applicability

This rule applies to every element in the HTML namespace whose semantic role is or inherits from link, where the element:

has visible text nodes as descendants in the flat tree; and
has an ancestor in the flat tree which has a semantic role of paragraph, and has visible text nodes as descendants in the flat tree that aren't also descendants in the flat tree of an element whose semantic role is or inherits from link. We refer to these text nodes as the surrounding text and to the ancestor with a role of paragraph as the container.

Expectations

In each of the following states:
- the test target is neither focused nor hovered;
- the test target is hovered;
- the test target is focused;

and for each inclusive descendant of the container, there exist at least one distinguishable element which is either an inclusive descendant of the target, or an ancestor of the target that is not an ancestor of any surrounding text.

the distinguishable element may be the same in all states, or may be different; the reason for which they are distinguishable may also be the same or different in all states.

Links must also be distinguishable when they are visited. However, due to privacy concerns most browser only allow to change the color of the decorations between unvisited and visited links. Hence, the only way to have a link which is distinguishable when not visited, but indistinguishable when visited is to change the color of the decorations to the color of the background (and make them disappear that way). This rule doesn't check this corner case.

Assumptions

This rule makes the following assumptions:

Elements with a role of paragraph are used for blocks of text.
There is no content, such as a link icon, to indicate the presence of the link. If there is such content, the rule may fail while Success Criterion 1.4.1 Use of Color might still be satisfied.
The perceived visual styling of elements is the result of CSS styling applied to those elements and inherited from their ancestor elements. Through manipulation of the positioning and styles of other elements, including non inherited styles of ancestor elements, an element may end up with a perceived distinguishable style not resulting from its own and inherited styling. In that case, this rule might fail while the Success Criterion 1.4.1 Use of Color is still satisfied.

Accessibility support

This rule has no accessibility support concerns.

Examples

Passed

This link is underlined in all states (mimicking the default browser styling):

<style>
    a {
        color: blue;
        text-decoration: underline;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link has a border in all states:

<style>
    a {
        text-decoration: none;
        border: solid blue 1px;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link is in bold in all states (via its child element):

<style>
    a {
        text-decoration: none;
    }
</style>
<p>
    Hello <a href="#"><b>World</b></a>
</p>

Failed

This link is not distinguishable from its surrounding text:

<style>
    a {
        text-decoration: none;
        outline: none;
        cursor: default;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link is only distinguishable from its surrounding text when hovered or focused, but not in the default state:

<style>
    a {
        text-decoration: none;
    }
    a:hover,
    a:focus {
        text-decoration: underline;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link is not distinguishable from its surrounding text when hovered:

<style>
    a:hover {
        text-decoration: none;
        cursor: default;
    }
    p {
        cursor: default;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link is not distinguishable from its surrounding text when focused:

<style>
    a:focus {
        text-decoration: none;
        outline: none;
    }
</style>
<p>Hello <a href="#">World</a></p>

This link is only distinguishable from its surrounding text when hovered, the change of cursor is not enough to distinguish in other states:

<style>
    a {
        text-decoration: none;
        cursor: pointer;
        outline: none;
    }
    p {
        cursor: default;
    }
</style>
<p>Hello <a href="#">World</a></p>

Inapplicable

This document contains no link:

<p>Hello world</p>

This link has no paragraph ancestor:

<div>Hello <a href="#">World</a></div>

This link has no surrounding text:

<p><a href="#">Hello World</a></p>