La gestion du focus sur mobile pose des problèmes d’accessibilité (les liens d'évitement ne sont pas en premier, et il y a focus sur des éléments invisibles)

[AmauryCarrade]

Description du bug

Sur mobile, le focus des éléments — qui est utilisé dans le cas d'usage de certains outils d'assistance — est mal géré pour notamment deux raisons.

• Le menu prend le focus sans être visible. En effet, lorsqu'un des éléments du menu a le focus, le menu ne s'ouvre pas automatiquement. On navigue donc en aveugle.
• Les liens d'évitement généraux du site (Aller au menu, Aller au contenu, Aller à la recherche) doivent être les premiers éléments focusable. C'est le cas sur PC ; mais sur mobile, le menu latéral est injecté avant, et vole le focus, avec un comportement décrit ci-dessus.

Comment reproduire ?

Si vous avez accès à un téléphone mobile et que vous savez utiliser le lecteur d'écran disponible (VoiceOver ou TalkBack par exemple)

1. Sur mobile, allez sur n’importe quelle page du site avec le lecteur d'écran actif.
2. Naviguez de focus en focus.
3. Constatez que vous naviguez en premier dans le menu sans que ce dernier n’apparaisse ; et que les premiers éléments ayant le focus ne sont pas les liens d'évitement généraux du site.

Si vous n'avez pas cet accès

1. Sur PC, allez sur n’importe quelle page du site et activez le mode de simulation mobile de votre navigateur (p.ex. sur Firefox).
2. Naviguez de focus en focus en partant du début de la page (pour être sûr·e, actualisez la page et/ou commencez le focus depuis l'interface du navigateur elle-même).
3. Constatez que vous naviguez en premier dans le menu sans que ce dernier n’apparaisse ; et que les premiers éléments ayant le focus ne sont pas les liens d'évitement généraux du site.

Comportement attendu

Sur mobile, le focus commence sur les liens d'évitement ; puis il bascule sur le menu, qui apparaît lorsqu'un de ses éléments a le focus.

Capture d'écran

Sur cette capture, le focus est dans le menu latéral (cf. indicateur de focus de lien en bas à gauche) alors que ce dernier n'est pas ouvert.

Il faudrait que ces liens d’évitement soient également visibles — et en premier focus ! — sur mobile.

Informations techniques

• OS : macOS / iOS (mais ce n'est pas dépendant de l’OS).
• Navigateur : Firefox (moteur Gecko) sur PC, Firefox (moteur WebKit) sur mobile.
• Version/environnement de ZdS : production à date.

[AmauryCarrade]

Il faudrait au passage vérifier à quel point #932 est encore d’actualité — il me semble que des progrès notables ont été fait — et à quel point c'est en doublon.