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.

A screen reader doesn't see your CSS. It reads the HTML structure. If you use an <h3> to enlarge a word or a <blockquote> to indent a paragraph, the screen reader announces a heading or a quotation where there isn't one.

#Two contexts, one same principle

The WCAG criterion 8.9 forbids using HTML tags solely for their visual rendering. The rule: the tag must match the meaning of the content, not its appearance.

<!-- Forbidden: <blockquote> used for indentation -->
<blockquote>Our offices are open from 9am to 6pm.</blockquote>
 
<!-- Correct: CSS for indentation -->
<p style="margin-left: 2rem;">Our offices are open from 9am to 6pm.</p>

The other context concerns the WAI-ARIA role presentation. Applied to an element, it removes its semantics from the accessibility tree, but the content remains visible. Its synonym, role="none", was added in ARIA 1.1 because too many developers confused "presentation" with "hidden".

#The typical case: the layout table

HTML tables for page layout are discouraged. But in HTML emails, CSS Grid and Flexbox remain poorly supported. The solution: role="presentation" on the <table>, which tells assistive technologies: "this is not a real data table".

<table role="presentation">
  <tr>
    <td>Menu</td>
    <td>Main content</td>
  </tr>
</table>

Without this role, a screen reader announces "table, 1 row, 2 columns" and offers cell-by-cell navigation. Unnecessary for layout.

#The pitfall: confusing presentation and aria-hidden

role="presentation" removes the semantics of the container. The text and links inside remain accessible. aria-hidden="true", on the other hand, hides everything: the element and its children disappear from the accessibility tree.

Another case to avoid: applying role="presentation" to a button or link. The browser must ignore the role and retain the native semantics. But the actual behavior varies depending on browser and screen reader combinations. Don't test this edge case.

#In summary

Each HTML tag carries meaning. If you choose it for its appearance and not for its significance, you send false information to assistive technologies. CSS manages appearance, HTML manages structure. Reserve role="presentation" for the rare cases where a structural element (table, list) serves as a visual container without semantic value.

Back to glossary
Share this article

Learn more

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.

Style Sheet

A style sheet is a CSS file that defines the visual appearance of a web page. In accessibility, three origins coexist: the browser's, the developer's, and the user's. The RGAA verifies that informative content remains readable when author styles are disabled.

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).