Bandeaux fixes

Contre-​exemple ergonomique illustré pour questionner l’usage des en-​têtes et pieds de page fixes

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é.

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).

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 attribut tabindex="-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.

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.

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).