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.