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.


23 thoughts on “Accessible Calendars for Blogs and Websites

  1. I use for headers and scope for column and row but many say the id is not needed unless the table is complex. It seems this is not agreed on. Good reminder about abbr.

  2. Unfortunately, the SNAP program that works with WordPress is completely inaccessible. Because it is activated through JavaScript, screen readers such as JAWS cannot currently read it.

  3. Why wouldn’t you put the month and year within the caption tag?

    “When present, the CAPTION element’s text should describe the nature of the table.” (W3C)

    This way there would only be one row of headers, to categorise the data in the associated columns.

  4. Best you could make changes to the post title Accessible Calendars for Blogs and Websites Accessible Blogs to something more catching for your subject you create. I loved the blog post all the same.

  5. I’m happy very good site gallery of preteen she’s a sexy wench who obviously loves sex…but her sagging tits were a bit of a turnoff, as was the horrible dubbing. plus guys really shouldn’t have to jerk off to cum when you’ve got a hot babe ready, willing and able to get you off.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s