Overview

Tables within editor widgets should be rebuilt using the Table Widget to ensure usability and mobile responsiveness. Tables should only be used for organizing data, and tables being used for formatting purposes should be removed and replaced with an Editor Widget.

Tables should have either a header row across the top or a header column down the side. If a cell does not have content, please enter N/A to assist with users who have screen-readers. Tables must have properly labeled rows and column headers for ADA compliance.

Color Use

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (WCAG Level A)

Therefore, it is recommended that colors are not used within tables.

This code will remove a background color from a table within an Editor within a Tabbed widget.

<style>
 .tabbedWidget .editor table td { background-color: transparent; }
</style>

Resources

• ADA Compliant Tables
• WCAG 1.3.1 - Info and Relationships
• Guideline 1.4.1 – Use of Color
• Editor Widget Overview
• Add a Table Widget to Your Page
• Table Compliance & Accessibility
• Editor Widget Tables