You are here: Home Web Team Accessibility Data Tables

Data Tables

Guideline: data tables should have proper markup so associations between table elements are communicated to end users using screen readers. 

Accessible data tables:

    • have a Caption
    • identify Row and Column Headers
    • do not have empty cells or headers
    • do not define table or cell widths -- they let the browser determine width
    • used only for data, not for layout

 

In Plone - In School Loop

Plone:

Example of accessible table:

Birthday Cake Preference
NamePreference
Joe Carrot
Beth Chocolate
Bob Fruit
Mary Vanilla

 

Edit your page and select Insert/Edit Table.

Plone Insert Table

Edit columns/rows and add a Summary.

Plone Insert Table Summary

In the Advanced tab, check Table Caption -- the Summary and Table Caption provide context and explanation for users with screen readers.

Plone Add Table Check Caption 

Edit the cells of the table -- the first row is for the Table Caption.

Plone Table Edit

To add a row, right click a cell and select Row, Insert Row Before.

Table Insert Row

Now we need to identify Row and Column Headers in the HTML code -- the headers are read aloud from screen readers to users and they help users understand the meaning of the data.

Select one cell that will be a Row or Column Header. 

Plone Select a cell 

Click Style.

Plone Click Style 

Click Heading cell.

 Plone Select Heading cell

Repeat for each Row and Column Header.

Columns and Row Headers are bold in the table.

Plone Accessible Table

 


 

School Loop:

Edit a Rich Text Editor Element.
Click the Table icon:

 School Loop Add Table

Click the Headers drop down menu and select Both.
Edit both the Caption and Summary

School Loop Edit Table Properties

To add rows, right-click the table and select Row, Insert Row After.

School Loop Add Rows 

Accessible tables have bold column and row headers:

School Loop Accessible Table

Document Actions