Uniquement à des fins de présentation
L'expression « uniquement à des fins de présentation » désigne deux réalités liées en accessibilité web. Côté HTML, c'est le détournement d'une balise pour obtenir un effet visuel (un <blockquote> pour indenter, un <h2> pour agrandir du texte). Côté ARIA, c'est le rôle role="presentation" (synonyme role="none") qui supprime la sémantique d'un élément dans l'arbre d'accessibilité tout en gardant son contenu visible.
Un lecteur d'écran ne voit pas votre CSS. Il lit la structure HTML. Si vous utilisez un <h3> pour agrandir un mot ou un <blockquote> pour indenter un paragraphe, le lecteur d'écran annonce un titre ou une citation là où il n'y en a pas.
#Deux contextes, un même principe
Le critère RGAA 8.9 interdit d'utiliser des balises HTML uniquement pour leur rendu visuel. La règle : la balise doit correspondre au sens du contenu, pas à son apparence.
<!-- Interdit : <blockquote> utilisé pour indenter -->
<blockquote>Nos bureaux sont ouverts de 9h à 18h.</blockquote>
<!-- Correct : du CSS pour l'indentation -->
<p style="margin-left: 2rem;">Nos bureaux sont ouverts de 9h à 18h.</p>L'autre contexte concerne le rôle WAI-ARIA presentation. Appliqué à un élément, il supprime sa sémantique dans l'arbre d'accessibilité, mais le contenu reste visible. Son synonyme, role="none", a été ajouté dans ARIA 1.1 parce que trop de développeurs confondaient « presentation » avec « caché ».
#Le cas typique : le tableau de mise en forme
Les tableaux HTML pour la mise en page sont déconseillés. Mais dans les emails HTML, CSS Grid et Flexbox restent mal supportés. La solution : role="presentation" sur le <table>, qui dit aux technologies d'assistance : « ce n'est pas un vrai tableau de données ».
<table role="presentation">
<tr>
<td>Menu</td>
<td>Contenu principal</td>
</tr>
</table>Sans ce rôle, un lecteur d'écran annonce « tableau, 1 ligne, 2 colonnes » et propose la navigation cellule par cellule. Inutile pour de la mise en page.
#Le piège : confondre presentation et aria-hidden
role="presentation" supprime la sémantique du conteneur. Le texte et les liens à l'intérieur restent accessibles. aria-hidden="true", lui, masque tout : l'élément et ses enfants disparaissent de l'arbre d'accessibilité.
Autre cas à éviter : appliquer role="presentation" à un bouton ou un lien. Le navigateur doit ignorer le rôle et conserver la sémantique native. Mais le comportement réel varie selon les combinaisons navigateur et lecteur d'écran. Ne testez pas cette limite.
#En résumé
Chaque balise HTML porte un sens. Si vous la choisissez pour son apparence et non pour sa signification, vous envoyez de fausses informations aux technologies d'assistance. CSS gère l'apparence, HTML la structure. Réservez role="presentation" aux rares cas où un élément structurel (tableau, liste) sert de conteneur visuel sans valeur sémantique.