Responsive signifie que le contenu s’adapte à l’espace disponible ; accessible signifie qu’il reste perceptible, utilisable et compréhensible. Le HTML sémantique résout déjà une grande partie du problème.
Structurer la page
~~~html <!doctype html> <html lang="fr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Atelier web accessible</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <a class="skip-link" href="#content">Aller au contenu</a> <header><nav aria-label="Navigation principale"><a href="/">Accueil</a></nav></header> <main id="content" tabindex="-1"> <h1>Apprendre le web en construisant</h1> <section aria-labelledby="courses-title"> <h2 id="courses-title">Cours disponibles</h2> <div class="grid"><article><h3>HTML</h3><p>Structurer une page.</p></article></div> </section> </main> <footer>© La Source</footer> </body> </html> ~~~
Une seule balise h1 décrit la page. Les titres ne sautent pas de niveau uniquement pour leur apparence.
CSS fluide
~~~css :root { font-family: system-ui, sans-serif; line-height: 1.5; } body { margin: 0; color: #172033; background: #fff; } main, header, footer { width: min(70rem, calc(100% - 2rem)); margin-inline: auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; } a, button, input { min-height: 2.75rem; } :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: white; padding: .75rem; z-index: 10; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; } } ~~~
N’empêchez pas le zoom et évitez les hauteurs fixes sur le texte. Une image informative reçoit un alt décrivant sa fonction ; une décoration utilise alt vide.
Tester
Réduisez la fenêtre à 320 CSS pixels, zoomez à 200 et 400 %, naviguez au clavier et vérifiez contraste et ordre des titres. Utilisez un audit automatique, puis un lecteur d’écran : aucun outil unique ne couvre toutes les WCAG.
FAQ
ARIA rend-il automatiquement accessible ?
Non. Préférez l’élément HTML natif avant d’ajouter ARIA.
Une page responsive doit-elle avoir des breakpoints fixes ?
Pas nécessairement. Les unités fluides, flex et grid peuvent s’adapter au contenu.