Revue Typographia
<header>
Architecture · Design · Typographie

Dossier spécial <section>

L'architecture sémantique
du web moderne

Les landmarks HTML5 structurent le document de manière accessible et lisible par les navigateurs, lecteurs d'écran et moteurs de recherche. Une page bien balisée est une page qui communique son intention.

<main>

Les landmarks comme ossature sémantique

<article>

Les éléments de section HTML5 — <header>, <nav>, <main>, <aside>, <footer> — correspondent aux rôles ARIA banner, navigation, main, complementary et contentinfo. Ils forment la navigation structurelle de la page pour les technologies d'assistance.

Hiérarchie implicite

<section>

Contrairement aux <div>, les éléments sémantiques portent une signification intrinsèque. Un <header> dans un <article> désigne l'en-tête de cet article, pas de la page. La portée contextuelle est déterminée par l'élément parent.

Navigation par landmark

<section>

Les lecteurs d'écran comme NVDA ou VoiceOver permettent de naviguer directement entre landmarks via une touche de raccourci. Une page correctement structurée offre ainsi une navigation rapide et logique, indépendamment du contenu visuel.

Le rôle de <aside> et <nav>

<article>

L'élément <aside> représente du contenu tangentiellement lié au contenu principal. Il peut contenir une navigation secondaire, des encarts, des publicités ou des widgets. Son rôle ARIA implicite est complementary.

L'élément <nav> doit être réservé aux blocs de navigation significatifs. On peut en avoir plusieurs par page, à condition de les distinguer via aria-label ou aria-labelledby.