Recommended tables settings for CK-editor

The CK-editor WYSIWYG editor, used in content management systems like WordPress 4 or Drupal 8, has all the tools you need to create an accessible data table. Some key things it remember are to keep your tables simple. Don’t create a more complex design with cells crossing into other columns. Also be sure to specify a header row. This is most commonly the first row. Below are some good settings to use with CK-editor in Drupal 8.

Suggested CK-editor settings for good accessibility

  • Width: 100% —> yields: style=”width: 100%;”
  • Cell Spacing: 0
  • Cell Padding: 0
  • Border size: 0
  • Headers: First Row – it does wrap the < th > row with < thead >
  • Alignment: not set
  • Caption: include descriptive text, could be same as the title of the table.
  • Summary: include descriptive text, could be same as the title of the table.

General accessible data table tips/guidelines:

  • be sure to specify the First Row as the Header row (CK-editor will add the < th > and < thead > wrapper behind the scenes).
  • To further enhance markup of the columns, add scope=”col” to the . For example: <th scope=”col”>. If the table was turned on it’s side it would be scope=”row”.
  • keep table design basic, don’t span a cell into another row
  • don’t embed tables inside tables
  • include a descriptive Caption if the table doesn’t have a title/heading. The
    can be visually hidden with CSS, but made available to screen-reader users.