Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dotted underline link technique and working example #4131

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+127 −0
Open

Dotted underline link technique and working example #4131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a5ae436
Set up dotted-underlines technique
hata6502 Nov 1, 2024
65a503b
Dotted underline link technique and working example
hata6502 Nov 1, 2024
526d49c
Tiny fix from preview
hata6502 Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions techniques/css/dotted-underlines.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using dotted underlines and colors that provides contrast ratio of 3:1 with surrounding text to links</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Using dotted underlines and colors that provides contrast ratio of 3:1 with surrounding text to links</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="sc">1.4.1</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>Applicability</h2>
<p>Pages there are a large number of links in the block of text.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color.</p>
<p>Use of Color a <a>relative luminance</a> difference of 3:1 or greater with the text around can be used to identify links and surrounding texts. To meet success criterion 1.4.1: Use of Color, use dotted lines as additional visual cue.</p>
<p>This technique is an alternative to use solid underlines. Solid underlines might be visually distracting for pages there are a large number of links in the block of text. Links are commonly used to indicate words or phrases that are links within a paragraph or other block of text. Even using underlines on hover or keyboard focus only, they might not be used for users with touch devices.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Links with dotted underlines and colors that provides contrast ratio of 3:1 in wiki pages</h3>
<p>The links in pages are medium-light blue (<code>#4D6BD5</code>) and the surrounding text is black (<code>#111111</code>). Links have a contrast of 3.9:1 with the surrounding text. Links also have minimal dotted underlines to reduce visually distracting in wiki pages there are a large number of links in the block of text.</p>
<pre xml:space="preserve"><code class="language-css">body {
color: #111111;
}

a {
color: #4D6BD5;
text-decoration: underline dotted;
}</code></pre>
<p class="working-example"><a href="../../working-examples/css-dotted-underline-link/">Working example of dotted underline link</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For each instance where color is used to convey information about text:</p>
<ol>
<li>Check that the <a>relative luminance</a> of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.</li>
<li>Check that the link has a dotted underline.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Checks #1 and #2 are true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../general/G182">G182</a></li>
<li><a href="../general/G183">G183</a></li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style">text-decoration-style - CSS: Cascading Style Sheets | MDN</a></li>
<li><a href="https://webaim.org/resources/linkcontrastchecker/">WebAIM: Link Contrast Checker</a></li>
</ul>
</section>
</body>
</html>
55 changes: 55 additions & 0 deletions working-examples/css-dotted-underline-link/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links with dotted underlines and colors that provides contrast ratio of 3:1 in wiki pages</title>
<style>
body {
max-width: 720px;
margin: 0 auto;
color: #111111;
}

a {
color: #4D6BD5;
text-decoration: underline dotted;
}

.solid a {
text-decoration: underline solid;
}
</style>
</head>

<body>
<h1>Links with <a href="https://example.com/">dotted underlines</a> and colors that provides contrast ratio of 3:1 in wiki pages</h1>

<p>
Use of Color a <a href="https://example.com/">relative luminance</a> difference of 3:1 or greater with the text around can be used to identify links and surrounding texts.
To meet <a href="https://example.com/">success criterion 1.4.1: Use of Color</a>, use dotted lines as additional visual cue.
</p>

<p>
This technique is an alternative to use <a href="https://example.com/">solid underlines</a>.
Solid underlines might be visually distracting for pages there are <a href="https://example.com/">a large number of links</a> in the block of text.
Links are commonly used to indicate <a href="https://example.com/">words</a> or <a href="https://example.com/">phrases</a> that are links within a paragraph or other block of text.
Even using underlines on <a href="https://example.com/">hover</a> or <a href="https://example.com/">keyboard focus</a> only, they might not be used for users with <a href="https://example.com/">touch devices</a>.
</p>

<div class="solid">
<h2>If the links on this page are changed to <a href="https://example.com/">solid underline</a>...</h2>

<p>
Use of Color a <a href="https://example.com/">relative luminance</a> difference of 3:1 or greater with the text around can be used to identify links and surrounding texts.
To meet <a href="https://example.com/">success criterion 1.4.1: Use of Color</a>, use dotted lines as additional visual cue.
</p>

<p>
This technique is an alternative to use <a href="https://example.com/">solid underlines</a>.
Solid underlines might be visually distracting for pages there are <a href="https://example.com/">a large number of links</a> in the block of text.
Links are commonly used to indicate <a href="https://example.com/">words</a> or <a href="https://example.com/">phrases</a> that are links within a paragraph or other block of text.
Even using underlines on <a href="https://example.com/">hover</a> or <a href="https://example.com/">keyboard focus</a> only, they might not be used for users with <a href="https://example.com/">touch devices</a>.
</p>
</div>
</body>
</html>