Skip to Main Content

Accessibility Workshop for CCNY: Tables

Accessibility Information on Tables

General Information:

Creating a properly structured table helps a blind, low-vision and/or screen reader user make sense of a table by reading out the heading titles and then cell content.

Why is making tables accessible important?

  • Tables without structural markup to differentiate and properly link data between header and data cells, create accessibility barriers.
  • Tables used for layout are frowned upon because unless they are designed correctly they are not  considered accessible
  • Many accessibility advocates consider using tables for layout bad practice.
  • Accessible tables allows users to perceive, operate understand, access in a robust manner, POUR principles.

How to create accessible tables:

  • Make sure your tables have header rows and/or header columns.
  • Make sure your header row or header column cells are NOT blank.
    • It is okay to have blank data cells, just not a blank header cell.
  • Avoid spanned rows and columns in data tables, especially as headers, many screen readers cannot properly read these correctly.
  • Always use the simplest table configuration possible.
  • After you’ve created headers, you need to associate the data cells with the appropriate headers .The scope attribute identifies whether a table header is a column header or a row header. <th scope=”col”>Name</th> or <th scope=”row”>Max</th>
  • Data tables very often have brief descriptive text before or after the table that indicates the content of that table.
    • This text should be associated to its respective table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag.

Specific Platform Instructions for adding tables

  • You can add and format tables in the editor.
  • To be sure your content is accessible to all users, use tables only to present data rather than for layout or presentation purposes.
  • In the editor's text box, place your mouse pointer where you want to add a table and select the Insert/Edit table icon.
  • When you add a table, you can set the table's basic properties, such as header rows and header columns on the General tab.

Blackboard screengrab showing table properties.

blackboard table row header screengrab.

 


blackboard column header screengrab.

Image credits for Column and Row Header steps screen grabs - Eric Silva (n.d) Creating Accessible Tables in Blackboard. external link.

  • Do not create lists or tables manually, use the built in formatting.

screengrab showing how to create lists or tables in libguides.

Pro Tips

Add a caption to your table.

  • A table caption identifies the overall topic of a table and is useful in most situations. Captions help users to find a table and understand what it’s about and decide if they want to read it.

Add a summary to complex tables provides orientation or navigation hints in complex tables.

  • A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure, information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables.

If both caption and summary are provided for one table, the summary should not duplicate information present in the caption.