Skip to content

Commit

Permalink
Updated link examples to latest example template
Browse files Browse the repository at this point in the history 
Made the following updates for issue #228:
* updated link examples to use new example template
* fixed bug in CSS
* updated description
* Editorial revisions to link example page.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Feb 6, 2017
1 parent 073a4b0 commit 7898a65
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 141 deletions.
9 changes: 7 additions & 2 deletions examples/link/css/link.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,22 @@
cursor: pointer;
}

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

[role="link"].w3c2 {
[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;
}
301 changes: 162 additions & 139 deletions examples/link/link.html
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARIA Example: link role</title>
<meta name="generator" content="BBEdit 10.5" />
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<link href="css/link.css" rel="stylesheet">
<script src="js/link.js" type="text/javascript"></script>
</head>
<body>
<h1>ARIA Example: <code>link</code> role</h1>
<p>
This page requires updates as described in
<a href="https://github.com/w3c/aria-practices/issues/228">issue 228.</a>
</p>
<meta charset="utf-8" />

<main>
<title>Link Examples | WAI-ARIA Authoring Practices 1.1</title>

<h2>Creating links using <code>role=link</code></h2>
<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>

<p> <a href="../../#h-link">Authoring Practice Design Patten for Link</a></p>
<p><strong>Note:</strong> When using HTML use the <code>&lt;a&gt;</code> element. It is recommended that authors not re-purpose other elements to create links.</p>
<h2 id="id1">Example Links</h2>
<div id="example">
<table aria-labelledby="id1">
<!-- js and css for this example. -->
<link href="css/link.css" rel="stylesheet">
<script src="js/link.js" type="text/javascript"></script>
</head>
<body>
<main>
<h1>Link Examples</h1>
<p>
<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
<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>
<p><strong>Note:</strong> Use the HTML <code>a</code> element to create links whenever possible.</p>
<section>
<h2 id="ex_label">Examples</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<table>
<thead>
<tr>
<th>Technique</th>
<th>Number</th>
<th>Description</th>
<th>Link</th>
<th>Accessibility Features</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>span</code> element with text content</td>
<th>
1
</th>
<td>
<div id="ex1">
<span tabindex="0"
<code>span</code> element with text content.
</th>
<td id="ex1">
<span
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')">
W3C website
</span>
</div>
</td>
<td>
<ul>
<li><code>span</code> element with <code>role="link"</code>.</li>
<li><code>span</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>span</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>span</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name (e.g. what a screen reader will say) from child text content of <code>span</code> element.</li>
</ul>
</td>
</tr>
<tr>
<td><code>img</code> element</td>
<td>
<div id="ex2">
<img tabindex="0"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')"
role="link"
src="images/w3c-logo.png" alt="W3C Website">
</div>
</td>
<td>
<ul>
<li><code>img</code> element with <code>alt</code> attribute.</li>
<li><code>img</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>img</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>img</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name from <code>alt</code> attribute.</li>
</ul>
</td>
<th>
2
</th>
<td>
<code>img</code> element with <code>alt</code> attribute.
</td>
<td id="ex2">
<img
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onKeyDown="goToLink(event, 'http://www.w3.org/')"
src="images/w3c-logo.png"
alt="W3C Website">
</td>
</tr>
<tr>
<td>Content</td>
<th>
3
</th>
<td>
<div id="ex3">
<span aria-label="W3C website"
tabindex="0"
role="link"
class="w3c1"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
</span>
</div>
CSS <code>:before</code> content property on a <code>span</code> element.
</td>
<td>
<ul>
<li><code>span</code> element with background image and with <code>role="link"</code>.</li>
<li><code>span</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>span</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>span</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name from <code>aria-label</code> attribute.</li>
</ul>
<td id="ex3">
<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>
<td>Background Image</td>
<th>
4
</th>
<td>
<div id="ex4">
<span aria-label="W3C website"
tabindex="0"
role="link"
class="w3c2"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onKeyDown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')">
</span>
</div>
CSS background image on a <code>span</code> element.
</td>
<td>
<ul>
<li><code>span</code> element with background image and with <code>role="link"</code>.</li>
<li><code>span</code> element has <code>onclick</code> event to handle mouse clicks.</li>
<li><code>span</code> element has <code>onkeydown</code> event to handle keyboard support.</li>
<li><code>span</code> element has <code>tabindex="0"</code> to become part of tab order of the page.</li>
<li>Accessible name from <code>aria-label</code> attribute.</li>
</ul>
<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>
</td>
</tr>
</tbody>
</table>
</div>

<h2 id="id_kbd">Keyboard Support</h2>

<table aria-labelledby="id_kbd">
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label">
<thead>
<tr>
<th>Key</th>
Expand All @@ -137,71 +124,107 @@ <h2 id="id_kbd">Keyboard Support</h2>
</thead>
<tbody>
<tr>
<td>Enter/Return</td>
<td>Activate link</td>
<th><kbd>enter</kbd></th>
<td>
Activates the link.
</td>
</tr>
</tbody>
</table>
</section>

<h2 id="id_rps">ARIA Roles, Properties and States</h2>

<table aria-labelledby="id_rps">
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<thead>
<tr>
<th>Role</th>
<th>Property/State</th>
<th>Component</th>
<th>Usage</th>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>link</td>
<th scope="row"><code>link</code></th>
<td>
</td>
<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>Example 2: Identifies the <code>img</code> element as a <code>link</code>.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<td>span</td>
<td>Identify element with the link behavior</td>
<th scope="row"><code>tabindex=&quot;0&quot;</code></th>
<td><code>span</code>, <br/><code>img</code></td>
<td>Includes the link element in the page tab sequence.</td>
</tr>
<tr>
<td></td>
<td>aria-label</td>
<td>span</td>
<td>Define accessible name for link.</td>
<th scope="row"><code>alt</code></th>
<td><code>img</code></td>
<td>
Example 2: Defines the accessible name of the link.
</td>
</tr>
<tr>
<td></td>
<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.
</tr>

</tbody>
</table>
</section>

<script src="../js/examples.js" type="text/javascript"></script>

<h2>Source Code</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>CSS: <a href="css/link.css" type="tex/css">link.css</a></li>
<li>Javascript: <a href="js/link.js" type="text/javascript">link.js</a></li>
<li>
CSS:
<a href="css/link.css" type="tex/css">link.css</a>
</li>
<li>
Javascript:
<a href="js/link.js" type="text/javascript">link.js</a>
</li>
</ul>

<h3>HTML Code</h3>
<p class="annotate">HTML source code is generated by scripting using ID references.</p>
<h4>First Example: <code>span</code> element with text content </h4>
<div id="sc1"></div>

<h4>Second Example: <code>img</code> element</h4>
<div id="sc2"></div>

<h4>Third Example: Content </h4>
<div id="sc3"></div>

<h4>Fourth Example: Background image</h4>
<div id="sc4"></div>

</section>

<section>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Link 1</h3>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<div id="sc1"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<h3 id="sc2_label">Link 2</h3>
<div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
<div id="sc2"></div>
<div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
<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()

sourceCode.add('sc1', 'ex1');
sourceCode.add('sc2', 'ex2');
sourceCode.add('sc3', 'ex3');
sourceCode.add('sc4', 'ex4');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../#link">Link Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>

0 comments on commit 7898a65

Please sign in to comment.