Layout Table

A layout table is an HTML <table> element misused for visual positioning of elements on a page. It contains no logical relationship between rows and columns. To prevent screen readers from announcing it as a real table, it must carry the attribute role="presentation" or role="none" and contain no semantic data table tags (<th>, <caption>, scope).

A screen reader encounters a <table> tag. It announces: "table, 3 rows, 2 columns". The user expects structured data with headers. Except this <table> contains no tabular data. It was only used to align two blocks of text side by side. Welcome to the layout table problem.

#Why This Is a Problem

Before CSS, developers used <table> to control visual page layout. This practice has largely declined, but persists in HTML emails, legacy CMS systems, and legacy code.

The problem: a screen reader treats any <table> as a data table. It announces the number of rows and columns, offers cell-by-cell navigation mode, and attempts to link cells to headers. When there are no headers, the user navigates blindly through a grid that has no logical sense.

The RGAA addresses this in theme 5 (criteria 5.3 and 5.8): a layout table must not use markup specific to data tables, and its content must remain understandable once linearized.

#How to Neutralize the Semantics

The solution comes down to a single attribute:

<table role="presentation">
  <tr>
    <td>Left column</td>
    <td>Right column</td>
  </tr>
</table>

role="presentation" tells assistive technologies to ignore the table semantics. The content of the cells remains accessible, but the container is no longer announced as a table. Since ARIA 1.1, role="none" is an exact synonym — it was added because the word "presentation" was confusing.

Be careful not to confuse it with aria-hidden="true". The latter hides the entire content (text included) from the accessibility tree. role="presentation" only hides the semantics of the container: the <td> cells and their text remain readable. Scott O'Hara explains this distinction well.

#The Mistakes Nobody Tells You About

The most common: adding role="presentation" but leaving <th> or a <caption> in the table. According to W3C technique F92, applying role="presentation" to a table containing semantic data markup is a failure of WCAG criterion 1.3.1.

The other pitfall: linearized content loses its meaning. A screen reader reads cells in source code order, left to right, line by line. If you placed a heading in the second column and its content in the first, the reading will be incoherent.

#In Summary

If your <table> contains no tabular data, add role="presentation", remove any data table markup (<th>, <caption>, scope, headers), and verify that content remains readable once linearized. The best solution is not to use <table> at all — CSS Flexbox and Grid do the same job without polluting the accessibility tree.

Back to glossary

Share this article

Learn more

Data Table

A data table is an HTML element that organizes information in rows and columns, where each cell maintains a logical relationship with its headers. Unlike a layout table (used to arrange elements visually), a data table requires semantic markup (tags <th>, scope attribute, <caption> element) so that screen readers convey the context of each value.

Information Presentation

Information presentation refers to the way content is visually formatted on a web page: colors, fonts, spacing, positioning. In accessibility, the principle is strict: all formatting is done through CSS, never through misused HTML tags. Content must remain understandable when styles are disabled or modified by the user.

Presentation only

The phrase "presentation only" describes two related realities in web accessibility. On the HTML side, it's the misuse of a tag to achieve a visual effect (a <blockquote> to indent, an <h2> to enlarge text). On the ARIA side, it's the role="presentation" role (synonym role="none") that removes the semantics of an element from the accessibility tree while keeping its content visible.