Skip to main content

30 steps to a more accessible website

Step 18: Giving your calendar a real caption

"But," I hear you cry, "my calendar already has a caption. Look right there, it has the month and year right at the top. In bold, even."

But if you dig into your HTML source, you'll see that your calendar does not have a real caption. It most likely has a single <td> table cell defined to span the entire first row, with a CSS rule to make it look bold. This is so much easier with a real <caption> 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.

Who benefits?

  1. Marcus benefits. Lynxdisplays the caption with the word "CAPTION:" in front of it, making it perfectly clear that this line is the caption and not the column headers or table data.
  2. Jackie benefits indirectly. Using a real <caption> tag clears the way for using real table headers, which benefits Jackie in ways we'll discuss tomorrow.

How to do it

You can only do this in publishing tools that support a calendar (which rules out Blogger) and that allow you to customize the HTML generated for calendars (which rules out Manila).

« Step 17: Defining acronyms | Contents| Step 19: Using real table headers »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1