-
Notifications
You must be signed in to change notification settings - Fork 5
/
day_22_using_real_lists_or_faking_them_properly.html
executable file
·258 lines (193 loc) · 14.2 KB
/
day_22_using_real_lists_or_faking_them_properly.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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!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/day_22_using_real_lists_or_faking_them_properly.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
<head>
<title>Day 22: Using real lists (or faking them properly) - Dive Into Accessibility</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" />
<link rel="up" title="Table of contents" href="table_of_contents.html" />
<link rel="first" title="Day 1: Jackie" href="day_1_jackie.html" />
<link rel="last" title="Accessibility statement" href="accessibility_statement.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" />
<link rel="prev" href="day_21_ignoring_spacer_images.html" title="Day 21: Ignoring spacer images" />
<link rel="next" href="day_23_providing_text_equivalents_for_images.html" title="Day 23: Providing text equivalents for images" />
<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="day_22_using_real_lists_or_faking_them_properly.html#startnavigation">Skip to navigation</a>
<span class="divider"> </span>
</div></div>
<p></p>
<div id="main"><div class="inner">
<div class="entry">
<h2 class="entrysubject">Day 22: Using real lists (or faking them properly)</h2>
<p class="firstparagraph">Suppose you have a blogroll of three links: Slashdot, The Register, and dive into mark. Instead of a boring black bullet, you want a fancy-looking image next to each one. How do you do it? The most common solution is to use <code class="sgmltag"><img></code> tags next to each link. This works, and can easily be made more accessible with the addition of proper <code>alt</code> text on each image.</p>
<p>However, you can also go further and use real list markup (<code class="sgmltag"><ul></code> and <code class="sgmltag"><li></code> tags), then use <acronym title="cascading style sheets">CSS</acronym> to change the boring black bullet into an image. Besides being "the right way to do it" in some academic sense that you may or may not care about, this technique has additional accessibility benefits.</p>
<p>I'll give examples of both techniques in a minute.</p>
<h3>Who benefits?</h3>
<ol>
<li><p><a href="day_5_marcus.html">Marcus</a> benefits. <a href="day_21_ignoring_spacer_images.html" title="Day 21: Ignoring spacer images">As we saw yesterday</a>, <a href="http://www.fdisk.com/doslynx/lynxport.htm">Lynx</a> displays the filename of any image without an <code>alt</code> attribute.</p></li>
<li><p><a href="day_2_michael.html">Michael</a> benefits. <a href="http://links.sourceforge.net/">Links</a> never displays images, but by default it does <em>not</em> display anything for images with no <code>alt</code> text. This was acceptable yesterday when we wanted to <a href="day_21_ignoring_spacer_images.html" title="Day 21: Ignoring spacer images">ignore spacer images</a>, but today we want to make sure that there is some indication that this is a list, so we need that <code>alt</code> text.</p>
<p>Also, when Michael browses with images turned off, <a href="http://www.opera.com/">Opera</a> will display the <code>alt</code> text instead of a "missing image" block. And if you use the advanced technique, Opera will do even better; it reverts to displaying the normal black bullet instead of the "missing image" block.</p></li>
<li><p><a href="day_1_jackie.html">Jackie</a> benefits. <a href="day_21_ignoring_spacer_images.html" title="Day 21: Ignoring spacer images">As we saw yesterday</a>, <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> reads the filename of any image without an <code>alt</code> attribute. The links end up getting lost in a sea of irrelevant filenames. This is what Jackie hears:</p>
<blockquote>
<p>fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark</p>
</blockquote>
<p>Providing an asterisk as the <code>alt</code> text helps enormously. JAWS will see that the image is being used as a bullet, and not announce it. However, <a href="http://www-3.ibm.com/able/hpr.html">Home Page Reader</a> will still announce the asterisk explicitly, so users will hear this:</p>
<blockquote>
<p>asterisk link slashdot, asterisk link the register, asterisk link dive into mark</p>
</blockquote>
<p>Using real list markup is best. Since all the visual presentation is in the CSS declarations, none of it clutters up the page, so both JAWS and Home Page Reader simply read your list for what it is: a list. Now this is what it sounds like:</p>
<blockquote>
<p>link slashdot, link the register, link dive into mark</p>
</blockquote>
</li>
</ol>
<h3>How to do it</h3>
<p>If you have a blogroll that looks like this:</p>
<blockquote>
<p><code class="sgmltag"><img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br><br />
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br><br />
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br></code></p>
</blockquote>
<p>You should provide <code>alt</code> attributes for all your bullet images. Use an asterisk as the <code>alt</code> text, to simulate what the list would look like if you were using real list markup. (To prevent this from displaying as a tooltip in visual browsers, you should also provide an empty <code>title</code> attribute.)</p>
<blockquote>
<p><code class="sgmltag"><img <strong>alt="*" title=""</strong> src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br><br />
<img <strong>alt="*" title=""</strong> src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br><br />
<img <strong>alt="*" title=""</strong> src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br></code></p>
</blockquote>
<h3>How to do it: advanced</h3>
<p>The advanced (and preferred) technique uses <acronym title="cascading style sheets">CSS</acronym> to define the image to use as a list bullet.</p>
<blockquote>
<p><code class="sgmltag"><style type="text/css"><br />
ul.blogroll {<br />
list-style: url(/images/fancydot.gif) disc;<br />
}<br />
</style></code></p>
</blockquote>
<p>Then in your template, you can write your list using real list markup:</p>
<blockquote><p><code class="sgmltag"><ul class="blogroll"><br />
<li><a href="http://www.slashdot.org/">Slashdot</a></li><br />
<li><a href="http://www.theregister.co.uk/">The Register</a></li><br />
<li><a href="http://diveintomark.org/">dive into mark</a></li><br />
</ul></code></p>
</blockquote>
<p>Results:</p>
<ul>
<li>Modern browsers will display the image as the list bullet.</li>
<li>Browsers with images turned off with display the boring black bullet.</li>
<li>Netscape 4 will always display the boring black bullet.</li>
<li>Text-only browsers always ignore CSS, so they will display the list however they normally display lists (usually rendering the list bullet as an asterisk).</li>
</ul>
<h3>Postscript: un-bulleted lists</h3>
<p>Another common way to create a list of links is with no images whatsoever, just a heap of links, possibly right-aligned, like this:</p>
<blockquote>
<p><code class="sgmltag"><div align="right"><br />
<a href="http://www.slashdot.org/">Slashdot</a><br><br />
<a href="http://www.theregister.co.uk/">The Register</a><br><br />
<a href="http://diveintomark.org/">dive into mark</a><br><br />
</div></code></p>
</blockquote>
<p>This can also be accomplished with CSS and real list markup:</p>
<blockquote>
<p><code class="sgmltag"><style type="text/css"><br />
ul.blogroll {<br />
list-style: none;<br />
text-align: right;<br />
}<br />
</style></code></p>
</blockquote>
<p>Or, if you want left-aligned links, you can do this instead:</p>
<blockquote>
<p><code class="sgmltag"><style type="text/css"><br />
ul.blogroll {<br />
list-style: none;<br />
margin-left: 0;<br />
padding-left: 0;<br />
}<br />
</style></code></p>
</blockquote>
<p>Either way, the list markup hasn't changed from the previous example:</p>
<blockquote><p><code class="sgmltag"><ul class="blogroll"><br />
<li><a href="http://www.slashdot.org/">Slashdot</a></li><br />
<li><a href="http://www.theregister.co.uk/">The Register</a></li><br />
<li><a href="http://diveintomark.org/">dive into mark</a></li><br />
</ul></code></p>
</blockquote>
<p>The "<code>list-style: none</code>" line suppresses the usual black bullet in visual browsers. This works in all browsers, even Netscape 4. Thanks to <a href="http://www.royal-ts.de/">Tobias Schmidt</a> for reminding me of this technique.</p>
<h3>Further reading</h3>
<ul>
<li><cite>Tobias Schmidt</cite>: <a href="http://www.royal-ts.de/mtarchives/000805.php">Styling lists with CSS</a>.</li>
<li><cite>W3Schools</cite>: <a href="http://www.w3schools.com/css/css_list.asp">CSS List Properties</a>.</li>
<li><cite>Eric Meyer</cite>: <a href="http://www.meyerweb.com/eric/css/list-indent.html">Lists and Indentation</a>.</li>
<li><cite>Eric B. Bednarz</cite>: <a href="http://devnull.tagsoup.com/list/">Manipulating Margin and Padding of Lists With CSS</a>.</li>
</ul>
<p></p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_21_ignoring_spacer_images.html"><< Day 21: Ignoring spacer images</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_23_providing_text_equivalents_for_images.html">Day 23: Providing text equivalents for images >></a>
<span class="divider"> </span>
</div></div> <!--pageturn-->
</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="day_22_using_real_lists_or_faking_them_properly.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> >
<a href="table_of_contents.html">Table of contents</a> >
<span class="currentpage">Day 22: Using real lists (or faking them properly)</span>
</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/day_22_using_real_lists_or_faking_them_properly.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
</html>