This example shows a complex data table of travel expenses. The expenses for meals, hotels, and transportation for two different trips, one to San Diego and another to West Palm Beach, are included in this table. After each trip's detail there is a subtotal and then a grand total in the final row of the table.

The table in the above example has two main logical levels and a third level that contains the tally of all expenses. The next image displays the same table but with the first two logical levels highlighted so you can better identify them.

Now that you have seen how this table is broken down logically, you should be aware of where the headers are placed. These headers are configured using the <th> tag instead of the <td> tag. Assistive Technology (AT), like screen readers, rely on the proper placement of headers to allow users of ATs to understand and make use of the data in the table.

The next image displays the same table as before, but this time the headers on the table are outlined so you can better identify them:

Select Next for testing this requirement with AT.

Topic Menu: | Introduction | Example | Testing with AT
Testing without AT | Summary