Creating Accessible Tables in Cascade

Quick Links: | Table Requirements | No Layout Tables | Table Practices | Cascade 4.0 Tables |

Table Requirements

Tables should be used to present tabular data, such as financial data, schedules, and statistics NOT for layout purposes. When using tables, it is important to ensure they are accessible to all users, including those using assistive technologies.

  • Use semantic markup
    Use appropriate HTML tags such as <table>, <thead>, <tbody>, <th>, and <td> to create a meaningful structure.
  • Provide captions
    Use the <caption> tag to summarize the table’s content and purpose.
  • Use table headers
    Use the <th> tag for headers and define relationships between data and headings.
  • Avoid merged cells
    Merged cells can make tables harder to understand and navigate.

No Layout Tables

Tables should not be used for page layout. This creates accessibility issues and reduces usability.

  • Semantic structure
    Tables are designed for structured data, not layout.
  • Screen reader issues
    Assistive technologies may misinterpret layout tables.
  • Responsive design
    Tables used for layout often break on smaller screens.

Table Practices

Table Caption

Every table should include a <caption> tag that clearly describes the table.

<table>
<caption>Title of Table</caption>

Watch a video on how to add captions to tables.

Table Headers

If your table includes headers, use the <th> tag instead of <td>.

Example Table

Comparison of Professional Cameras
Make Model Megapixels Price
Canon EOS 300D 6.3 $899
Nikon D70 6.0 $999

HTML Structure

The following example shows the correct HTML structure for a table:

<table>
<caption>Comparison of Professional Cameras</caption>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Megapixels</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canon</td>
<td>EOS300D</td>
<td>5.3</td>
<td>$899</td>
</tr>
<tr>
<td>Nikon</td>
<td>D70</td>
<td>6.3</td>
<td>$899</td>
</tr>
</tbody>
</table>

Cascade 4.0 Tables

Content Contributors cannot access the source code within Cascade 4.0 and cannot manually add <th> or <caption> tags. To add a table:

  • Create the table using the WYSIWYG editor.
  • Submit your changes.
  • Web Services will update the table to meet accessibility standards.

 Still need help? Contact Web Services for further assistance.
  
 Help us improve our Knowledge Base! Click Yes or No below, then let us know what worked — or what didn’t. Your feedback helps us improve our content and provide the best possible support. 

Print Article