Skip navigation
YOU ARE HERE: ADE Home > How To > Web Pages > Data Tables
Go to ADE home.Accessibility in Distance Education
Go to UMUC Web site.
What is Accessibility Legal Issues Understanding Disabilities
This tab is selected: How-To.
Best Practices
This tab is selected: Web pages
Images Conferencing Chat Audio/Video PowerPoint PDF Advanced Multimedia

Writing Style | Links | Navigation | Text Styles | Layout Tables | Data Tables | HTML | Test

Accessible Data Tables

7 of 9

Students Affected: Students who are blind.Students with low vision.

Principles: Follow Web Standards, Degrade Gracefully


What it Means | How it Works | Testing Tips


What It Means

Data tables summarize sets of facts or statistics—for example, schedules, class grades, or assignment lists. However, data tables can pose unique challenges for Link opens in new window.screen reader users if they aren't formatted properly.

If You Do It Wrong: Students cannot understand the table and/or find important data. A summary of the table is not provided, and each cell is read out of context.

Listen as a screen reader reads an improperly formatted grade report table. Can you identify JoEllen's research paper grade? (Links open in new windows.)

Audio file. Listen to the audio file. [Windows Media || RealOne]
Transcript. Read the transcript.
Check - opens in new window. Check answer.
(Audio files require the free Windows Media Player or RealOne Player. Netscape users may experience problems with Windows Media files.)


If You Do It Right: Students can understand the table and find specific data. A brief summary of the table content is available, and table headers are read before each related data cell.



How it Works

The examples in this section are based on the following table:

HIST 104 Grade Report
Student Test 1 Test 2 Final Grade
Chris 84 86 88
JoEllen 77 70 78


  1. Use the summary attribute to provide a quick version of the data table's conclusion.

    Example
    <table border="1" summary="This table lists grades, by student, for each assignment in HIST 104." align="center">

  2. Use the caption tag to name the table.

    Example
    <table border="1" summary="This table lists grades, by student, for each assignment in HIST 104." align="center">
    <caption>HIST 104 Grade Report</caption>

  3. Use the header (TH) tag instead of the TD tag to identify header cells.

    Example
    <table border="1" summary="This table lists grades, by student, for each assignment in HIST 104." align="center">
    <caption>HIST 104 Grade Report</caption>
    <tr>
    <th scope="col">Student</th>
    <th scope="col">Test 1</th>
    <th scope="col">Test 2</th>
    <th scope="col">Final Grade</th>
    </tr>
    <tr>
    <th scope="row"><strong>Chris</strong></th>
    <td>84</td>
    <td>86</td>
    <td><strong>88</strong></td>
    </tr>
    <tr>
    <th scope="row"><strong>JoEllen</strong></th>
    <td>77</td>
    <td>70</td>
    <td><strong>78</strong></td>
    </tr>
    </table>

  4. For most tables, use the scope attribute to match header cells to data cells. The scope attribute tells screen readers to read the appropriate heading(s) before each related data cell. Scope="col" identifies column headers, and scope="row" identifies row headers.

    Example
    <table border="1" summary="This table lists grades, by student, for each assignment in HIST 104." align="center">
    <caption>HIST 104 Grade Report</caption>
    <tr>
    <th scope="col">Student</th>
    <th scope="col">Test 1</th>
    <th scope="col">Test 2</th>
    <th scope="col">Final Grade</th>
    </tr>
    <tr>
    <th scope="row"><strong>Chris</strong></th>
    <td>84</td>
    <td>86</td>
    <td><strong>88</strong></td>
    </tr>
    <tr>
    <th scope="row"><strong>JoEllen</strong></th>
    <td>77</td>
    <td>70</td>
    <td><strong>78</strong></td>
    </tr>
    </table>

  5. The scope attribute does not work if the heading and its related data cells are not in the same column or row. In that case, use the id attribute to give each header cell a unique name. Use the headers attribute to specify the header(s) that should be read before each table cell.

    Example
    <table border="1" summary="This table lists grades, by student, for each assignment in HIST 104." align="center">
    <caption>HIST 104 Grade Report</caption>
    <tr>
    <th id="hdr1">Student</th>
    <th id="hdr2">Test 1</th>
    <th id="hdr3">Test 2</th>
    <th id="hdr4">Final Grade</th>
    </tr>
    <tr>
    <th id="stu1" headers="hdr1"><strong>Chris</strong></th>
    <td headers="stu1, hdr2">84</td>
    <td headers="stu1, hdr3">86</td>
    <td headers="stu1, hdr4"><strong>88</strong></td>
    </tr>
    <tr>
    <th id="stu2" headers="hdr1"><strong>JoEllen</strong></th>
    <td headers="stu2, hdr2">77</td>
    <td headers="stu2, hdr3">70</td>
    <td headers="stu2, hdr4"><strong>78</strong></td>
    </tr>
    </table>


    Web Page Editor Instructions
    Microsoft FrontPage: Click the HTML tab in the bottom-left corner of the screen to open the FrontPage HTML editor. Then follow steps 1-5 above.

    Netscape Composer: From the Tools drop-down menu, select HTML Tools, then Edit HTML Source... to open the Composer HTML editor. Then follow steps 1-5 above.

    Macromedia Dreamweaver: From the View drop-down menu, select Code or Code and Design to open the Dreamweaver HTML editor. Then follow steps 1-5 above.

More Info. Visit these Web sites for more information about accessible data tables:


Testing Tips

Use an Link opens in new window.accessibility evaluator to ensure you have formatted your tables correctly.

More Info. The Wave is a free online evaluator that displays the order in which a screen reader reads table cells. It also exposes data table structure.


Web Pages: Back to Styles | Forward to HTML


Top of page

About this Site Site Map Glossary Contact Us Credits

© 1996-2005 University of Maryland University College • 3501 University Blvd. East, Adelphi, MD 20783 • USA
Phone: 800-888-UMUC (800-888-8682)