-
Notifications
You must be signed in to change notification settings - Fork 353
/
Example-Template.html
226 lines (214 loc) · 10.2 KB
/
Example-Template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
An example that was implemented with this template can be found in: content/patterns/checkbox/examples/checkbox.html
This template is for examples where only one implementation of the design pattern is demonstrated.
If you use this template file, rename it to reflect the name of the example, e.g., SimpleCheckbox.html.
Similarly, rename the javascript and CSS stub files in the js and css subdirectories and update the head element of this file.
-->
<!--
Give this example implementation a name and put it in the title element,
e.g., "Checkbox" if implementing the checkbox pattern.
The name should be unique if the pattern will have multiple implementations,
e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
-->
<title>EXAMPLE_NAME Example</title>
<!-- When using this template do not modify the shared JS and CSS -->
<!-- Core JS and CSS shared by all examples -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../../../shared/css/core.css">
<script src="../../../shared/js/examples.js"></script>
<script src="../../../shared/js/highlight.pack.js"></script>
<script src="../../../shared/js/app.js"></script>
<script src="../../../shared/js/skipto.js"></script>
<!-- JS and CSS for this example -->
<!--
When developing an example implementation of a design pattern,
these files will contain the CSS and JS for the example implementation.
Rename these files to match the name of the example, e.g., checkbox.js if implementing the checkbox design pattern.
-->
<link href="css/example_name.css" rel="stylesheet">
<script src="js/example_name.js"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
<ul>
<li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
<li><a href="project_url">Related Issues</a></li>
<li><a href="../../#pattern_id">Design Pattern</a></li>
</ul>
</nav>
<main>
<!-- Repeat the name of the example in this H1 -->
<h1>EXAMPLE_NAME Example</h1>
<section>
<h2>About This Example</h2>
<p>
<!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
Replace this paragraph with an overview of the example that is something like the following. The below example section demonstrates a simple checkbox that implements the
<a href="../../#checkbox">design pattern for checkbox.</a>
This example uses ... summarize salient techniques )
</p>
<p>Similar examples include:</p>
<ul>
<li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
<!-- list other examples that implement the same design pattern. -->
</ul>
</section>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<!--
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
The div for the rendered HTML source is in the last section of the page.
-->
<div id="ex1">
<!-- Replace content of this div with the example. -->
<p>This is the place where the reader will experience the functioning example.</p>
<ul>
<li>The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.</li>
<li>When developing an example implementation for this guide, please follow the <a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>.</li>
<!-- Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo. -->
<script type="text/javascript">
/* eslint-disable */
// Javascript relevant to example
var i;
var str = 'text';
for (i = 0; i < str.length; i++) {
console.log(str[i]);
var code = '<p>Hello World!</p>';
}
</script>
</ul>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2>Accessibility Features</h2>
<p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features demonstrated in this implementation, such as:</p>
<ol>
<li>What distinguishes this example from related examples.</li>
<li>Keyboard shortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
<li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
<li>Delete this section if not needed.</li>
</ol>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<!--
List the keys supported in this example.
Remember to:
Use kbd tags,e.g. <kbd>KeyName</kbd>.
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
-->
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
Description of key function.
<!-- Do not use a list if there is only one function for the key. -->
</td>
</tr>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
<ul>
<li>If condition 1, performs function 1.</li>
<li>If condition 2, performs function 2.</li>
<li>Only use a list if multiple statements are needed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
-->
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>RoleName</code></th>
<td><!-- Leave this cell blank in rows where a role is being described. --></td>
<td><code>HTML_ELEMENT</code></td>
<td>Describe usage/purpose, e.g., indicates the focusable element that serves as the ...</td>
</tr>
<tr>
<td>
<!--
Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
Make a row like this for each attribute/value pair.
-->
</td>
<th scope="row">
<code>AttributeName=<q>AttributeValue</q></code>
</th>
<td><code>HTML_ELEMENT</code></td>
<td>
<ul>
<li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
<li>If making multiple statements, use list for brevity and clarity</li>
<li>Do not make a single item list.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul id="css_js_files">
<li>
CSS:
<a href="css/example_name.css" type="text/css">example_name.css</a>
</li>
<li>
Javascript:
<a href="js/example_name.js" type="text/javascript">example_name.js</a>
</li>
</ul>
</section>
<section>
<h2 id="sc1_label">HTML Source Code</h2>
<p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
sourceCode.make();
</script>
</section>
</main>
</body>
</html>