-
Notifications
You must be signed in to change notification settings - Fork 5
/
day_18_giving_your_calendar_a_real_caption.html
executable file
·221 lines (161 loc) · 11 KB
/
day_18_giving_your_calendar_a_real_caption.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
<!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_18_giving_your_calendar_a_real_caption.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
<head>
<title>Day 18: Giving your calendar a real caption - 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_17_defining_acronyms.html" title="Day 17: Defining acronyms" />
<link rel="next" href="day_19_using_real_table_headers.html" title="Day 19: Using real table headers" />
<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_18_giving_your_calendar_a_real_caption.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 18: Giving your calendar a real caption</h2>
<p class="firstparagraph">"But," I hear you cry, "my calendar already <em>has</em> a caption. Look right there, it has the month and year right at the top. In bold, even."</p>
<p>But if you dig into your <acronym title="hypertext markup language">HTML</acronym> source, you'll see that your calendar does not have a <em>real</em> caption. It most likely has a single <code class="sgmltag"><td></code> table cell defined to span the entire first row, with a <acronym title="cascading style sheets">CSS</acronym> rule to make it look bold. This is so much easier with a real <code class="sgmltag"><caption></code> tag. It's easier to read in your template, saves a few bytes in your page, looks exactly the same in visual browsers, and is more accessible.</p>
<h3>Who benefits?</h3>
<ol>
<li><a href="day_5_marcus.html">Marcus</a> benefits. <a href="http://www.fdisk.com/doslynx/lynxport.htm">Lynx</a> displays the caption with the word "<samp>CAPTION:</samp>" in front of it, making it perfectly clear that this line is the caption and not the column headers or table data.</li>
<li><a href="day_1_jackie.html">Jackie</a> benefits indirectly. Using a real <code><caption></code> tag clears the way for using real table headers, which benefits Jackie in ways we'll discuss tomorrow.</li>
</ol>
<h3>How to do it</h3>
<p>You can only do this in publishing tools that support a calendar (which rules out Blogger) and that allow you to customize the <acronym title="hypertext markup language">HTML</acronym> generated for calendars (which rules out Manila).</p>
<p>In Movable Type, you probably have a table for your calendar in your Main Index template that starts like this (searching for "calendarhead" is likely to find it):</p>
<blockquote>
<p><code class="sgmltag"><table border="0" cellspacing="4" cellpadding="0"><br />
<strong><tr><br />
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td><br />
</tr></strong><br />
<tr><br />
<td align="center"><span class="calendar">Sun</span></td><br />
...</code></p>
</blockquote>
<p>Leave the table tag alone, but replace that entire first <code class="sgmltag"><tr></code> table row with a real <code class="sgmltag"><caption></code> tag, like this:</p>
<blockquote>
<p><code class="sgmltag"><table border="0" cellspacing="4" cellpadding="0"><br />
<strong><caption class="calendarhead"><$MTDate format="%B %Y"$></caption></strong><br />
<tr><br />
<td align="center"><span class="calendar">Sun</span></td><br />
...</code></p>
</blockquote>
<p>Leave the rest of it alone; we'll fix it tomorrow.</p>
<p>The <code>class</code> attribute on the <code class="sgmltag"><caption></code> is optional; I left it in there so this could be a drop-in replacement in the default Movable Type template, which uses a <acronym title="cascading style sheets">CSS</acronym> rule to make the month and year bold. Using the <code class="sgmltag"><caption></code> tag as shown, your page should look exactly the same as it did before.</p>
<p>In Greymatter, the concept is the same but the template tags are different:</p>
<blockquote>
<p><code class="sgmltag"><caption>{{monthword}} {{yearyear}}</caption></code></p>
</blockquote>
<p>Again, you could change the visual style of the <code>caption</code> using cascading style sheets, if you're into that sort of thing.</p>
<p>In Radio, the process is somewhat more difficult, but not impossible. (I am indebted to <a href="http://www.tmtm.com/insanity/">Tony Bowden</a> for these instructions.)</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>Now go to "Edit" menu, "Find and Replace", "Find..." (<kbd>Control+F</kbd>) and find "hCalendarTable". This should reveal the block of code that draws the initial <code><table></code> tag and the fake calendar caption.</li>
<li><p>Change the last line of that block (that writes out the <var>monthYearString</var> in a <code><tr></code> tag) to this:</p>
<blockquote>
<p><code class="sgmltag">add ("<caption>" + monthYearString + "</caption>")</code></p>
</blockquote>
</li>
<li>Close the window. It will ask you if you want to compile the changes, say yes.</li>
<li><p>If you like, you can style the caption. Go to your Home Page Template (on the Prefs page) and add styles for <code>caption</code>. This is what I use. Where my <code><style></code> section used to contain this:</p>
<blockquote>
<pre><code>body, td, p {
font-family: verdana, sans-serif;
font-size: 12px;
}</code></pre>
</blockquote>
<p>It now contains this:</p>
<blockquote>
<pre><code>body, td, p, <strong>caption</strong> {
font-family: verdana, sans-serif;
font-size: 12px;
}
<strong>caption {
text-align: center;
font-weight: bold;
}</strong></code></pre>
</blockquote>
</li>
</ol>
<h3>Further reading</h3>
<ul>
<li><cite>Tony Bowden</cite>: <a href="http://www.tmtm.com/insanity/2002/07/03.html#a180">Changing the Calendar in Radio</a>.</li>
</ul>
<p></p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_17_defining_acronyms.html"><< Day 17: Defining acronyms</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_19_using_real_table_headers.html">Day 19: Using real table headers >></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_18_giving_your_calendar_a_real_caption.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 18: Giving your calendar a real caption</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_18_giving_your_calendar_a_real_caption.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
</html>