As previously mentioned in Module 1, the content you create should be content that can be presented in different ways (for example, a simpler layout) without losing information or structure.
Tables need to be formatted properly in order to be readable by screen readers or screen magnifiers.
When to use tables
Do not use tables to lay out text, images or other web content. Only use tables when presenting data that can best be conveyed in related rows and columns.
Tips to make tables accessible
Follow these rules in order to make your tables more accessible:
Use proper column headings with tables. This provides context for your reader, which is especially necessary in order to convert visual layouts to text for screen readers
Use tables only to present data. Tables on pages are often referred to as Data Tables for this reason. Do not use tables to layout or structure your text. If you want to separate your text into columns, use the column feature (CMS) or the column block (CuTheme).
Use a simple table structure. For example, including a table inside of a table could be confusing for most readers and will also likely not display properly.
Avoid blank cells (blank rows and columns), where possible. You can include “none” or “N/A” to avoid having an empty cell.
Do not use images of tables. As mentioned in Module 3, it is important to avoid using images or screenshots that contain text. This is the same for tables.
Consider adding captions or a description to your tables. This can be a summary of the information presented in the table.
If you are familiar with HTML, check for missing tags to ensure that the table is as legible as possible by screen readers.
Example of an accessible table
Students and their Favourite Ice Cream Flavours
Person (heading)
Flavour (heading)
Brian
Chocolate
Samir
Vanilla
Jasmine
Strawberry
Note how this table has headings over each column (column headings). Additionally, the main heading at the top is clearly legible over the table and provides context for the text in the table. These features make the content easier to interpret for all users, but especially those who do not have access to the visual context of the table layout.
Hello and welcome to module 4 of our accessibility training. This video focuses on understanding the importance of making tables accessible, understanding proper table use and how to make tables accessible.
As previously mentioned in module 1, the content you create should be content that can be presented in different ways without losing information or structure. An example of this is having a simple page layout on your site.
Tables can often be used to organize content and data, making it easier for screen readers or screen magnifiers to read the information presented on the screen if done correctly.
It is important to know when to use tables. Only use tables when presenting data that can best be conveyed in related rows and columns. Do not use tables to format text.
If you must use a table, here are a few tips to follow to make your tables accessible:
Use proper column headings with tables. This provides context for your reader, which, as previously mentioned, can be vital for screen readers.
Use tables to present data. Tables on pages are often referred to as Data Tables for this reason. Do not use tables to layout or structure your text. If you want to separate your text into columns, use the column feature in CMS) or the column block in CuTheme.
Use a simple table structure. For example, including a table inside of a table, could be confusing for most readers.
Avoid blank cells where possible. Blank cells can include blank rows and columns. You can include “none” or “N/A” instead of nothing to avoid having an empty cell.
Do not use images of tables. As mentioned in Module 3, it is important to avoid using images or screenshots that contain text. This makes it more difficult for screen readers. This applies to tables as well.
Consider adding captions or a description to your tables. This can also be a summary of the information presented in the table.
If you are familiar with HTML, check for missing tags to ensure that the table is as legible as possible for screen readers.
Note how this table has headings over each column. These are your column headings. Additionally, the main heading at the top is clearly legible over the table and provides context for the text in the table. These features make the content easier to interpret for all users, but especially those who do not have the visual context of the table layout.
In this module, you learned that tables can be used to organize certain content and data, making it easier for screen readers or screen magnifiers to read the content. You also learned to only use tables to present data that can be best conveyed in related rows and columns—and not to format text.