Tables for Layout or Data

Tables are used for both layout and presenting data. Making table accessible depends on the use case.

Layout Tables

When using tables for layout (controlling the placement of content on the page) there are two main considerations:

Screen readers read the content of cells row-by-row moving from left-to-right.

Organize the content in the cells of your table with this in mind. If the content has to be read in a certain order, then follow the order as pictured in the sample below.

Table Grid
 

Do not use captions or table headers.

When adding a table using School Loop's rich text editor (as pictured below), leave the "Headers" setting at "None" and leave the "Caption" and "Summary" fields blank.

 table properties

Data Tables

Follow the guidelines below to create accessible data tables using School Loop's rich text editor.

Use Row and column headers

Tables can have the headers set for the first row (Table 1 below), first column, or both (Table 2 below). Use the "Header" setting as pictured above when creating your table.

Table 1: Header Row
Month Sales
January $30,000.00
February $38,000.00

 

Table 2: Header Row and Column
State Capital Population
California Sacramento 38,332,521
Tennessee Nashville 6,495,978

 

Include a Caption

Enter a brief description of the table in the caption field.

Summary

Though not well supported, the summary field can be used to provide a long description of the table's structure, but not its content.