Layout table reading order is not logical

Rule

The reading and navigation order MUST be logical and intuitive.

Background

Sometimes content must be read in a certain order to be understood. When screen reader users navigate page content, they hear the content in the order of the code in the DOM. HTML tables are ordered in code with the left-most cell of the first row first, moving from cell-to-cell, left-to-right across the row, then the second row, left-to-right, and so on. Sometimes, when a layout table is used to arrange content, the way the content appears visually and the way it reads "linearly" by a screen reader differs in such a way that meaning of content is changed or is illogical. The order of content in the DOM must be logical and meaningful.

How to Fix

Fix this issue by ensuring that the order of the content in the DOM is logical regardless of how it is visually arranged in a layout table. This may be achieved by rethinking the way the layout table is structured, or (preferably) by using CSS to arrange content rather than a layout table.