Why make a table accessible? 

An accessible table ensures that all site visitors – including those who are blind, have low-vision, or use screen readers – can access and can accurately interpret our content. 

What is the difference between layout grids and tables? 


Layout Grids

The structure of our pages is built using layout grids placed on our pages as snippets.

Tables

Tables, created through our WYSIWYG (what you see is what you get) editor, are reserved for tabular data.

How do I make a table accessible?

By using cell, row and column properties within the WYSIWYG, we can assign properties that will tell the screen reader what is intended.

Best practices

  • Use a simple table structure. 
    Avoid nested tables, merged or split cells.
  • Apply a table caption. 
    A table caption appears at the top or bottom of the table and provides an overview of the table's content and purpose. 
  • Include table headers.
    A table headers (th) tells what kind of information is contained in each column or row. 
  • Add table header scope (row or column).
    The th (table header) scope specifies if the header cell is for a column, row, or group of columns or rows. 
  • Avoid having empty cells.
    If possible, include "n/a" (not applicable), or "0" if appropriate. 


Step-by-Step Guide


Image Placeholder

Add a table to your page
  • Click within the editable region where your table will be placed. 
  • Click the Table button  toolbar.
  • Hover over the "Table" option in the dropdown menu.
  • Select the number of columns and rows by hovering over the grid.
  • Click to insert table. 
Image Placeholder

Create a table caption
  • Click within the first table cell of your newly created table.
  • Right click and select Table Properties.
  • Select "Show caption" under Caption. 
  • Save.
Image Placeholder
  • Put your curser within the caption area and add your text once you see the row for your caption appear. 
Image Placeholder

Add your table headers and designate them as such. Add table scope as well. 

  • Put your cursor within the cell in which you wish to add your header. 
  • Right click and select "Cell" then "Cell Properties."

Image Placeholder

  • Under "Cell type," select "Header cell" from the dropdown.
  • Under "Scope," select how the header relates to the tabular data below it. the cell will be a header for "None," "Row," "Column," "Row Group" or "Column Group."
  • Click Save.
Image Placeholder

  • Repeat this process until all header cells and their scope is indicated. 
Image Placeholder

If you have a complex table and you need help making it accessible, reach out to web support for assistance.


How to test for accessibility



Useful reference material