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.

Disable CSS on any web page. If content loses its order and information disappears, information presentation is poorly managed. This is exactly what RGAA topic 10 verifies, with 14 dedicated criteria.

#Why separate content and formatting?

A screen reader does not read CSS. It traverses the HTML, in DOM order. If your layout relies on <table> instead of Flexbox, or if a <br> simulates a margin between two blocks, the structure that a sighted user perceives does not exist for a user of assistive technology.

The WCAG criterion 1.3.1 sums up the principle: any information conveyed by visual presentation must also be programmatically determinable. Your decorative bold? CSS. Your large title? An <h2> tag, not a <span> with font-size: 24px.

<!-- Bad: HTML misused for formatting -->
<span style="font-size: 24px; font-weight: bold;">My title</span>
<br><br>
 
<!-- Good: HTML semantics + separate CSS -->
<h2>My title</h2>

#The visual order trap

CSS Grid and Flexbox allow you to visually reorganize elements with order or grid-row. The problem: keyboard navigation and screen readers follow DOM order, not CSS order.

You place a "Buy" button first visually with order: -1, but in the DOM it comes after three paragraphs? A keyboard user will have to tab through all the text before reaching it. WCAG criterion 1.3.2 requires that the programmatic reading order corresponds to the meaningful sequence of content.

#Hiding without disappearing

display: none removes an element from the screen and the accessibility tree. To hide text visually while keeping it readable by screen readers, use the .visually-hidden technique:

.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

The opposite also exists: aria-hidden="true" hides an element from screen readers without removing it from display. Useful for decorative icons placed next to already explicit text.

#In summary

HTML carries meaning, CSS carries appearance. Test your pages without styles: if content remains readable and ordered, the separation is correct. Verify that DOM order corresponds to visual order, and choose the right hiding technique based on your need.