wcag/techniques/general/G96.html at a940a877ca0dcbed8b459393ae8f0cb834817dce · w3c/wcag · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Providing textual identification of items that otherwise rely only on sensory information to be understood</title>
	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
</head>
<body>
	<h1>Providing textual identification of items that otherwise rely only on sensory information to be understood</h1>
	<section class="meta">
		<p class="id">ID: G96</p>
		<p class="technology">Technology: general</p>
		<p class="type">Type: Technique</p>
	</section>
	<section id="applicability">
		<h2>When to Use</h2>
		<p>All technologies that present description of a content rendering to the user.</p>
	</section>
	<section id="description">
		<h2>Description</h2>
		<p>The objective of this technique is to ensure that items within a web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe the function of the item or its label.</p>
	</section>
	<section id="examples">
		<h2>Examples</h2>
		<section class="example">
         <h3>Button referenced by shape and accessible name</h3>
			<p>A round button is provided on a form to submit the form and move onto the next step in a progression. The button is labeled with the text "go". The instructions state, "to submit the form press the round button labeled <i>go</i>". This includes both shape and textual information to locate the button.</p>
		</section>
		<section class="example">
         <h3>A section of navigation links referenced by location and heading</h3>
			<p>Instructions for a web page providing on-line training state, "Use the list of links to the right with the heading, 'Class Listing' to navigate to the desired on-line course."  This description provides location as well as textual clues to help find the correct list of links.</p>
		</section>
		<section class="example">
         <h3>Button referenced by position and accessible name</h3>
			<p>The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users for which the position is not meaningful.</p>

			<section id="the-html">
				<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
<pre><code class="language-html">&lt;form class="wrapper"&gt;
  &lt;h1&gt;Sign up to our mailing list&lt;/h1&gt;
    &lt;div role="note"&gt;
      Complete the form and then press the lower-right (&lt;i&gt;sign up&lt;/i&gt;) button.
    &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="full-name"&gt;Your name&lt;/label&gt;
    &lt;input autocomplete="name" id="full-name" type="text"&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="email"&gt;Your email address&lt;/label&gt;
    &lt;input autocomplete="email" id="email" type="text"&gt;
  &lt;/div&gt;
  &lt;button type="reset"&gt;Cancel&lt;/button&gt;
  &lt;button type="submit"&gt;Sign up&lt;/button&gt;
&lt;/form&gt;</code></pre>

			</section>
			<section id="the-css">
				<h4>The <abbr title="Cascading Style Sheets">CSS</abbr></h4>
<pre><code class="language-css">.wrapper{
  border:1px solid #aeaeae;
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
  padding:1rem;
  width:50vw;
 }

 label{
  display:block;
 }

 input, button{
  font:inherit;
 }

 h1, [role=note]{
  grid-column:1 / -1;
 }

 .form-group{
  grid-column:1;
 }

 input{
  width:100%;
 }

 button[type=reset]{
  grid-column:1;
 }

 button[type=submit]{
  grid-column:2;
 }</code></pre>
				</section>
</section>
    <section class="example">
         <h3>Visual markup with semantic meaning has explicit text explaining the meaning</h3>
			<p>A redline document designates deleted text with strikethrough and added text with double underline. Deletions are preceded by the text "[begin deletion]" and followed by the text "[end deletion]. Additions are preceded by the text "[begin addition]" and followed by the text "[end addition].</p>
		</section>
	</section>
	<section id="tests">
		<h2>Tests</h2>
		<section class="procedure">
			<h3>Procedure</h3>
			<p>Find all references in the web page that mention the shape, size, or position of an object.  For each such item:</p>
			<ol>
				<li>Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.</li>
			</ol>
		</section>
		<section class="results">
			<h3>Expected Results</h3>
			<ul>
				<li>Check #1 is true.</li>
			</ul>
		</section>
	</section>
	<section id="related">
		<h2>Related Techniques</h2>
	</section>
	<section id="resources">
		<h2>Resources</h2>
	</section>
</body>
</html>