Miami University WordPress Sites

• Accessible Content
• Creating Content

Accessible Tables

September 17, 2024 | No Comments

Tables should be as simple as possible and structured appropriately (WebAim.org). Tables should be used to organize and display data, not for content/page layout.

Add a Table in WordPress

When editing a page or post, add a new content block then select the Table block type. You can select how many columns and rows are needed for the table and the code will be generated for you. Then you can enter the text. Make sure to turn on Table Headings in the right column in the Block Settings. All tables require column headings to be accessible.

An Okay Table Example

Column Heading 1	Column Heading 2	Column Heading 3
Data	Data	Data
Data	Data	Data
Data	Data	Data

Table Best Practices

• Use column and row headers to provide a description of the table structure for sighted and screen reader users.
• Avoid merging or splitting table cells, as doing so will cause screen readers to read the table columns and rows inaccurately.
  • Special HTML codes are needed for merged cells to allow the content to be read accurately by a screen reader.
    
• Add column headings, row headings, and scope attributes.
  • NOTE: WordPress doesn’t add row headings or scope to your table by default. You can add them manually by converting the block to an HTML content type and then editing the HTML.
    
• If you need to work in the HTML, best practices include:
  • A caption tag <caption> should be at the top of the table. The caption is visible to everyone and should describe the purpose of the table.
    • Example: <table><caption>Description of My Table</caption>…
  • Scope attributes (<th scope=”col”> or <th scope=”row”>) in headers organize and further define table data by row/column headings for screen reader users.
  • Table headers <th> should never be empty, but table data <td> can be empty.

A Better Table Example

My Table Caption

Column Heading 1	Column Heading 2	Column Heading 3
Row Heading 1	Data	Data
Row Heading 2	Data	Data
Row Heading 3	Data	Data

Here is an example of the HTML code:

<table><caption>This is a demonstration of a 3 row, 3 col table</caption>
    <thead>
        <tr>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
            <th scope="col">Column Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th scope="row">Row Heading 2</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th scope="row">Row Heading 3</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

Resources

Learn how screen readers navigate through table content: