-
Notifications
You must be signed in to change notification settings - Fork 5
/
day_20_providing_a_summary_for_tables.html
executable file
·186 lines (132 loc) · 9.36 KB
/
day_20_providing_a_summary_for_tables.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
<!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_20_providing_a_summary_for_tables.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
<head>
<title>Day 20: Providing a summary for tables - 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:[email protected]" />
<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_19_using_real_table_headers.html" title="Day 19: Using real table headers" />
<link rel="next" href="day_21_ignoring_spacer_images.html" title="Day 21: Ignoring spacer 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_20_providing_a_summary_for_tables.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 20: Providing a summary for tables</h2>
<p class="firstparagraph">The final piece of marking up tables is providing a summary. The summary of a table is never displayed in visual browsers; it is exclusively designed for screen readers and speech browsers. It is exactly what it sounds like: a summary, a longer description than the caption. It is usually read immediately before the caption.</p>
<p>Every table should have a summary. If you have a calendar, the summary can be as simple as "Monthly calendar with links to each day's posts." If you use tables for layout, you should give each of those tables an empty summary, to indicate that the table is used exclusively for visual layout and not for presenting tabular data. (This is a similar concept to providing an empty <acronym title="alternate">ALT</acronym> attribute on images used exclusively for visual spacing. We'll discuss these "spacer images" on Monday.)</p>
<h3>Who benefits?</h3>
<ol>
<li><a href="day_1_jackie.html">Jackie</a> benefits. When <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> encounters your calendar, Jackie hears "Summary: Monthly calendar with links to each day's posts." Then <a href="day_18_giving_your_calendar_a_real_caption.html" title="Day 18: Giving your calendar a real caption">she hears the caption</a>, then <a href="day_19_using_real_table_headers.html" title="Day 19: Using real table headers">she hears the table headers</a>, then she can navigate through the calendar.</li>
<li><a href="http://www.icab.de/">iCab</a> users benefit. iCab can use the built-in text-to-speech capabilities of the <acronym title="Macintosh operating system">Mac OS</acronym> to read web pages, and it will read the summary of any table that defines one.</li>
</ol>
<h3>How to do it: calendar</h3>
<p>In Movable Type, find the calendar in your Main Index Template. (Again, searching for "calendarhead" will probably find it.) You'll see a <code class="sgmltag"><table></code> like this:</p>
<blockquote>
<p><code class="sgmltag"><table border="0" cellspacing="4" cellpadding="0"></code></p>
</blockquote>
<p>Change it to this:</p>
<blockquote>
<p><code class="sgmltag"><table border="0" cellspacing="4" cellpadding="0" <strong>summary="Monthly calendar with links to each day's posts"></strong></code></p>
</blockquote>
<p>In Radio, the procedure is similar to what we've done the past few days.</p>
<ol>
<li>In Radio, open the actual Radio application. On Windows, right-click on the little Radio icon in your system tray and select "Open Radio".</li>
<li>Under the "Tools" menu, select "Developers", then "Jump..." (<kbd>Control+J</kbd>). Jump to "system.verbs.builtins.radio.weblog.drawCalendar" (no quotes).</li>
<li><p>Now go to "Edit" menu, "Find and Replace", "Find..." (<kbd>Control+F</kbd>) and find "draw the month and year". This should reveal and highlight a line the simply says "<code>bundle // draw the month and year</code>". Double-click the triangle to reveal the actual code, which should look like this:</p>
<blockquote>
<p><code>add ("<table cellspacing=\"0\" border=\"0\" class=\"hCalendarTable\">"); indentLevel++</code></p>
</blockquote>
</li>
<li><p>Change it to this:</p>
<blockquote>
<p><code>add ("<table <strong>summary=\"Monthly calendar with links to each day's posts\"</strong> cellspacing=\"0\" border=\"0\" class=\"hCalendarTable\">"); indentLevel++</code></p>
</blockquote>
</li>
</ol>
<h3>How to do it: layout tables</h3>
<p>If you use tables for layout, add <code>summary=""</code> to each table. This is best accomplished with search-and-replace. Search for this:</p>
<blockquote>
<p><code class="sgmltag"><table</code></p>
</blockquote>
<p>And replace it with this:</p>
<blockquote>
<p><code class="sgmltag"><table summary=""</code></p>
</blockquote>
<p></p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_19_using_real_table_headers.html"><< Day 19: Using real table headers</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_21_ignoring_spacer_images.html">Day 21: Ignoring spacer 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_20_providing_a_summary_for_tables.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:[email protected]" 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 20: Providing a summary for tables</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_20_providing_a_summary_for_tables.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
</html>