Best Practices: Tables should only be used when presenting data and not for display purposes – this causes difficulties with screen readers used by persons with visual and other disabilities. Screen readers (used by persons with visual and other disabilities) will read aloud each header and cell as presented and the context can be confusing without additional code markup. Basically, please avoid tables in your LibPress site!
Before creating a table, consider these accessibility requirements:
- Include a Header Row: The first row of the table should state what kind of information is contained in each column (rows go across and columns go down). This provides context for the data and assists screen readers in navigating the table.
- Use a simple table structure: Avoid tables nested within other tables. Also, avoid merged or split cells. All of these will make it very difficult, if not impossible, for screen readers to read the information in the table aloud in a way that makes sense.
- Add Alt Text to the table: It can be time-consuming to read a table with a screen reader. Use alt text to add a short summary of the information provided in the table so that screen reader users can decide if they want to read the table in its entirety (see tutorial links below for instructions).
- Avoid blank cells: You should never leave the left uppermost cell blank, as it’s the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there’s nothing more in the table.
- Don’t use screenshots of tables: Build a table in your document or website properly. A screen reader can’t read an image, so a person using a screen reader won’t know what data is contained in a screenshot of a table.
Create a table:
Click the Table button in the second row of icons of the Visual Editor. See below if you don’t see the second row!
- You can insert a table or edit an existing table:Example showing the insertion of a 3 column, 4 row table.Just place the cursor in the cell next to a row or column you want to add. From the menu you have the option of placing it before or after the current cursor location.
If inserting an image into a table cell, the image will initially appear at the bottom of the page. Just cut and paste it into the correct cell. Make sure you apply alt text to this image!
Now make sure it is accessible:
Follow the directions for Tables with One Header and properly markup the code by switching to the Text editor (upper right of the Description field for your Page).
Don’t see the second row of the toolbar?
If you don’t see the second row of icons including the Insert Table button, just click the Toggle Toolbar button on the right of the current toolbar to open the second row of buttons.
If you have a table already, and still want to use it, know that tables can be tricky when editing. For display issues, check the code in the “Text” editor and see if height and width are specified for the table, which may conflict with more specifications of height and width for rows or cells. Contact LibPress if you have problems!