Creating more accessible data tables in WordPress, without knowing HTML

Data tables are rife with accessibility problems, but they are often an indispensable way to convey data. Therefore, it is vital for content writers to have an easy, non-technical way to make their data tables accessible. This article describes one method, using WordPress, it’s default Editor TinyMCE, and a plugin called TinyMCE Advanced.

The default editor for WordPress, TinyMCE lacks a tool for editing tables but its basic WYSIWYG features can be extended extensively by installing a single free plugin, TinyMCE Advanced. One feature it provides is a table editor with support for the HTML5 table markup required for accessible tables, namely the caption tag, the <th> tag and its scope attribute.

Installing The Plugin

If you’re not familiar with installing WordPress plugins, The WordPress codex provides instructions. Note, not all WordPress users have the access to install plugins. If, when logged into the WordPress dashboard, you don’t see a “Plugins” option in the menu, then contact your site administrator, refer them to this article, and ask them to consider adding the TinyMCE Advanced plugin, or another that provides similar functionality.

Making Accessible Data tables

  1. Use proportional sizing whenever possible, setting the table’s overall height and width to relative values, i.e., percentages rather than fixed pixel values. Doing so allows the web browser to determine the table’s dimensions, and cuts down on the scrolling visually impaired users must do. Likewise, when setting cell widths, also use relative values for the same reason. You should avoid setting row or cell heights, to allow the browser to expand cells heights to fully accommodate their data.
  2. Provide table captions:
    1. Add table with toolbar button
      screenshot of the TinyMCE Advance table options menu
    2. Click the tables toolbar button again, and select “Table properties.”
      screenshot of TinyMCE Advanced table properties menu
    3. Click the “Caption” check box, then the OK button..
    4. Click into the caption row, and type a useful, brief description of the table.
    5. While setting table properties, take the chance to set the table size properties to proportional values, as discussed above.
  3. Provide column headers.
    1. Click into the top row of the table
    2. Click the Table button and select Row,  Table row properties,  Row Type, setting Row Type to “Header”
      screenshot of the Tiny MCE Advanced table row properties options
  4. Set the scope attribute according to your need.
    1. Click into the specific cell who’s scope you want to set.
    2. Click the Table button and select Cell,  Table cell properties
    3. Click scope, and set the attribute as needed.
      screenshot of the TinyMCE Advanced editor's table cell properties options

 

That’s as far as we can go with the tools under discussion. While these techniques will greatly improve the accessibility of your data tables, there is more to know on the subject. For more information on special cases and advanced techniques, not limited to WordPress and TinyMCE, see webaim.org/techniques/tables/data.