We are pleased to announce that tables created inside the editing window will now be accessible by default. As with all things, there are some caveats:
- While a table starts out as accessible, with a little imagination it will still be possible to take an accessible table and make it inaccessible;
- Only simpler layouts will work (see below);
- Advanced inline HTML editing has been disallowed;
- Tables copied from outside sources like Word will still be inaccessible, and shouldn't be used.
When Can I Use a Table?
Tables are appropriate to use only when the content they contain has a clearly organized logical relationship; tables should never be used for layout.
That said, lists still have numerous advantages over tables:
- Lists are easier to read (linear content places a lower cognitive load on the reader);
- Lists are easier to maintain (with a table, adding or removing rows or columns can be challenging);
- Lists look better on mobile devices, or devices with a tall/narrow screen aspect ratio.
Limitations to tables in the Syllabus Builder
Because tables are generated inside the Syllabus Builder, there are some inherent limitations as to how complex you can make a table. This is based primarily on the header layout.
Allowed formats:
- row headers;
- column headers;
- row/column headers;
Disallowed:
- No irregular or multilevel headers.
Best Practices
Cribbed from https://www.w3.org/WAI/tutorials/tables/tips/
- Keep it simple: Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic.
- Table separation: If several tables follow one another, don’t use a single table and put in an additional row of <th>cells. Screen readers may read aloud all <th> cells in a column, resulting in confusion. Start a new <table> when the topic changes.
- Data separation: Make sure that each separate piece of data has its cell. Don’t use headers in one column and all data in a second column, as this will make it almost impossible for screen readers to work out the relationships between data across columns. Don't use line breaks (<br> elements) to create table rows as the data in the pseudo-rows may no longer align correctly when text is resized.
- Alignment: Align text to the left and numeric data to the right (in left-to-right languages), so that people using larger text sizes or smaller screens will be able to find it. This is especially useful if a cell spans more than one column. It’s helpful to give column headers the same alignment as the data in the cells below.