dive into mark

Dorothea Salo asks if MovableType is accessible, at least as far as being able to control all of its output, specifically its calendar of archive links. I have not found any insurmountable barriers building an accessible site in Movable Type. And every time I discover a new accessibility-enhancing technique, I find that I can easily implement it. And yes, the calendar output is completely configurable using Movable Type’s templating language.

Before we get to that, though, let me say that calendars should be implemented as tables. There has been some confusion on this, and some people have attempted to implement calendars without tables, laying everything out using only CSS. This is misguided. Calendars are data tables, and should be marked up as such, so that screen readers can read them intelligently. See Identifying rows and column information in the W3C’s HTML Techniques for Web Content Accessibility Guidelines for examples of how screen readers can read properly marked up data tables. You should then use CSS to control the visual presentation of your calendar (more on that in a minute).

Now then, here is my Movable Type calendar template, reformatted for readability:

<div class="calendar">

<a class="skip" href="#endcalendar">
  <img src="/images/1.gif" width="1" height="1"
    alt="Skip over calendar" />
</a>

<table summary="Monthly calendar with links to
  each day's posts">
<caption>
  <$MTDate format="%B %Y"$>
</caption>
<thead>
<tr>
<th scope="col" abbr="Sunday">S</th>
<th scope="col" abbr="Monday">M</th>
<th scope="col" abbr="Tuesday">T</th>
<th scope="col" abbr="Wednesday">W</th>
<th scope="col" abbr="Thursday">R</th>
<th scope="col" abbr="Friday">F</th>
<th scope="col" abbr="Saturday">S</th>
</tr>
</thead>
<tbody>
<MTCalendar>
  <MTCalendarWeekHeader>
    <tr>
  </MTCalendarWeekHeader>
  <td>
    <MTCalendarIfEntries>
      <MTEntries lastn="1">
        <a href="<$MTEntryLink$>">
          <$MTCalendarDay$>
        </a>
      </MTEntries>
    </MTCalendarIfEntries>
    <MTCalendarIfNoEntries>
      <$MTCalendarDay$>
    </MTCalendarIfNoEntries>
    <MTCalendarIfBlank>
      &nbsp;
    </MTCalendarIfBlank>
  </td>
  <MTCalendarWeekFooter>
    </tr>
  </MTCalendarWeekFooter>
</MTCalendar>
</tbody>
</table>

<a class="skip" name="endcalendar"></a>

</div> <!--calendar-->

Accessibility features at work here:

• Skip link to skip past the calendar altogether. Visual browsers won’t show the invisible image, but screen readers will read the alt text and allow the user to skip over the calendar. Also a good technique for skipping over groups of navigation links, and for skipping to your main content from the top of the page (if you don’t structure your HTML properly to put your main content first).
• The “summary” attribute on the table itself. Screen readers will read this.
• Using TH elements to mark the headers of the table. All data tables should have headers for each column. (More complex tables may also need row headers, but simple tables like this do not.) Note that these headers are not displayed (they’re hidden by my stylesheets), but that is irrelevant. Visual presentation != structural markup, nor does it have to. That’s what CSS buys you.
• The “scope” attribute on each table header. This defines what data cells this table header is a header for. In this case, it’s a simple table; each table header is the header for a single column. See the HTML Techniques for more complex examples; it gets funky really quickly, but it’s amazing to see how you can mark up very complex tables and still have screen readers read them intelligently.
• The “abbr” attribute on each table header. Again, this is what gets read by the screen reader. So JAWS would read today’s cell as “Saturday link 27″, and tomorrow’s cell as “Sunday 28″.

You can view source on my home page (or any archive page) to see the table that this outputs. It’s pure structural markup; all visual formatting is done using CSS. Also, please note that there is absolutely no need to bog down your HTML markup with a “class” attribute on every single table cell. That’s silly. The “C” in “CSS” stands for “cascading”. Wrap the table in a div and use a single CSS definition that controls every table cell, like this:

.calendar table td {
  color: silver;
  background-color: transparent;
  font: 80% Tahoma, sans-serif;
}

.calendar table td a {
  color: blue; 
  background-color: transparent;
}

That’s it! Meanwhile, the table caption (you do use “caption” to mark your table caption, don’t you?) is centered and colored:

.calendar table caption {
  background-color: transparent;
  color: maroon;
  font: 80% Tahoma, sans-serif;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

And the table headers are simply hidden (and since we correctly used TH to mark our headers, this is easy):

.calendar table th {
  display: none;
}

Or was that more of an answer than you wanted?

Later: Dorothea replies, “Think you can scare me with markup, sugar? Markup hath no terrors. … I’ll start on an accessibility makeover of Textartisan tomorrow.” Excellent. Ping me if you need me.

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)

§