On each web page, tags must not be used solely for presentation purposes. Is this rule followed?
A developer uses <h3> to highlight a product price because the visual rendering suits them. The screen reader announces "Heading level 3" and inserts this price into the page's heading outline. This is direct pollution of heading-based navigation.
The criterion targets all semantic HTML elements misused for purely visual purposes: headings <h1>-<h6> chosen for their font size, <blockquote> to create visual indentation, empty <p> to generate margins between blocks. <div> and <span> are excluded because they have no native semantics.
There is a workaround: the role="presentation" attribute. It removes the element's native semantics. Its use is formally discouraged in RGAA but can be justified in very specific cases: a <li> in a WAI-ARIA tabs pattern, yes. An <h2> chosen for its appearance, never.
On a heading, role="presentation" is always non-conformant. The practical rule: if the element choice is motivated solely by CSS, it is a non-conformity.
Un test to detect HTML tags misused for presentation purposes
Semantic elements not diverted for visual purposes
- Inspect the source code for semantic elements whose presence appears dictated by appearance rather than meaning:
<h1>-<h6>,<p>,<blockquote>,<ul>,<ol>,<li>,<em>,<strong>,<table>, etc. The<div>and<span>elements are out of scope. - For each suspect element, verify that it carries the
role="presentation"attribute. - Verify that this use is truly justified: removal of semantics required by an ARIA pattern (e.g., tabs), not a visual trick.
- If both conditions are met, the element is conformant. If
role="presentation"is absent, or if its use is not justified, it is a non-conformity.
Priority cases to watch: headings used for their font size, <blockquote> for visual indentation, empty <p> to create spaces, presentation <table> without role="presentation".
Examples
❌ Non-compliant : Heading used as visual caption on a product card
<div class="card">
<img src="chaussure-running.jpg" alt="Running shoe model X">
<h3>Starting from €89</h3>
<p>Lightness and performance for your workouts.</p>
</div>The <h3> is used for its default visual rendering (larger, bold text) rather than to structure content. The screen reader announces "Heading level 3" and includes this price in the page's navigation outline. A user navigating by headings sees this spurious entry in their table of contents, without section context. The fix: replace the <h3> with a <p> or <span> styled with CSS.
✅ Compliant : WAI-ARIA tabs pattern with role="presentation" justified on <li>
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#panel-1" aria-selected="true">Features</a>
</li>
<li role="presentation">
<a role="tab" href="#panel-2" aria-selected="false">Customer reviews</a>
</li>
</ul>The <ul> element carries role="tablist". In this context, the child <li> elements are no longer in a list context: their native semantics are incompatible with the WAI-ARIA model. The role="presentation" on each <li> removes this semantics and allows the accessibility tree to correctly expose the tabs as direct children of the tablist. The usage is justified by an ARIA structure constraint, not by a visual motivation.
Tips and pitfalls
⚠️ Headings to play with typography: the most common audit error
Using <h2 role="presentation"> to benefit from the default formatting of a heading will always be considered non-conformant. RGAA is explicit on this point. If you need large text without semantic value, use a <p> or <span> with a dedicated CSS class. Visual rendering never justifies the misuse of a heading.
⚠️ Empty paragraphs to create spacing
Empty <p></p> or <p> </p> inserted between blocks to generate vertical space are frequent non-conformities. Some screen readers announce them as empty paragraphs, creating a degraded navigation experience. The solution: manage all spacing with CSS (margin, padding, gap). If an empty element persists for technical reasons, it must carry role="presentation".
⚠️ Legitimate role="presentation" in WAI-ARIA patterns
In a <ul role="tablist">, the <li> elements must carry role="presentation" to remove their list semantics, incompatible with the WAI-ARIA tabs model. This is one of the rare cases where usage is justified and documented in official W3C practices. The key distinction: usage responds to an ARIA structure constraint, not a visual objective.
💡 Quick audit method: the document outline
Install the Web Developer extension and open "Information > View Document Outline". Any heading in the outline that does not correspond to a real content section is immediately suspect. Cross-check with DOM inspection: if the developer chose this element for its default visual rendering, criterion 8.9 is potentially violated.
⚠️ <blockquote> for visual indentation
<blockquote> must frame a quotation from an external source. Using it to indent an arbitrary text block is semantic misuse. RGAA admits that role="presentation" may be acceptable in this specific case, unlike headings. Still, the real solution is to remove this element and manage indentation in CSS on a <div> or <p>.
Frequently asked questions
Which generic HTML elements like <div> and <span> are targeted by RGAA criterion 8.9?
None. <div> and <span> have no native semantics; they are designed to be neutral containers. Criterion 8.9 does not target them. It is the opposite that is problematic: taking a semantic element (<h3>, <blockquote>, <p>) to do the work of a <div>.
Why is applying role="presentation" to an <h2> insufficient to satisfy RGAA criterion 8.9?
Never. role="presentation" on a heading is explicitly cited as non-conformant in RGAA, not as a correction. If the <h2> element does not truly represent a section heading, replace it with a <p> or <span> styled with CSS. The role does not fix the problem; it hides it without solving it.
How do you distinguish legitimate use of role="presentation" from inappropriate use according to RGAA?
Ask yourself a question: am I removing semantics to comply with an ARIA model (tabs, grid…), or am I exploiting the visual rendering of the element? The technical ARIA constraint is the only justifiable reason in an audit. A choice motivated by appearance will be systematically invalidated.
How does RGAA criterion 8.9 apply to <table> elements used for layout?
Yes. Criterion 8.9 explicitly covers presentation tables. A <table> used solely to visually align elements must carry role="presentation". Without this role, the screen reader attempts to interpret the table as a data table and announces rows, columns, and headers where there are none. Ideally, replace these tables with Flexbox or Grid.
What is the difference between RGAA criterion 8.9 and criterion 10.1?
Criterion 10.1 targets obsolete presentation tags and attributes from older HTML: <font>, <center>, <marquee>, the align attribute, etc. Criterion 8.9 targets modern semantic elements (<h1>-<h6>, <p>, <blockquote>) misused for visual purposes. Both are distinct and complementary: you can fail one without failing the other.