Accueil > Accessibilité > Bandeaux fixes
Bandeaux fixes
Les bandeaux fixes posent différents problèmes d’ergonomie et d’accessibilité. Ce sujet est souvent ignoré ou pas pris en compte en connaissance de cause. Pourtant, il est important. C’est pourquoi je regroupe plusieurs ressources qui en parlent dans cette page.
Ressources (6) :
Dois-je utiliser un header et un footer fixes ?
Langue du lien : Français
Contre-exemple ergonomique illustré pour questionner l’usage des en-têtes et pieds de page fixes
Éléments sticky : tests de fonctionnalité et d'accessibilité | Gov.uk
Langue du lien : Anglais
Article publié le 21 mai 2018 sous le titre original Sticky elements : functionality and accessibility testing, écrit par Andy Sellick, qui expliquer qu’il peut y avoir des problèmes avec la navigation clavier où l’en-tête fixe reste par-dessus un élément sur lequel on a le focus et donc, on ne voit pas l’élément focussé.
Le problème des menus fixes et ce qu'il faut faire à la place | Adam Silver
Langue du lien : Anglais
Article publié le 7 mai 2023 sous le titre original The problem with sticky menus and what to do instead, écrit par Adam Silver où il expose de nombreux problèmes posés par ces bandeaux fixes et comment résoudre tout ça (en trouvant des moyens de ne pas en avoir besoin).
Pourquoi une navigation fixe peut saper l’accessibilité - Buttondown
Langue du lien : Anglais
Article publié sous le titre original « Why Sticky Navigation Can Undermine Accessibility » le 24 septembre 2025, écrit par Access * Ability.
Cet article est intéressant car il liste de nombreux problèmes que peuvent poser les navigations fixes (ou sticky) aux personnes handicapées ainsi que les brefs et très légers avantages qu’ils peuvent avoir pour ces personnes. Les impacts négatifs sont bien plus forts.
Point important : dans la conclusion, il est dit que les clones de navigation créés par cette pratique doivent être masqués via l’attribut aria-hidden="true". Il s’agit en réalité d’une bien mauvaise pratique car :
- Les personnes voyantes utilisant un lecteur d’écran ne pourront alors pas faire lire les éléments ;
- Un élément focusable avec un attribut
aria-hidden="true"reste focusable. Ainsi, une personne utilisant un lecteur d’écran pourra prendre le focus sur les éléments et rien ne sera restitué. Ajouter en plus un attributtabindex="-1"sur ces éléments pour les rendre non-focusables ne serait pas non plus une bonne idée pour les personnes voyantes naviguant au clavier.
Un menu sticky est plus rapide à naviguer | Smashing Magazine
Langue du lien : Anglais
Article publié le 11 septembre 2012 sous le titre original A Sticky Menu Is Quicker To Navigate, écrit par Hyrum Denney
Cet article évoque le fait que les bandeaux fixes peuvent être sources de distraction et être intrusifs (sentiment d’oppression).
Je cite le chapitre Distracting and Intrusive :
If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.
Utiliser les requêtes media en CSS pour « défixer » les bandeaux fixes | WAI W3C
Langue du lien : Anglais
Technique WCAG C34 : Using media queries to un-fixing sticky headers /footers
Lorsqu’on zoome dans une page web, les bandeaux fixes posent problème car ils occupent trop de place et ne laissent plus assez (voire plus du tout) de place pour accéder au contenu de la page.
Cette technique WCAG propose de « défixer » l’en-tête et le pied de page fixes lorsque la fenêtre atteint une certaine hauteur trop petite pour lire le contenu (les éléments fixent pourront toujours être gênants dans d’autres cas ; ça ne résout qu’une partie du problème).