forked from w3c/wcag
-
Notifications
You must be signed in to change notification settings - Fork 0
/
technique-template.html
65 lines (65 loc) · 3.13 KB
/
technique-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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Technique Title</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Technique Title</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>
</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>
</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>
</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>
</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>
<ol>
<li>Step 1</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Result</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>
</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>
</ul>
</section>
</body>
</html>