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

Update F73 to remove example 2 #3743

Closed
wants to merge 2 commits into from
Closed

Update F73 to remove example 2 #3743

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c519b3c
Update F73 to remove example 2
fstrr Mar 11, 2024
aa72a25
Update techniques/failures/F73.html
fstrr Mar 11, 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
67 changes: 35 additions & 32 deletions techniques/failures/F73.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,57 @@
<p>The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision). </p>
<p>While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.</p>
<div class="note">
<p>Red and Pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if surrounding text is RED and the link is PINK it would pass. Similarly a light green and a dark red differ BOTH by color AND by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.</p>
<p>Red and pink are the same color (hue) but they have different lightness (which is not color). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if surrounding text is red and the link is pink it would pass. Similarly a light green and a dark red differ <strong>both</strong> by color <strong>and</strong> by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.</p>
<p>There is no requirement that links be identifiable by people who cannot perceive color if they are not perceivable for those with color vision. (e.g. if the links are hidden for everyone – as in a game or test).</p>
<p>If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.</p>
<p>If the link is a different color and bold it would not fail because the boldness is not color dependent.</p>
</div>
</section><section id="examples"><h2>Examples</h2>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Links with no underlines and similar contrast to body text</h3>

<p>A Web page includes a large number of links within the body text. The links are styled so that they do not have underlines and are very similar in color to the body text. This would be a failure because users would be unable to differentiate the links from the body text.</p>

</section>
<section class="example">
<h3>Removing the underline from a link in a sentence or paragraph without providing another visual cue besides color</h3>

<h3>Links with no underlines and low contrast to body text</h3>
<p>A web page includes links inline with non-link text. The links are styled so that they do not have underlines in any state and have a contrast lower than 3:1 with the surrounding non-link text. This would be a failure because users would be unable to differentiate the links from the body text.</p>

<pre xml:space="preserve"><code class="language-html">&lt;head&gt;
&lt;style&gt;
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
body{
background-color: white;
color: black;
}
p a {
color: #1E2EB8;
text-decoration: none;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;There are many resources to find out more about the
&lt;a href="rain-in-spain.html"&gt;rain in spain&lt;/a&gt;.
&lt;a href="rain-in-spain.html"&gt;rain in spain&lt;/a&gt;.
&lt;/p&gt;
&lt;/body&gt;</code></pre>

<div class="note">
<p>If the visual cue is only provided on hover (as in the example above), it would still fail.
</p>
</div>

&lt;/body&gt;</code></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<ol>
<li>Check that each link in the page that is identifiable by color (hue) is visually identifiable via some other means (e.g., underlined, bolded, italicized, sufficient difference in lightness, etc). </li>
<li>Check that each link in the page that is identifiable by color (hue) is visually identifiable via some other means (e.g., underlined, bolded, italicized, sufficient difference in lightness, etc).</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>If check #1 is false, then this failure condition applies and the content fails this Success Criterion.</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>
</body></html>
</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>
</body>
</html>