-
Notifications
You must be signed in to change notification settings - Fork 5
/
by_design_principle.html
executable file
·210 lines (154 loc) · 9.79 KB
/
by_design_principle.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Mirrored from diveintoaccessibility.info/by_design_principle.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:29 GMT -->
<head>
<title>Dive Into Accessibility: Browse tips by design principle</title>
<link rel="start" title="Home page" href="index.html" />
<link rel="contents" title="Table of contents" href="table_of_contents.html" />
<link rel="search" title="Search this site" href="mt/mt-search.html" />
<link rel="help" title="Access features of this site" href="accessibility_statement.html" />
<link rel="author" title="Send feedback to the author" href="mailto:feedback@diveintoaccessibility.org" />
<link rel="copyright" title="Terms of use" href="terms_of_use.html" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/aural.css" type="text/css" media="aural" />
<script>_gaq=[['_setAccount','UA-7434570-7'],['_trackPageview']];(function(){var g=document.createElement('script');g.src='../www.google-analytics.com/ga.js';g.setAttribute('async','true');document.documentElement.firstChild.appendChild(g);})();</script>
</head>
<body>
<div id="logo"><div class="inner">
<h1 class="title">
<a href="index.html" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="by_design_principle.html#startnavigation">Skip to navigation</a>
<span class="divider"> </span>
</div></div>
<p></p>
<div id="main"><div class="inner">
<h2>Browse tips by design principle</h2>
<p>Here the tips are grouped by design principles proposed by the <acronym title="World Wide Web Consortium">W3C</acronym>. Your weblog should be:</p>
<ol>
<li><strong>Perceivable</strong>. You should ensure that all content can be presented in forms that can be perceived by everyone.</li>
<li><strong>Operable</strong>. You should ensure that the interface elements in the content are operable by everyone.</li>
<li><strong>Navigable</strong>. You should facilitate content orientation and navigation.</li>
<li><strong>Understandable</strong>. You should make it as easy as possible for people to understand your content and controls.</li>
<li><strong>Robust</strong>. You should use technologies that maximize the ability of your content to work with current and future web browsers, assistive technologies, and other programs.</li>
</ol>
<h3>Perceivable</h3>
<a class="skip" href="by_design_principle.html#endperceivable">Skip over perception tips</a>
<div class="entry">
<ul>
<li><a href="day_12_using_color_safely.html">Day 12: Using color safely</a></li>
<li><a href="day_18_giving_your_calendar_a_real_caption.html">Day 18: Giving your calendar a real caption</a></li>
<li><a href="day_19_using_real_table_headers.html">Day 19: Using real table headers</a></li>
<li><a href="day_21_ignoring_spacer_images.html">Day 21: Ignoring spacer images</a></li>
<li><a href="day_22_using_real_lists_or_faking_them_properly.html">Day 22: Using real lists (or faking them properly)</a></li>
<li><a href="day_23_providing_text_equivalents_for_images.html">Day 23: Providing text equivalents for images</a></li>
<li><a href="day_24_providing_text_equivalents_for_image_maps.html">Day 24: Providing text equivalents for image maps</a></li>
<li><a href="day_25_using_real_horizontal_rules_or_faking_them_properly.html">Day 25: Using real horizontal rules (or faking them properly)</a></li>
<li><a href="day_26_using_relative_font_sizes.html">Day 26: Using relative font sizes</a></li>
<li><a href="day_30_creating_an_accessibility_statement.html">Day 30: Creating an accessibility statement</a></li>
</ul>
<span class="divider"> </span>
<a class="skip" name="endperceivable" id="endperceivable"></a>
</div><!--entry-->
<h3>Operable</h3>
<a class="skip" href="by_design_principle.html#endoperable">Skip over operation tips</a>
<div class="entry">
<ul>
<li><a href="day_13_using_real_links.html">Day 13: Using real links</a></li>
<li><a href="day_15_defining_keyboard_shortcuts.html">Day 15: Defining keyboard shortcuts</a></li>
<li><a href="day_28_labeling_form_elements.html">Day 28: Labeling form elements</a></li>
<li><a href="day_30_creating_an_accessibility_statement.html">Day 30: Creating an accessibility statement</a></li>
</ul>
<span class="divider"> </span>
<a class="skip" name="endoperable" id="endoperable"></a>
</div><!--entry-->
<h3>Navigable</h3>
<a class="skip" href="by_design_principle.html#endnavigable"><img src="images/1.html" width="1" height="1" alt="Skip over navigation tips" title="" /></a>
<div class="entry">
<ul>
<li><a href="day_9_providing_additional_navigation_aids.html">Day 9: Providing additional navigation aids</a></li>
<li><a href="day_11_skipping_over_navigation_links.html">Day 11: Skipping over navigation links</a></li>
<li><a href="day_14_adding_titles_to_links.html">Day 14: Adding titles to links</a></li>
<li><a href="day_16_not_opening_new_windows.html">Day 16: Not opening new windows</a></li>
<li><a href="day_27_using_real_headers.html">Day 27: Using real headers</a></li>
<li><a href="day_29_making_everything_searchable.html">Day 29: Making everything searchable</a></li>
<li><a href="day_30_creating_an_accessibility_statement.html">Day 30: Creating an accessibility statement</a></li>
</ul>
<span class="divider"> </span>
<a class="skip" name="endnavigable" id="endnavigable"></a>
</div><!--entry-->
<h3>Understandable</h3>
<a class="skip" href="by_design_principle.html#endunderstandable">Skip over comprehension tips</a>
<div class="entry">
<ul>
<li><a href="day_7_identifying_your_language.html">Day 7: Identifying your language</a></li>
<li><a href="day_8_constructing_meaningful_page_titles.html">Day 8: Constructing meaningful page titles</a></li>
<li><a href="day_17_defining_acronyms.html">Day 17: Defining acronyms</a></li>
<li><a href="day_20_providing_a_summary_for_tables.html">Day 20: Providing a summary for tables</a></li>
<li><a href="day_30_creating_an_accessibility_statement.html">Day 30: Creating an accessibility statement</a></li>
</ul>
<span class="divider"> </span>
<a class="skip" name="endunderstandable" id="endunderstandable"></a>
</div><!--entry-->
<h3>Robust</h3>
<a class="skip" href="by_design_principle.html#endrobus"><img src="images/1.html" width="1" height="1" alt="Skip over robustness tips" title="" /></a>
<div class="entry">
<ul>
<li><a href="day_6_choosing_a_doctype.html">Day 6: Choosing a DOCTYPE</a></li>
<li><a href="day_10_presenting_your_main_content_first.html">Day 10: Presenting your main content first</a></li>
<li><a href="day_30_creating_an_accessibility_statement.html">Day 30: Creating an accessibility statement</a></li>
</ul>
<span class="divider"> </span>
<a class="skip" name="endrobust" id="endrobust"></a>
</div><!--entry-->
<span class="divider"> </span>
</div></div><!--main-->
<div id="menu">
<a class="skip" name="startnavigation" id="startnavigation"></a>
<form action="http://www.google.com/cse"><p>Search this site:</p><p><input type="hidden" name="cx" value="014021643941856155761:j2rsjqy6z6g"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="20" placeholder="powered by Google™"></p><p><input type="submit" name="sa" value="Search"></p></form>
</form>
<div class="menusection"><div class="inner">
<h2 class="invisibletitle">Site links</h2>
<a class="skip" href="by_design_principle.html#endinternal">Skip over site links</a>
<ul>
<li><a title="accessibility features of this site" href="accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
<li><a href="mt/mt-search.html" accesskey="4">Advanced search</a></li>
<li><a href="table_of_contents.html" accesskey="3">Table of contents</a></li>
<li><a href="by_person.html">Tips by person</a></li>
<li><a href="by_disability.html">Tips by disability</a></li>
<li><a href="by_design_principle.html">Tips by design principle</a></li>
<li><a href="by_web_browser.html">Tips by web browser</a></li>
<li><a href="by_publishing_tool.html">Tips by publishing tool</a></li>
<li><a title="send email to the author" href="mailto:feedback@diveintoaccessibility.org" accesskey="9">Feedback</a></li>
<li><a title="Copyright and licensing information" href="terms_of_use.html" accesskey="8">Terms of use</a></li>
</ul>
<a class="skip" id="endinternal"></a>
</div></div> <!--.menusection-->
<div id="footer"><div class="inner">
<address>Copyright © 2002 Mark Pilgrim</address>
</div></div> <!--footer-->
</div> <!--menu-->
<div id="navigation">
<p class="breadcrumb">You are here:
<a href="index.html">Home</a> >
<b>Browse tips by design principle</b>
</p>
</div><!--navigation-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36045340-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
<!-- Mirrored from diveintoaccessibility.info/by_design_principle.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:29 GMT -->
</html>