Adding Accessible Tables

Tables should only be used for presenting data to your website visitors. They should never be used simply to control layout and design elements of a web page. When using the WYSIWYG editor in Cascade, there is a button that will create a table for you, however, the editor does not add in the necessary attributes that make a table accessible for those using assistive technologies, such as a screen reader. Tables require HTML editing in order to make them accessible and responsive in mobile view.

Please feel free to attend an open lab for help with making your tables accessible and mobile friendly.

Create a basic table using the CMS text editor

  1. Select Table > Table from the menu. Highlight the grid boxes to choose the number of columns and rows.
  2. Add your content
    Caption for Sample Table
    Column 1 Column 2 Column 3 Column 4
    Row 1 Data 1 Data 2 Data 3
    Row 2 Data 4  Data 5
    Row 3 N/A Data 6
    Row 4 Data 7 Data 8 Data 9

That's all that's required to create a basic table, but it still needs additional HTML editing to make it fully accessible and responsive on mobile devices.

Make Table Accessible and Responsive on Mobile

  1. Open the source code in the editor to view the HTML code.
  2. Add the appropriate attributes:
    1. table class
    2. caption
    3. thead
    4. row scope
    5. column scope Note: The <thead> includes the first row of column headings. If your table does not include row headings then you do not need to use <th scope="row">. 

      <table class="footable">
      <caption>The table caption describes the table content</caption>
      <thead>
      <tr>
      <th data-toggle="true" scope="col">Column 1</th>
      <th data-hide="phone" scope="col">Column 2</th>
      <th data-hide="tablet,phone" scope="col">Column 3</th>
      <th data-hide="tablet,phone" scope="col">
      Column 4</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <th scope="row">Row Heading 1</th>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      </tr>
      <tr>
      <th scope="row">Row Heading 2</th>
      <td>Data 4</td>
      <td></td>
      <td>Data 5</td>
      </tr>
      <tr>
      <th scope="row">Row Heading 3</th>
      <td></td>
      <td>N/A</td>
      <td>Data 6</td>
      </tr>
      <tr>
      <th scope="row">Row Heading 4</th>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
      </tr>
      </tbody>
      </table>

The table caption describes the table content
Column 1 Column 2 Column 3 Column 4
Row Heading 1 Data 1 Data 2 Data 3
Row Heading 2 Data 4 Data 5
Row Heading 3 N/A Data 6
Row Heading 4 Data 7 Data 8 Data 9

This table meets the WCAG 2.0 standards and is scalable by device.

Changing Table Styles

After you make your table accessible, you may want to change how the table looks on your page. 

You can add styles to the "Row Heading" section if you don't like the red background.

  • <th class="rowTitle" scope="row">Row Heading</th>
  • <th class="rowData" scope="row">Row Heading</th>
Accessible Table using class="rowTitle"
Column 1 Column 2 Column 3 Column 4
Row Heading 1 Data 1 Data 2 Data 3
Row Heading 2 Data 4 Data 5
Row Heading 3 N/A Data 6
Row Heading 4 Data 7 Data 8 Data 9

Gray/White Table style using class="rowTitle"
Column 1 Column 2 Column 3 Column 4
Row Heading 1 Data 1 Data 2 Data 3
Row Heading 2 Data 4 Data 5
Row Heading 3 N/A Data 6
Row Heading 4 Data 7 Data 8 Data 9

Accessible Table using class="rowData"
Column 1 Column 2 Column 3 Column 4
Row Heading 1 Data 1 Data 2 Data 3
Row Heading 2 Data 4   Data 5
Row Heading 3   N/A Data 6
Row Heading 4 Data 7  Data 8 Data 9