ATIC Homw

Table Examples from the ATIC Group's Web Accessibility Guidelines

  1. This first example is a simple table used for layout. Notice that the reading order is interrupted by the image.

    Display Source and show table with borders

    This table     Future usability practitioner
    Photo credit: K. Cahill
    is not very accessible  
         

    Here's How a screen reader might read this table:
    This table Future usability practitioner Photo credit: K. Cahill is not very accessible
    Read explanation


  2. Here is a similar example. It makes use of a table to layout basic contact information.

    Display Source

    John Doe 25 Walnut Street
    781-391-8877 Medford, ma 02155


  3. Here is a fairly complex example of a data table. Notice the use of <th> with appropriate scope="col" and scope="row" attributes to denote a column or row heading, respectively.

    Display Source

    Dept. Code
    Class #
    Section
    Max Enrollment
    Current Enrollment
    Rm. #
    Days
    Start Time
    End Time
    Inst.
    BIO
    		100 1 15 13 5 Mon,Wed,Fri 10:00 11:00 Magde
    100 2 15 7 5 Tue,Thu 11:00 12:30 Indge
    205 1 15 9 6 Tue,Thu 09:00 10:30 Magde
    315 1 12 3 6 Mon,Wed,Fri 13:00 14:00 Indge
    BUS
    		150 1 15 15 13 Mon,Wed,Fri 09:00 10:00 Roberts
    210 1 10 9 13 Mon,Wed,Fri 08:00 09:00 Rasid