Layout table

Impact: Major

Users mainly impacted: Blind and severely visually impaired.

RGAA criteria: Criterion 5.3 - Criterion 5.8

Explanation

A layout table is a technic that involves using a table to control the display of the information in cells. It’s not forbidden, but it must respect some very important rules.

How to integrate a layout table

Do no use elements specific to data tables

Because a layout table is used to control the display of the information, it must not use elements specific to data tables. The semantics of the “table” must be disabled to prevent assistive technologies from triggering table-specific rendering and browsing functionalities.

Forbidden tags and attributes

• The <table> tag should not contain the (obsolete) summary attribute, or must be empty.
• The <table> tag must not contain the role="table" attribute.
• The <table> tag must not contain <caption>, <th>, <thead>, <tfoot>, <colgroup> tags.
• No tag in the <table> tag must contain role="rowheader" and role="colheader" attributes.
• The table cells (<td> tag) must not contain scope, headers, axis attributes.

Required attribute

To totally remove the semantic of “table”, the <table> must contain the role="presentation" attribute.

The linearized content must remain understandable

Here is an example of a layout table where the content is not linearized:

In a visual browser where the entire table is displayed, the table is read in a non-linear way. So the message is read as expected:

Our cars are very economical
Our competitors’ cars consume a lot of fuel

But in a non-visual browser (assistive technology, screen reader…) where the content is read line by line, the message is read a little differently:

Our cars Our competitors’ cars
are very economical consume a lot of fuel

Linearize the content

Two possibilities:

1 : Reorder the content in cells

2 : Span the cells

Replace by a very better alternative

Such tables should be replaced by other elements providing a very better semantic.

For example:

• Ordered (<ol><li>).
• Unordered lists (<ul><li>).
• Definition lists (<dl><dt><dd>).
• Simple paragraphs <p>.