Skip to content

Commit

Permalink
Link Examples: Remove link 4 and Strengthen Visual Focus Indicator
Browse files Browse the repository at this point in the history 
Per issue #228, make changes to examples/link/link.html:

1. Remove link 4, which used a background image that disappears in Windows high contrast mode.
2. Edit introduction, states and properties table, and source code section  to reflect removal of link 4.
3. Change CSS to fix disappearance of custom focus ring on link 3.
4. Change CSS to make the custom focus ring more visually distinct.
  • Loading branch information
@mcking65
Michiel Bijl authored and mcking65 committed Feb 14, 2017
1 parent 0d6b2d0 commit d84d9a2
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 60 deletions.
40 changes: 14 additions & 26 deletions examples/link/css/link.css
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,22 @@
[role="link"]
{
color: #009;
background: transparent;
text-decoration: underline;
border: thin solid transparent;
[role="link"] {
color: #009;
background: transparent;
text-decoration: underline;
}

[role="link"]:hover, [role="link"]:focus, [role="link"]:active
{
color:#000;
border-color: #fc0;
cursor: pointer;
[role="link"]:hover,
[role="link"]:focus,
[role="link"]:hover::before,
[role="link"]:focus::before {
color:#000;
cursor: pointer;
outline: .2em solid hsl(219, 63%, 44%);
outline-offset: .2em;
}

[role="link"].link3:before {
[role="link"].link3::before {
display: block;
content: url('../images/w3c-logo.png');
width:153px;
height:104px;
height:104px;
}

[role="link"].link4 {
display: block;
background-repeat: no-repeat;
background-image: url('../images/w3c-logo.png');
width:153px;
height:104px;
}

td div {
margin-bottom: 0.25em;
font-weight: bold;
}
44 changes: 10 additions & 34 deletions examples/link/link.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
<script src="js/link.js" type="text/javascript"></script>
</head>
<body>
<main>
<main>
<h1>Link Examples</h1>
<p>
<strong>NOTE:</strong> provide feedback on this example page in
<strong>NOTE:</strong> provide feedback on this example page in
<a href="https://github.com/w3c/aria-practices/issues/228">issue 228.</a>
</p>
<p>
The examples below demonstrate four variations of the
The examples below demonstrate three variations of the
<a href="../../#link">design pattern for link</a>.
The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
</p>
Expand Down Expand Up @@ -50,7 +50,7 @@ <h2 id="ex_label">Examples</h2>
<code>span</code> element with text content.
</th>
<td id="ex1">
<span
<span
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
Expand All @@ -67,12 +67,12 @@ <h2 id="ex_label">Examples</h2>
<code>img</code> element with <code>alt</code> attribute.
</td>
<td id="ex2">
<img
<img
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')"
src="images/w3c-logo.png"
src="images/w3c-logo.png"
alt="W3C Website">
</td>
</tr>
Expand All @@ -84,32 +84,13 @@ <h2 id="ex_label">Examples</h2>
CSS <code>:before</code> content property on a <code>span</code> element.
</td>
<td id="ex3">
<span
<span
tabindex="0"
role="link"
class="link3"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
aria-label="W3C website">
</span>
</td>
</tr>
<tr>
<th>
4
</th>
<td>
CSS background image on a <code>span</code> element.
</td>
<td id="ex4">
<span
tabindex="0"
role="link"
class="link4"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
aria-label="W3C website">
</span>
aria-label="W3C website"></span>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -155,7 +136,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<td><code>span</code><br><code>img</code></td>
<td>
<ul>
<li>Examples 1, 3, and 4: Identifies the <code>span</code> element as a <code>link</code>.</li>
<li>Examples 1 and 3: Identifies the <code>span</code> element as a <code>link</code>.</li>
<li>Example 2: Identifies the <code>img</code> element as a <code>link</code>.</li>
</ul>
</td>
Expand All @@ -179,7 +160,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<th scope="row"><code>aria-label</code></th>
<td><code>span</code></td>
<td>
Examples 3 and 4: Defines the accessible name of the link.
Example 3: Defines the accessible name of the link.
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -213,15 +194,10 @@ <h3 id="sc3_label">Link 3</h3>
<div role="separator" id="sc3_start_sep" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of"></div>
<div id="sc3"></div>
<div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
<h3 id="sc4_label">Link 4</h3>
<div role="separator" id="sc4_start_sep" aria-labelledby="sc4_start_sep sc4_label" aria-label="Start of"></div>
<div id="sc4"></div>
<div role="separator" id="sc4_end_sep" aria-labelledby="sc4_end_sep sc4_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.add('sc2', 'ex2');
sourceCode.add('sc3', 'ex3');
sourceCode.add('sc4', 'ex4');
sourceCode.make();
</script>
</section>
Expand Down

0 comments on commit d84d9a2

Please sign in to comment.