{"id":17923,"date":"2022-06-06T14:50:49","date_gmt":"2022-06-06T18:50:49","guid":{"rendered":"https:\/\/carleton.ca\/webworkshops\/?page_id=17923"},"modified":"2022-10-31T15:43:02","modified_gmt":"2022-10-31T19:43:02","slug":"how-to-make-accessible-tables","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-4-tables\/how-to-make-accessible-tables\/","title":{"rendered":"How to Make Accessible Tables"},"content":{"rendered":"

Estimated time to complete: 8 minutes<\/p>\n

Module<\/h2>\n

Why is it important to make tables accessible?<\/h3>\n

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.<\/p>\n

Tables need to be formatted properly in order to be readable by screen readers or screen magnifiers.<\/p>\n

When to use tables<\/h3>\n

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.<\/p>\n

Tips to make tables accessible<\/h3>\n

Follow these rules in order to make your tables more accessible:<\/p>\n

    \n
  1. 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<\/li>\n
  2. 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)<\/a> or the column block (CuTheme<\/a>).<\/li>\n
  3. 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.<\/li>\n
  4. Avoid blank cells (blank rows and columns), where possible. You can include “none” or “N\/A” to avoid having an empty cell.<\/li>\n
  5. 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.<\/li>\n
  6. Consider adding captions or a description to your tables. This can be a summary of the information presented in the table.<\/li>\n
  7. If you are familiar with HTML, check for missing tags to ensure that the table is as legible as possible by screen readers.<\/li>\n<\/ol>\n

    Example of an accessible table<\/h3>\n

    Students and their Favourite Ice Cream Flavours<\/strong><\/p>\n\n\n\n\n\n\n
    Person (heading)<\/strong><\/td>\nFlavour (heading)<\/strong><\/td>\n<\/tr>\n
    Brian<\/td>\nChocolate<\/td>\n<\/tr>\n
    Samir<\/td>\nVanilla<\/td>\n<\/tr>\n
    Jasmine<\/td>\nStrawberry<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    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.<\/p>\n

    Video<\/h2>\n