Accessible Calendars for Blogs and Websites

Melissa McAvoy
January 16, 2007 

Calendars are a useful and attractive way to visually organize events on a webpage or blog. However, calendars are often inaccessible due to their reliance on visual rather than verbal cues. An accessible calendar is created using several techniques. Here we will discuss the most important technique of using table headers. We have also included some valuable
code for quickly adding an accessible calendar to your site.

Table headers refer to any information in a table cell that is used to organize and identify the data. Table headers are indicated by the <th> tag and must be identified using the “id” attribute. For example:

<th id=”month”>January</th>

Data cells are indicated by the <td> tag and must be matched with their headers using either the “scope” or the “headers” attribute. An example of a table header that uses the “scope” attribute is below. In this example, the “scope” attribute tells the user-agent that “Sunday” refers to all of the data in the column below the word “Sunday”. You can also use “scope” with headers that span multiple rows such as “January” in our example.

<th id=”sunday” scope=”col”>Sunday</th>

Note: The headers attribute is used when a header cell is not in alignment with its corresponding row or column. For how to use the “headers” attribute, please refer to W3C Recommendation – 11 Tables

If table headers are long, the information in them can be abbreviated. Say you wanted to display the days of the week by using only the first three letters. You can specify this abbreviation by using the “abbr” attribute. Typically, the information in the “abbr” attribute should be a shortened but meaningful representation of the full text. For our example, we reverse this effect. Now, the visual browsers will display the abbreviation and the auditory user-agents have the option of reading the full text. For example:

<th id=”sun” abbr=”Sunday”>Sun</th>

Note:Using a screen reader such as JAWS 7.0, a user may opt to read a table in standard mode. This means that the header might be read only as its abbreviation which is why the abbreviation should be a meaningful one. Using only the first letter would be meaningless because Saturday and Sunday both begin with “S”.

The <tr> tag means “table row”. A standard calendar would look something like this.

January 2007
Sun	Mon	Tue	Wed	Thu	Fri	Sat
	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

In order to keep these posts as accessible and usable to every user, we have removed any long batches of code.  Download the code to the Accessible Calendar using the links below.

Accessible Calendar – HTML only version

We will post the PHP/HTML/CSS version of the code here shortly.