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

WCAG Sufficient Techniques

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
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