Creating Accessible Tables

To help ensure greater accessibility and consistency of our content all tables:

  • must contain a caption – a title within the table code (note that a title in the page content does not make a table accessible)
  • must contain a summary – a description of the table contents and how it is organised, or a brief explanation of how to navigate the table. The summary does not show up on the page visually, but is read by screen-reader software to help give context to the data in the table
  • must contain a table ID – a short table identifier spaced with underscores between words. This ID is not visible on the page
  • must indicate header rows and/or columns using the correct function within the table properties pop box (note that bolding text manually is not enough) 

How to update tables

The following video takes you through the step-by-step process of updating a table so that it meets the above requirements.

How to create new accessible tables

In order to fulfill the above requirements you will need to insert the table then update its properties as outlined in the steps below.

  1. In the WYSIWYG Editor select the Insert Table icon.

    Insert Table icon in WYSIWYG editor

  2. In the Dimensions fields, enter the number of desired Rows and Columns

  3. Under Table Headers, indicate if you would like the First Row and/or First Column to become the Table Header(s) by checking the relevant boxes. This will automatically make the row and/or column bold and shaded

  4. Under Optional Attributes, add a Table Summary describing the content and its layout, or explaining how to navigate the table

  5. Select OK

    Insert Table Pop Box

  6. Input the content/data within the newly created table then Save Changes

  7. Place your cursor anywhere within the table and select the Table Properties icon. The Table Properties pop box will appear

    Table Properties icon in WYSIWYG editor

  8. In the Table ID field, type in a shortened name for the table. Please note: All spaces should be substituted with underscores _

  9. In the Table Caption field, type in a title for the table. This will appear above the table in the left hand side of the pop box

  10. Select OK then Save Changes

    Editing Table Properties


Note: In your WYSIWYG editor window the table will look similar to the example below. In this view the caption is plain text, centered and table headers are not shaded

Table preview in WYSIWYG editor

If you preview the page the table will now look like the example below. In this view the caption appears left justified and similar to header 3 style text, and table headings are a slightly darker shade of grey

Table preview on page