Skip to content

Commit

Permalink
Dotted underline link technique and working example
Browse files Browse the repository at this point in the history
  • Loading branch information
@hata6502
hata6502 committed Nov 1, 2024
1 parent a5ae436 commit 65a503b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 20 deletions.
47 changes: 27 additions & 20 deletions techniques/css/dotted-underlines.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,71 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Technique Title</title>
<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>Technique Title</h1>
<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 class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
<p id="sc"><!-- SC to which this applies --></p>
<p id="type"><!-- sufficient, advisory, or failure --></p>
<p id="sc">1.4.1</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>Applicability</h2>
<p class="instructions">Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc. Do not add references to the part of WCAG to which the technique relates; this is taken from the Understanding pages and inserted in technique pages upon publication.</p>
<p>Pages there are a large number of links in the block of text.</p>
</section>
<section id="description">
<h2>Description</h2>
<p class="instructions">Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.</p>
<p>The objective of this technique is to ...</p>
<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>
<p class="instructions">Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.</p>
<section class="example">
<h3>Example Title</h3>
<p>Description</p>
<code>Code sample</code>
<p class="working-example"><a href="../../working-examples/{example-name}/">Working example of {Example Title}</a></p>
<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>
<p class="instructions">Tests must have a test procedure and expected results. Populate the following sections as appropriate. If a technique has multiple alternative testing approaches, add a new section with class="test" for each one, and put the test-procedure and test-results sections inside that.</p>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For each instance where color is used to convey information about text:</p>
<ol>
<li>Step 1</li>
<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>Result</li>
<li>Checks #1 and #2 are true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<p class="instructions">Provide links to other techniques that users should consider. This section is optional.</p>
<ul>
<li>ID</li>
<li><a href="../general/G182">G182</a></li>
<li><a href="../general/G183">G183</a></li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<p class="instructions">Provide links to external resources that are relevant to users of the technique. This section is optional.</p>
<ul>
<li>Link</li>
<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>
Expand Down
53 changes: 53 additions & 0 deletions working-examples/css-dotted-underline-link/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Allowing for text spacing without wrapping</title>
<style>
body {
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>

0 comments on commit 65a503b

Please sign in to comment.