Tables: Creating accessible tables with the text editor [CKEditor]

The following tutorial will explain how to create an accessible table through the text editor. Please note that, with regards to accessibility, tables should only be used to present tabular data; they should never be used for design purposes. Tables should also remain simple to make them easier for users of screen readers to parse the content.


 

Synopsis of accessibility guidelines

  • Use only tabular data in tables.
  • Identify the row or the column used as headers.
  • Avoid merging cells, rows and columns.
  • If no heading precedes the table, add a caption to briefly describe the table.

 

Alternatives to complex tables

Due to these limitations, tables will not suit every purpose. If you have a complex table, consider presenting the information in an alternative format. Some ideas include:

  • Split the complex table into multiple smaller and simpler tables.
  • Present the information in a more linear fashion without tables, possibly just using paragraphs and bulleted lists.
  • For webmasters, if you need to use a table to achieve a certain design, consider using a Dynamic Content List instead.

Creating a table

1. Start by clicking on the table icon in the toolbar.

Clicking on the table icon in the toolbar

2. A dialog box like the following should appear.

Table properties dialog box

At this step, configure the following:

  • Rows: Enter the number of rows that your table will contain.
  • Columns: Enter the number of columns that your table will contain.
  • Headers: Select either "First row", "First column" or "Both".
  • Caption: Optionally enter a caption to describe the content of the table.
  • Summary: Optionally provide a summary of the table's structure (not the content). The summary is only made available to screen readers.

All other settings are not necessary and may get ignored when rendered on the final page.

3. Click on the button "OK" to insert your table.

Example of a table inserted into the text editor

Once your table is inserted, you will be able to start entering data and changing the caption, if applicable. 

Modifying an existing table

Should you ever need to change an existing table's properties, delete a table, delete a row, add a row, delete a column or add a column, simply right-click on the table and a dropdown list of actions will be made available to you.

Right-clicking in the text editor reveals a dropdown list with table editing features
» Submit feedback
    Topics: 
  • Accessibility
  • Getting Started
    Types: 
  • Tutorials
Back to top