name: Inline links are distinguishable
description: |
This rule checks that links that are embedded in a block of text and where color alone is used to identify them, have a sufficient color contrast ratio with the surrounding text, and additional cues are given when the link receives focus or hover.
success_criterion:
test_aspects:
authors:
- Wilco Fiers
- Jennifer Chadwick
- Anne Thyme Nørregaard
Test procedure
Applicability
The rule applies to any HTML or SVG element with the semantic role of link that lives up to the following criteria:
Expectation 1
Within the same block of text the contrast ratio is 3:1 or greater between either
Expectation 2
When the link's focus state is triggered, the link has a distinguishing style, a distinguishing border, a distinguishing box-shadow or a background-image.
Expectation 3
When the link's hover state is triggered, the link has a distinguishing style, a distinguishing border, a distinguishing box-shadow or a background-image.
Assumptions
- This tests assumes that distinguishing style, distinguishing border or one of the following CSS properties is used to make the link visually evident: color, background-color or background-image.
- This test assumes that the 3:1 contrast ratio between link text and surrounding text is sufficient to meet WCAG 2.0. This value is part of technique G183, but is not specified in the 1.4.1 success criterion.
- The methods described in distinguishing style is assumed to be sufficiently distinguishable.
- The methods described in distinguishing border is assumed to be sufficiently distinguishable.
- The methods described in distinguishing box-shadow is assumed to be sufficiently distinguishable.
Accessibility Support
There are no major accessibility support issues known for this rule.
Background
Test Cases
@@@ Test cases: breaks, margins, content in lots of spans etc.
Passed
<!-- Link uses the browser's default link styling -->
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
<!-- Blue link in block of black text with text-decoration none has underline on hover and focus -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Block of text only consist of one letter that is not contained within a link -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>A<a href="http://w3.org/WAI"> link text</a></p>
</body><!-- -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on hover/focus is change in font-family-->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
}
a:hover, a:focus {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on hover/focus is change in font-weight -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-weight: normal;
}
a:hover, a:focus {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on hover/focus is italics -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-style: normal;
}
a:hover, a:focus {
font-style: italic;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on hover/focus is change of background-color -->
<head>
<style>
p {
color: black;
background-color: white;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
background-color: red;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on hover/focus is background-image -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
background-image: url("arrow.gif");
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Button that is styled to look like a link and has role of link -->
<head>
<style>
p {
color: black;
}
button {
background:none;
color:blue;
border:none;
padding:0;
font: inherit;
cursor: pointer;
}
button:hover, button:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <button role="link">button that acts like a link</button>.</p>
</body>´´´html
´´´
´´´html
´´´
Failed
@@@ split out and a: link underlined
<!-- Too low contrast between link text and surrounding text-->
<head>
<style>
p {
color: red;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- No additional cues on hover -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- Additional cues on focus -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>´´´html
´´´
Inapplicable
<!-- -->
<!-- <a> element doesn't have href="", so it doesn't have role of link -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a>a element without href attribute</a>.</p>
</body><!-- <a> element has had it's role changed -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI" role="button">link that has had its role changed</a>.</p>
</body><!-- No visible text in the block of text the link is contained within -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="http://w3.org/WAI">Read more</a><span style="display:none">about our latest organisational changes.</span></p>
</body><!-- Breadcrumb with only links and separator characters -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>... / <a>About us</a> / <a>CSR</a> / <a>Accessibility</a></p>
</body><!-- -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text<a href="http://w3.org/WAI"></a>.</p>
</body><!-- Link is underlined, therefore this rule is not applicable -->
<head>
<style>
p {
color: black;
}
a:link {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body><!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <span style="text-decoration: underline;"><a href="http://w3.org/WAI">link text that is underlined</a><span>.</p>
</body><!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="http://w3.org/WAI">link 1</a> | <a href="http://w3.org/WAI">link 2</a>.</p>
</body><!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI"><span style="text-decoration: underline;">link text that is underlined<span></a>.</p>
</body><!-- -->
<!-- button that looks like a link but has the role of button -->
<head>
<style>
p {
color: black;
}
button {
background:none;
color:blue;
border:none;
padding:0;
font: inherit;
cursor: pointer;
}
button:hover {
text-decoration: underline;
}
button:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <button>button that acts like a link</button>.</p>
</body><!-- Link text color has too low contrast with background, but this is a violation of success criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced), not 1.4.1 Use of Color -->
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
<!-- Blue link in block of black text with text-decoration none has underline on hover and focus -->
<head>
<style>
p {
color: black;
background-color: white;
}
a:link {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>@@@ add a:focus test cases for Passed test cases
@@@ fix up text color in first failed test case
@@@ comments in test cases about why they are failing
Definitions
Block of text
A block of text is a run of phrasing content containing no consecutive line breaks.
Contained within one block-like ancestor
has rendered text or phrasing content with rendered text
If more than one br element is used, followed by additional rendered text or phrasing content with rendered text, this is considered a new block of text.
What if preelement is used?
Distinguishing Border
Look at the width, style, and color of the border-top, border-bottom or outline.
For one of these to be a distinguishing border, all the following must be true:
- The *-width is greater than 0
- The *-style is not set to none
- The *-color is not transparent
If either border-top, border-bottom or outline is distinguishable, the element has a distinguishing border.
Assumptions
- Use of a border, of 1 or more pixels, not set to none, and not with a color of transparent, is assumed to be sufficiently distinguishable.
Distinguishing style
Compare the style properties font-family, font-weight, font-style, text-decoration of the element to that of the surrounding text.
If any of the properties have a different value for the one than for the other, the style is distinguishable.
Assumptions
- This definition assumes that one of the following shorthand CSS properties (or the related expanded properties e.g. font-family) is used to make the element visually evident: font or text-decoration
- This definition assumes that any change in font is sufficiently distinguishable, and that fonts are loaded when they are present
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent