Accessibility Tips

Techniques for improving web site accessibility.

Table Headings

Problem

Screen reader users may have trouble telling where they are when listening to table cell contents.

Solution

Add table headings <th> to tables.

Sample

Incorrect code

<table>
  <tbody><tr><td>Date</td><td>Event</td><td>Time</td><td>Place</td></tr>
  <tr><td>May 11</td><td>Band concert</td><td>7:00 pm</td><td>Auditorium</td></tr>    
  <tr><td>May 21</td><td>Final exam week</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>May 28</td><td>Memorial Day holiday</td><td>&nbsp;</td><td><em>campus closed</em></td></tr>
  <tr><td>May 30</td><td>Commencement</td><td>1:00 pm</td><td>Launchers Stadium</td></tr>
  </tbody>
</table>

Correct code

<table>
  <caption>Coming Events</caption>
  <tbody><tr><th scope="col">Date</th><th scope="col">Event</th><th scope="col">Time</th><th scope="col">Place</th></tr>
  <tr><th scope="row">May 11</th><td>Band concert</td><td>7:00 pm</td><td>Auditorium</td></tr>    
  <tr><th scope="row">May 21</th><td>Final exam week</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><th scope="row">May 28</th><td>Memorial Day holiday</td><td>&nbsp;</td><td><em>campus closed</em></td></tr>
  <tr><th scope="row">May 30</th><td>Commencement</td><td>1:00 pm</td><td>Launchers Stadium</td></tr>
  </tbody>
  </table>

WCAG Success Criteria

1.3.1 Info and Relationships

WCAG Sufficient Techniques

H51: Using table markup to present tabular information

Testing Method

Install the WAVE toolbar for Firefox
Open Firefox
On the WAVE toolbar, click on 'Errors, Features, and Alerts'
This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark.
Is there a square 'th' symbol next to the table headings?
Tip: Click on 'Reset Page' to remove the errors and alerts
Tip: If the an error is being reported but there is no red flag, try clicking on 'Disable Styles'
Tip: Try making changes to the code with Firebug and then retesting the page

Practice Exercise

Use the WAVE toolbar to compare the following tables. Which is marked up correctly?

Table 1

	Monday	Tuesday	Wednesday	Thursday	Friday
8:00-9:00	Meet with Sam
9:00-10:00			Doctor Williams	Sam again	Leave for San Antonio

Table 2

	Monday	Tuesday	Wednesday	Thursday	Friday
8:00-9:00	Meet with Sam
9:00-10:00			Doctor Williams	Sam again	Leave for San Antonio

Table 3

Homework	Exams			Projects
Homework	1	2	Final	1	2	Final
15%	15%	15%	20%	10%	10%	15%

Table 4

Contact Information
	Name	Phone#	Fax#	City
1.	Joel Garner	412-212-5421	412-212-5400	Pittsburgh
2.	Clive Lloyd	410-306-1420	410-306-5400	Baltimore
3.	Gordon Greenidge	281-564-6720	281-511-6600	Houston

Help

For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867