Skip to Content

Digital Accessibility

Tables in OU Campus

Building accessible tables in OU Campus isn't hard, but you will need to follow these simple steps to ensure everyone can navigate the data your tables are displaying.

Only use tables to present data.

Never use a table to create a custom layout or for any other purpose than to display data.

Create tables using OU Campus table snippets. 

Tables should be built using the Responsive Table and Data Table content snippets provided in OU Campus, rather than via the table icon in the editor toolbar. These snippets automatically create a single header row for your column headings and make it easier to create tables that comply with accessibility guidelines.

Do NOT delete the header row.

OU Campus table snippets provide a header row by default that requires you to add a heading for each column. Each table should have only one header row.

While editing snippets, header rows will have a dark grey background and red text. Don't worry about color contrast — this is NOT how the styling will appear on the public site.

  • Screenshot of the default header row while editing a responsive table snippet in OU Campus, featuring a dark gray background and red text for four columns titled "Header.”
     

If you delete this header row, you will have to add it back manually.
Adding a Header Row in OU Campus »


Write clear column headings.

Give each column a heading that clearly describes the data it contains. 

Example: Clear Column Headings

  • Screenshot of a data table snippet in OU Campus with two columns in the header row for “Course Name” and “Credit Hours,” followed by two rows showing entries for ENGL 101 and ENGL 102, both with 3 credit hours.
     

Complex Tables with Merged Cells

It can be very confusing for those using screen readers to understand tables with merged cells, so you should avoid merging rows or columns whenever possible.

If your table must use merged cells, you can create the table via the Table icon in the editor toolbar but you will need to manually add a header row to ensure the accessibility of your table. You will also need to test that your table is still usable on mobile devices.


Challenge the conventional. Create the exceptional. No Limits.

©