This is a table on a website:
| Test | Test | Test |
|---|---|---|
| Test | Test | Test |
| Test | Test | Test |
| Test | Test | Test |
| Test |
WordPress tables are not inherently accessible. Why? Because on most tables, both the top row, and the leftmost column are considered “headers.” Read why you need column and row headers here. WordPress doesn’t allow you label it as such, so you will have to use a table generator or AdvancedTables TablePress, or another solution.
Complicated tables:
If you have a more complicated table with sub headers like the table on this page, you will need more advanced code than I can provide here.
To create an accessible table:
- Upload your CSV to the table generator website, and then check the checkboxes next to:
- Does the first row contain headings? (Most do)
- Does the first column contain headings? (Most do, logically speaking)
- The website will give you the code. Copy it.
- Then, In WordPress: select the block “Custom HTML” and enter in the code they gave you. Also, before that code, include the style code below. Once you do that, publish and view it on the site.
Sample HTML code:
<table>
<thead>
<tr>
<th scope="col">Rental Charges</th>
<th scope="col">FY2025 Season</th>
<th scope="col">FY2026 Season</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Dates</th>
<td>(July 1st, 2024 - June 30th, 2025)</td>
<td>(July 1st, 2025 - June 30th, 2026)</td>
</tr>
<tr>
<th scope="row">Private Events (non-weddings)</th>
<td>$500 / hour (4 hour minimum)</td>
<td>$500 / hour (4 hour minimum)</td>
</tr>
<tr>
<th scope="row">Weddings</th>
<td>$6,350 / 12 hours, $500 / each additional hour</td>
<td>$6,500 / 12 hours, $500 / each additional hour</td>
</tr>
<tr>
<th scope="row">Security Deposit</th>
<td>$1,000 </td>
<td>$1,500 </td>
</tr>
<tr>
<th scope="row">Ocean View Ceremony Site</th>
<td>$375 / hour (2 hour minimum)</td>
<td>$400 / hour (2 hour minimum)</td>
</tr>
<tr>
<th scope="row">Ocean View Security Deposit</th>
<td>$100 </td>
<td>$200</td>
</tr>
</tbody>
</table>Next, add some style code before it. Example style code:
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
text-align: left;
}
th, td {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
</style>So for example, here is the style code before an example table code:
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
text-align: left;
}
th, td {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
</style>
<table>
<thead>
<tr>
<th scope="col">Rental Charges</th>
<th scope="col">FY2025 Season</th>
<th scope="col">FY2026 Season</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Dates</th>
<td>(July 1st, 2024 - June 30th, 2025)</td>
<td>(July 1st, 2025 - June 30th, 2026)</td>
</tr>
<tr>
<th scope="row">Private Events (non-weddings)</th>
<td>$500 / hour (4 hour minimum)</td>
<td>$500 / hour (4 hour minimum)</td>
</tr>
<tr>
<th scope="row">Weddings</th>
<td>$6,350 / 12 hours, $500 / each additional hour</td>
<td>$6,500 / 12 hours, $500 / each additional hour</td>
</tr>
<tr>
<th scope="row">Security Deposit</th>
<td>$1,000 </td>
<td>$1,500 </td>
</tr>
<tr>
<th scope="row">Ocean View Ceremony Site</th>
<td>$375 / hour (2 hour minimum)</td>
<td>$400 / hour (2 hour minimum)</td>
</tr>
<tr>
<th scope="row">Ocean View Security Deposit</th>
<td>$100 </td>
<td>$200</td>
</tr>
</tbody>
</table>Preview in Faculty WordPress:
| Rental Charges | FY2025 Season | FY2026 Season |
|---|---|---|
| Dates | (July 1st, 2024 – June 30th, 2025) | (July 1st, 2025 – June 30th, 2026) |
| Private Events (non-weddings) | $500 / hour (4 hour minimum) | $500 / hour (4 hour minimum) |
| Weddings | $6,350 / 12 hours, $500 / each additional hour | $6,500 / 12 hours, $500 / each additional hour |
| Security Deposit | $1,000 | $1,500 |
| Ocean View Ceremony Site | $375 / hour (2 hour minimum) | $400 / hour (2 hour minimum) |
| Ocean View Security Deposit | $100 | $200 |
Preview in UCSC WordPress:
It should look like this the following image, although it might look different depending on what CSS code you add.
Tip: If you can’t get the table to left align on your theme, place it inside a 100% wide column block.
Important: If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a <td> rather than a <th>.
Alternate fix: AdvancedTables TablePress.
- Have your web designer turn on AdvancedTables TablePress.
- From your dashboard, click on “TablePress” in the lefthand column.
- Make a new table. You can upload a CSV if you wish. TablePress can import tables from common spreadsheet applications, like XLSX files from Excel, or CSV, ODS, HTML, and JSON files.
- At the bottom of the table-creating page, check the checkbox for “The first row of the table is the table header.”
- Save the table, go to the top of the page, and copy the Shortcode.
- On the webpage, typed /shortcode and hit enter.
- Then when inserting the shortcode you copied into that new block, if you want the first column to be a header column, you must add first_column_th=true / to the end of the shortcode. For example:
[table id=exampletable first_column_th=true /]It will then look like this (possibly with some bells and whistles added or removed, depending on what you selected when creating the table in AdvancedTables TablePress):
Or it will look like this if you added Search and other bells and whistles:
Documentation on accessibility:
Additionally, please push for allowing scrolling on tables for better mobile experience:
On WCAG’s Reflow standard: They indicate table scrolling is for “content which require two-dimensional layout for usage or meaning.” And, lower down: “Examples of content which requires two-dimensional layout are images required for
understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to
keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.”
This is for:
- For users who increase the size of text, the squished columns withoutscrolling will actually be harder to read.
- For users who are blind, the screen reader still functions.
- For users with mobility issues, they will need the same amount of mobility to view scrolled tables as they need to scroll the page normally.
I had a friend compare the experience of the following two tables and they were able to notice the scrolling mechanism without help, and then found the scrolling to be much easier.