Tables: Presenting Data Accessibly

Why Tables Matter

Tables are powerful tools for organizing and presenting data. When used correctly, they help users understand complex information by arranging it into logical rows and columns. However, improperly formatted tables can create significant barriers for users relying on assistive technologies, such as screen readers. Accessible tables ensure that all users can interpret and navigate the data effectively.

Using Tables to Support Accessibility

Accessible tables are designed to communicate relationships between rows, columns and data points. This involves:

  • Using Tables Only for Data: Tables should be used to display structured data, not for page layout or visual design.
  • Providing Context with Headers: Table headers clearly define the content of each row or column, enabling users to understand the data relationships.
  • Ensuring Logical Structure: Tables should follow a clear and predictable structure, making them easy to navigate for all users.

Properly structured tables improve usability for everyone, including users of assistive technologies.

Creating Accessible Tables in WordPress

In the WordPress TinyMCE editor, creating accessible tables requires extra attention, as certain settings — like adding row or column headers — are not immediately visible. Follow these steps to ensure your tables meet accessibility standards:

Step 1: Insert a Table

In the TinyMCE editor, click the table icon in the toolbar and select the number of rows and columns for your table.

Step 2: Add Table Headers

  1. In each cell of the first row, enter the text that will serve as the column header. For example: names or categories.
    • Note: Do not manually make this text bold. When you turn the row/cells into a table header, our styles will automatically make text within those cells bold.
  2. Highlight the entire first row of the table.
  3. Click the table icon in the rich text editor (the same one you used to create the table), then hover over the “Cell” menu item, and click on the “Table cell properties” sub-menu item.
  4. In the Table cell properties dialog box, locate the “Cell Type” dropdown, and select the option for “Header cell”. Then click the blue “OK” button to save your changes.
  5. Highlight the entire first row of the table again.
  6. Click the table icon again, only this time hover over the “Row” menu item, and click on the “Table row properties” sub-menu item.
  7. In the Table cell properties dialog box, location the “Row Type” dropdown, and select the option for “Header”. Then click the blue “OK” button to save your changes.

If your table contains both a header row and header column (the first column is also a header), it’s necessary to highlight each cell (one at a time) and repeat item number “4” above (changing the Table cell properties for that cell to a Header cell).

Need Assistance?

We understand that these steps may feel unintuitive or complex. If you have difficulty adding table headers, or if you are unsure whether your table is accessible, contact the Online Communications Team. We offer training and support to ensure your tables meet accessibility standards.

General Rules for Tables

  • Use the Correct Table Elements: Always use a table header for the first row of your table. You should only be using tables to display tabular data, and not for content layout, so each table should contain a header row.
  • Limit Complexity: Avoid overly complex tables with merged cells or multiple levels of headers.
  • Provide Context: Clearly describe the purpose of your table directly above the table with body content or heading.
  • Preview Your Table: Confirm that your table displays correctly on all devices and screen sizes. (See the “Design Considerations” section below.)

Common Mistakes to Avoid

  • Skipping Headers: Failing to define headers leaves users unable to interpret relationships between rows and columns.
  • Overcomplicating Structures: Avoid merged cells or nested tables unless absolutely necessary.
  • Using Tables for Layout: Tables should never be used for page formatting or design.

Design Considerations

Tables can be a practical way to display data, but they can also create usability issues, especially on mobile devices. More than half of Elon University’s website visitors use smartphones to access our content. If tables are too large or wide, they may spill off the side of the screen, making them difficult — if not impossible — for mobile users to view. This compromises the accessibility and usability of your content.

Why Large Tables Are Problematic

  • Responsive Design Challenges: Tables with too many columns or excessive width often fail to adjust to smaller screens, forcing users to scroll horizontally. This is frustrating for all users and particularly problematic for those using assistive technologies, as it disrupts their ability to navigate the content logically.
  • Readability Issues: Dense, multi-column tables are harder to read, especially on mobile devices, where text becomes compressed or requires excessive zooming.
  • Increased Cognitive Load: Large or complex tables can overwhelm users, making it harder for them to extract key information quickly.

Best Practices for Table Design

To ensure your tables are usable and accessible:

  • Limit the Number of Columns: Avoid using more than 3–4 columns when possible, especially for content likely to be viewed on mobile devices.
  • Consider Alternative Formats: Ask yourself if the information can be presented in another way, such as:
    • Lists: Use ordered or unordered lists to display simple points or data.
    • Summaries: Highlight key data points in a paragraph rather than using a table.
  • Simplify the Content: Break large tables into smaller, focused tables to make the data easier to digest and improve usability on smaller screens.
  • Test for Mobile Usability: Always preview your content on a smartphone or tablet to ensure tables are legible and responsive. Web browsers will attempt adjust table formatting, but this only works effectively with simple, well-structured tables.

When to Use Tables

Tables should only be used when absolutely necessary to display structured data, such as statistics or comparison information. If your content doesn’t fall into these categories, it’s often better to use other formats.

Final Thoughts on Design

Well-designed tables enhance accessibility and usability, while poorly designed tables can alienate mobile users and create barriers to understanding. By keeping tables simple, limiting their use and testing them across devices, you ensure that your content is accessible to all users and aligns with Elon University’s commitment to inclusivity.

Final Tips

  • Practice in the CMS: Familiarize yourself with WordPress’s table settings in the editor. Practice creating accessible tables to build confidence.
  • Ask for Help: If you’re unsure how to format a table or implement headers, contact the Online Communications Team for training or assistance.
  • Consider Alternatives: If a table is too complex, consider breaking it into smaller, simpler tables or presenting the data in a different format, such as a list.
    • We cannot stress this enough: There are likely alternative ways to display your information other than a table which are better for accessibility or responsive design reasons. For example, there are alternative ways to display a list of events, dates and locations than using a table. There are also tools in WordPress explicitly for creating columns for side-by-side content.

With these steps, you’ll create tables that are both accessible and user-friendly, supporting Elon University’s commitment to inclusivity and accessibility.