Table Headings

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

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

Need web help?

All websites and applications which form part of the University web presence are expected to be compliant with the W3C's Web Accessibility Guidelines (WCAG) 2.2 AA guidelines.

Get web accessibility help