{"id":2529,"date":"2024-12-03T17:17:37","date_gmt":"2024-12-03T22:17:37","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/?post_type=chapter&p=2529"},"modified":"2025-05-20T13:26:01","modified_gmt":"2025-05-20T17:26:01","slug":"bsp-tables","status":"web-only","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/bsp-tables\/","title":{"raw":"Accessible Tables","rendered":"Accessible Tables"},"content":{"raw":"\"\"Tables present information in a grid which a sighted user can scan to understand the relationship between columns, rows, and data. Properly coded tables help assistive technology announce the column and\/or row number and header as users move between cells. This ensures everyone can access and understand tables. The Brightspace Accessibility Checker is a robust tool for check table accessibility.\r\n

Who benefits from accessible tables<\/h2>\r\nWhile sighted users can scan a table to understand the relationship between rows and cells, some users of assistive technology require those relationships to be indicated audibly. Consider the following demonstration of a screen reader reading a table without proper code followed by the same table with proper code.\r\n\r\nhttps:\/\/mediaspace.langara.ca\/media\/t\/0_xh5sy6li\r\n\r\nTake note that in the table without proper code the screen reader could move from left to right and row to row to announce the cell contents. However, when deeper in the table it becomes unclear what the cell data refers to. In the properly coded table screen reader software announced the header labels such as brand, type, and colour and announced what column or row the cell is in. This helps users that cannot see the table to understand the information and relationships between data.\r\n

How to fix it<\/h2>\r\n

Table Caption<\/h3>\r\nA table caption provides an overview of the information in the table. A caption could be considered similar to a title.\r\n\r\n\"\"\r\n\r\nIn the Accessibility Checker, type a brief description of the table in the\u00a0Provide caption<\/strong> field and select\u00a0Repair<\/strong>.\r\n

Table Header Cell<\/h3>\r\nHeader cells are required to convey relationships between data to users of assistive technology. Assistive technology will announce the header label to orient users. This ensures everyone can access and understand tables. Header cells can be a row or column.\r\n\r\n\"\"\r\n\r\nIn the Accessibility Checker, select\u00a0Header row\u00a0<\/strong>or\u00a0Column row<\/strong> from the\u00a0Choose table header<\/strong> menu to designate the top row or first column as a header. Click\u00a0Repair<\/strong> to fix the error.\r\n

Table Header Scope<\/h3>\r\nOnce a header is set, scope must be applied. Scope indicates the relationship between the header cell and subsequent data. For example, the top cell of the second column is a header cell so its scope is the second column.\r\n\r\n[caption id=\"attachment_3067\" align=\"alignnone\" width=\"980\"]\"\" Animation of table in Brightspace highlighting cells in column 2 to demonstrate scope[\/caption]\r\n\r\nBy assigning the proper scope, the column name is announced when navigating between cells, helping users to understand where they are in a table and the relationships between cells.\r\n\r\n\"\"\r\n\r\nIn the Accessibility Checker, choose\u00a0Row, Column, Row group, or Column group<\/strong> in the\u00a0Select header scope\u00a0<\/strong>menu then select\u00a0Repair<\/strong>. Depending on the layout and complexity of your table, you may need to repeat the process for each column and\/or row.\r\n

How to prevent it next time<\/h2>\r\nhttps:\/\/mediaspace.langara.ca\/media\/t\/0_jtlv53yn\r\n\r\n
To create an accessible table:<\/summary>\r\n
    \r\n \t
  1. Open the\u00a0Table\u00a0<\/strong>menu in the editor tool bar and move to\u00a0Insert Table<\/strong>.\"\"<\/li>\r\n \t
  2. Select the number of columns and rows desired.<\/li>\r\n \t
  3. To designate header cells:\r\n
      \r\n \t
    1. Place the cursor in the appropriate cell.<\/li>\r\n \t
    2. Open the\u00a0Table<\/strong> menu and choose\u00a0Cell<\/strong> and then Cell Properties<\/strong>.<\/li>\r\n \t
    3. In the Cell Properties window, select\u00a0Header cell<\/strong> in the\u00a0Cell type<\/strong> field.<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t
    4. To set scope:\r\n
        \r\n \t
      1. Choose\u00a0Row<\/strong> or\u00a0Column<\/strong> as appropriate in the Scope\u00a0<\/strong>menu.<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t
      2. Click\u00a0Save<\/strong>.<\/li>\r\n \t
      3. Repeat with each header cell.<\/li>\r\n \t
      4. Open the\u00a0Table\u00a0<\/strong>menu and select\u00a0Table Properties<\/strong>.<\/li>\r\n \t
      5. Check\u00a0Show Caption<\/strong> and select\u00a0Save<\/strong>.<\/li>\r\n \t
      6. Replace the \"Caption\" placeholder text with a brief description of the table.<\/li>\r\n<\/ol>\r\n<\/details>\r\n
        \r\n

        Next<\/p>\r\n\r\n<\/header>\r\n

        \r\n\r\nMove to the next page to learn more about Additional Brightspace Accessibility Considerations<\/strong> or select the next error you want to fix<\/a>.\r\n\r\n<\/div>\r\n<\/div>","rendered":"

        \"\"Tables present information in a grid which a sighted user can scan to understand the relationship between columns, rows, and data. Properly coded tables help assistive technology announce the column and\/or row number and header as users move between cells. This ensures everyone can access and understand tables. The Brightspace Accessibility Checker is a robust tool for check table accessibility.<\/p>\n

        Who benefits from accessible tables<\/h2>\n

        While sighted users can scan a table to understand the relationship between rows and cells, some users of assistive technology require those relationships to be indicated audibly. Consider the following demonstration of a screen reader reading a table without proper code followed by the same table with proper code.<\/p>\n