Are your tables simple or complex?<\/h1>\r\nA simple table includes a maximum of one header column and\/or one header row. A\u00a0complex table includes more than one header column and\/or header row, and may include\u00a0merged or split cells.[footnote]Penn State, \"Tables,\" Accessibility,<\/em>\u00a0accessed March 28, 2018, http:\/\/accessibility.psu.edu\/tables.[\/footnote]\r\n\r\nWe recommend you make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their learning materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.\r\n\r\nHowever, you can use merged or split table cells if they are formatted correctly. Check out this web page to learn more: Tables Concepts<\/a>\r\nWho are you doing this for?<\/h1>\r\nThis work supports students who:\r\n\r\n \t- Have a form of cognitive disability,<\/li>\r\n \t
- Are blind or have low vision<\/li>\r\n<\/ul>\r\n\r\n
\r\n\r\nWhat do you need to do?<\/h1>\r\nIn the same way that your content hierarchy needs headings and structure (see Organizing Content<\/a>), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.\r\n\r\nThe following video shows a screenreader reading different table layouts and demonstrates the importance of reading order when creating accessible tables.\r\n\r\nScreen reader reading different table layouts<\/a>\r\n\r\n[embed]https:\/\/youtu.be\/XN2MTLNH5Xk[\/embed]\r\n<\/a>Create simple tables<\/h1>\r\nA simple table includes:\r\n\r\n \t- A table title or caption<\/li>\r\n \t
- Maximum of one row of column headers and\/or maximum of one column of row headers, with the appropriate scope assigned<\/li>\r\n \t
- Avoid using merged or split cells<\/li>\r\n \t
- Adequate cell padding for visual learners<\/li>\r\n<\/ol>\r\n
\r\nExample 1: How to Create a Simple Table in VIULearn<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\nThe table below is a simple table created in VIULearn. Reviewed against the preceding requirements list, this table:\r\n\r\n \t- Includes\u00a0a caption<\/strong> (Spring Blossoms)<\/li>\r\n \t
- Has one row\u00a0in which cells are\u00a0tagged as column headers<\/strong> (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers<\/strong> (Pink, Yellow)<\/li>\r\n \t
- Avoids the use of merged or split cells wherever possible<\/li>\r\n \t
- Has adequate cell padding<\/strong>\u00a0to provide space buffering around the data in each cell. (Cell padding in this table is set at \"10\").<\/li>\r\n<\/ol>\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-10-30-at-2.57.43-PM-1024x443.png\")
\r\n\r\nFor a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:\r\n\r\n \t- Row 2, Colour family, column 1, Pink<\/li>\r\n \t
- Bulbs, column 2, Tulips<\/li>\r\n \t
- Shrubs, column 3, Flowering currant<\/li>\r\n \t
- Trees, column 4, Ornamental plum<\/li>\r\n<\/ul>\r\nMarking cells in the first row and\/or column of a table as header cells allows a screen reader to interpret the structure of a table and how cells relate to each other. This, in turn, ensures that someone using a screen reader can navigate through a table and understand what column\/row a given cell is in. If a table doesn't have headers, the screen reader will recite cell information starting in the upper left corner and continuing left to right, top to bottom.\r\n\r\n<\/div>\r\n<\/div>\r\n
How to mark cells and rows as headers<\/h2>\r\nAs with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.\r\n\r\nThe following screenshots will show you how to identify column and row headers in a table created in VIULearn.\r\n\r\nExamples: How to add column and row headers in a table created in VIULearn.<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-11-09-at-3.03.49-PM-1024x646.png\")
\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-11-09-at-3.04.12-PM-1024x760.png\")
\r\n\r\n<\/div>\r\n<\/div>\r\nHow to create a table caption and add cell padding<\/h2>\r\n\r\nExample 3: Captions and cell padding in VIULearn<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Adding-Captions-and-Cell-Padding-to-Table-in-VIULearn-1024x762.png\")
\r\n\r\n<\/div>\r\n<\/div>\r\nAdd a [Skip Table] option<\/h2>\r\nFor large data tables, it can be a good idea to add a link which will allow people to skip the content of the table. See the image below for an example.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-12-08-at-11.45.14-AM-1024x295.png\" "\\"Table")
\r\n
As shown, this link is best placed in a row preceding the column headers. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.<\/p>\r\nIn this case the link will take the user to the next piece of content in the VIULearn course.","rendered":"
In this section, we provide guidelines and recommendations for formatting tables.<\/p>\n
\nWhat are tables?<\/h1>\n
In this context, tables refer to data tables<\/em>, which include row and\/or column header information to categorize content. (Tables that do not have headers are called layout tables<\/em>.)<\/p>\nFile types include:<\/strong> DOCX, HTML, PDF<\/p>\nAre your tables simple or complex?<\/h1>\n
A simple table includes a maximum of one header column and\/or one header row. A\u00a0complex table includes more than one header column and\/or header row, and may include\u00a0merged or split cells.[1]<\/sup><\/a><\/p>\nWe recommend you make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their learning materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.<\/p>\n
However, you can use merged or split table cells if they are formatted correctly. Check out this web page to learn more: Tables Concepts<\/a><\/p>\nWho are you doing this for?<\/h1>\n
This work supports students who:<\/p>\n
\n- Have a form of cognitive disability,<\/li>\n
- Are blind or have low vision<\/li>\n<\/ul>\n
\nWhat do you need to do?<\/h1>\n
In the same way that your content hierarchy needs headings and structure (see Organizing Content<\/a>), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.<\/p>\nThe following video shows a screenreader reading different table layouts and demonstrates the importance of reading order when creating accessible tables.<\/p>\n
- \r\n \t
- Have a form of cognitive disability,<\/li>\r\n \t
- Are blind or have low vision<\/li>\r\n<\/ul>\r\n\r\n
\r\n\r\nWhat do you need to do?<\/h1>\r\nIn the same way that your content hierarchy needs headings and structure (see Organizing Content<\/a>), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.\r\n\r\nThe following video shows a screenreader reading different table layouts and demonstrates the importance of reading order when creating accessible tables.\r\n\r\nScreen reader reading different table layouts<\/a>\r\n\r\n[embed]https:\/\/youtu.be\/XN2MTLNH5Xk[\/embed]\r\n
<\/a>Create simple tables<\/h1>\r\nA simple table includes:\r\n
- \r\n \t
- A table title or caption<\/li>\r\n \t
- Maximum of one row of column headers and\/or maximum of one column of row headers, with the appropriate scope assigned<\/li>\r\n \t
- Avoid using merged or split cells<\/li>\r\n \t
- Adequate cell padding for visual learners<\/li>\r\n<\/ol>\r\n
\r\n Example 1: How to Create a Simple Table in VIULearn<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\nThe table below is a simple table created in VIULearn. Reviewed against the preceding requirements list, this table:\r\n- \r\n \t
- Includes\u00a0a caption<\/strong> (Spring Blossoms)<\/li>\r\n \t
- Has one row\u00a0in which cells are\u00a0tagged as column headers<\/strong> (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers<\/strong> (Pink, Yellow)<\/li>\r\n \t
- Avoids the use of merged or split cells wherever possible<\/li>\r\n \t
- Has adequate cell padding<\/strong>\u00a0to provide space buffering around the data in each cell. (Cell padding in this table is set at \"10\").<\/li>\r\n<\/ol>\r\n
\r\n\r\nFor a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:\r\n- \r\n \t
- Row 2, Colour family, column 1, Pink<\/li>\r\n \t
- Bulbs, column 2, Tulips<\/li>\r\n \t
- Shrubs, column 3, Flowering currant<\/li>\r\n \t
- Trees, column 4, Ornamental plum<\/li>\r\n<\/ul>\r\nMarking cells in the first row and\/or column of a table as header cells allows a screen reader to interpret the structure of a table and how cells relate to each other. This, in turn, ensures that someone using a screen reader can navigate through a table and understand what column\/row a given cell is in. If a table doesn't have headers, the screen reader will recite cell information starting in the upper left corner and continuing left to right, top to bottom.\r\n\r\n<\/div>\r\n<\/div>\r\n
How to mark cells and rows as headers<\/h2>\r\nAs with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.\r\n\r\nThe following screenshots will show you how to identify column and row headers in a table created in VIULearn.\r\n
\r\n Examples: How to add column and row headers in a table created in VIULearn.<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\n\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\r\nHow to create a table caption and add cell padding<\/h2>\r\n
\r\n Example 3: Captions and cell padding in VIULearn<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\r\nAdd a [Skip Table] option<\/h2>\r\nFor large data tables, it can be a good idea to add a link which will allow people to skip the content of the table. See the image below for an example.\r\n\r\n
\r\nAs shown, this link is best placed in a row preceding the column headers. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.<\/p>\r\nIn this case the link will take the user to the next piece of content in the VIULearn course.","rendered":"
In this section, we provide guidelines and recommendations for formatting tables.<\/p>\n
\nWhat are tables?<\/h1>\n
In this context, tables refer to data tables<\/em>, which include row and\/or column header information to categorize content. (Tables that do not have headers are called layout tables<\/em>.)<\/p>\n
File types include:<\/strong> DOCX, HTML, PDF<\/p>\n
Are your tables simple or complex?<\/h1>\n
A simple table includes a maximum of one header column and\/or one header row. A\u00a0complex table includes more than one header column and\/or header row, and may include\u00a0merged or split cells.[1]<\/sup><\/a><\/p>\n
We recommend you make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their learning materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.<\/p>\n
However, you can use merged or split table cells if they are formatted correctly. Check out this web page to learn more: Tables Concepts<\/a><\/p>\n
Who are you doing this for?<\/h1>\n
This work supports students who:<\/p>\n
- \n
- Have a form of cognitive disability,<\/li>\n
- Are blind or have low vision<\/li>\n<\/ul>\n
\nWhat do you need to do?<\/h1>\n
In the same way that your content hierarchy needs headings and structure (see Organizing Content<\/a>), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.<\/p>\n
The following video shows a screenreader reading different table layouts and demonstrates the importance of reading order when creating accessible tables.<\/p>\n
- Has one row\u00a0in which cells are\u00a0tagged as column headers<\/strong> (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers<\/strong> (Pink, Yellow)<\/li>\r\n \t
- Includes\u00a0a caption<\/strong> (Spring Blossoms)<\/li>\r\n \t