Tabular Data & Tables

Tables are particularly difficult to understand when read by a screen reader when not coded properly. By default, screen readers will read each row, left to right. By the time the listener hears the data on row 3, they may no longer remember which column is which.

For that reason we use tags to identify column and row headers. The scope attribute identifies which data cells are associated to this heading. When coded properly, the screen reader will read the heading, then the associated data, the next heading, followed by the associated data, etc.

Captions are added for additional explanation.

Example 1

Listing of Newspaper Employees
Name	Department	Title	Supervisor
Mary Jones	World News	Editor	Yes
Tom Smith	Local News	Copywriter	No

HTML Code for Example 1:

<table class="tableBorder width100pct" summary="Listing of Newspaper Employees" >
  <caption>Listing of Newspaper Employees
    <br/>
  </caption>
  <tbody>
    <tr>
      <th> Name</th>
      <th>Department </th>
      <th>Title </th>
      <th>Supervisor </th>
    </tr>
    <tr>
      <td> Mary Jones</td>
      <td>World News </td>
      <td>Editor </td>
      <td>Yes </td>
    </tr>
    <tr>
      <td> Tom Smith</td>
      <td>Local News </td>
      <td>Copywriter </td>
      <td>No </td>
    </tr>
  </tbody>
</table>

Example 2

Simple Data Table
	Column 1 Header	Column 2 Header
Row 1 Header	Column 1 Row 1 data	Column 2 Row 1 data
Row 2 Header	Column 2 Row 1 data	Column 2 Row 1 data

HTML Code for Example 2

<table summary="Simple Data Table" class="width100pct tableBorder">
<caption>
Simple Data Table
</caption>
<tbody>
  <tr>
   <th> </th>
   <th> Column 1 Header </th>
   <th> Column 2 Header </th>
  </tr>
  <tr>
   <th> Row 1 Header </th>
   <td> Column 1 Row 1 data </td>
   <td>Column 2 Row 1 data </td>
  </tr>
  <tr>
   <th> Row 2 Header </th>
   <td> Column 2 Row 1 data</td>
   <td>Column 2 Row 1 data </td>
  </tr>
</tbody>
</table>

Best Practices

Always use <th> elements for header items.
Always use scope attributes in <th> tags unless id and headers attributes are required.
Always use <caption> elements.
Use summary attributes for complicated tables.
Use <table> elements for tabular data. Use <div> and <span> elements to affect layout.
Avoid cells that span multiple rows or multiple columns.

CMS Entry

Summary

Must be added for accessibility

Select Table
Enter Summary information

Header Row or Column

Highlight the row or column
Choose Format as table header

Declare a header Row

Add a Border

Select table
Select with Border

Format Table

References

WebAIM: Creating Accessible Tables - Data Tables

Contact Information

Web Services Team

Information Systems Department

County of Sonoma

Accessibility Assistance

Address

2615 Paulin Drive

Santa Rosa, CA 95403

38.466385, -122.722706

Related Policies

Official Use of Social Media Sites
Administrative Policy Manual, 9-1

Website Accessibility Policy
Administrative Policy Manual, 9-3

Accessibility Resources

Web Accessibility
Introduction to Web Accessibility

Converting
Converting Documents to PDF's

Word
Creating Accessible Word Documents

PowerPoint
PowerPoint Accessibility

Quick Reference Guide to Section 508

Quick Reference Guide

Section 508 Requirements and Standards

1194.22 Web based intranet and Internet information and applications

1194.24 Video and multimedia products

Regulatory Compliance Resources

WCAG 2.0 Guidelines

WebAIM's WCAG 2.0 Checklist

How to Meet WCAG 2.0

Section 508