The <table> element is for data that one might find in a spreadsheet, consisting of rows and columns of cells. Browsers provide this mechanism to display table structures and to convey table data to assistive technologies. It's important to ensure that the editing process allows identifying row and column headers so that screen reader users can access the meaning of each data cell by understanding what row and column it appears in.
In WYSIWYG editors such as the one provided in Open Scholar, it's possible to create HTML tables using the table tool.
Example
We are going to build an accessible table for different foods categorized by food group using Open Scholar's editor. This table will have three columns with the column head
To begin, we need to insert a basic table. We create our headers, and add rows as we progress. First, choose the Insert/Edit table option from the bottom row of the WYSIWYG toolbar. This opens a new window that should look like this:
Use the form to add 3 columns and 4 rows, then press Insert to add the table to your work. You should see something like this:
Now we need to make the header row. Without a header row, a table isn't readable or accessible because there's no header to label the contents of each column. Click inside the first row, and then find the tool to the right of the table tool (in the toolbar) labeled Table Row Properties. You need to switch the row type to "header":
Back in the main WYSIWYG pane, you can now add the table header text: "dairy", "meat" and "vegetables". You can differentiate this header text from the subject rows by selecting it and making it bold.
| dairy | meat | vegetables |
| milk | chicken | spinach |
| butter | fish | carrots |
| yogurt | turkey | onions |
Regrettably, Open Scholar's WYSIWYG editor does not generate quite the correct markup for accessible tables, so you'll have to do a little coding to get things straight. If you click the disable rich-text link at the bottom of the body WYSIWYG pane, you should see your table, with a table header that looks like this:
<thead>
<tr>
<td><strong>dairy</strong></td>
<td><strong>meat</strong></td>
<td><strong>vegetables</strong></td>
</tr>
</thead>
You need to change the <td> elements here into <th> (table header) element, like so:
<thead>
<tr>
<th><strong>dairy</strong></th>
<th><strong>meat</strong></th>
<th><strong>vegetables</strong></th>
</tr>
</thead>
With these correct column header elements in place, screen readers can use the content of the column headers to help describe the column content. For example, on navigating to the “milk” cell, the screen reader will announce "dairy: milk." This is better than trying to remember which column you're in.