Comment modifier et forcer l’indication visuelle de prise de focus dans Firefox ?

Il est possible de la rétablir avec une feuille de style personnalisée, mais cela demande déjà un niveau de connaissance technique que l’on ne devrait pas exiger des utilisateurs et utilisatrices.

Cependant, Firefox offre nativement une possibilité assez intéressante pour renforcer l’outline.

En rejoignant le récent groupe de travail Accessibility Features ^[1], j’ai découvert que l’on pouvait modifier et forcer la visibilité de l’indication visuelle dans l’éditeur de configuration (about:config) de Firefox avec la préférence browser.display.focus_ring_width.

Par défaut, celle-ci est en effet assez discrète.

Les valeurs possibles sont :

• 0 : indication visuelle désactivée ^[2] ;
• 1 (valeur par défaut) : indication visuelle non forcée avec une bordure en pointillé d’1 px ;
• n (2, 3, etc.) : indication visuelle forcée sur les éléments qui prennent le focus et taille de la bordure augmentée de n pixels.

Il est possible de forcer la visibilité de l’indication visuelle sans modifier son apparence : il faut alors passer la préférence browser.display.focus_ring_on_anything à true.

Lorsque la visibilité de l’indication visuelle est forcée, on peut également modifier son style et remplacer les pointillés par une bordure solide bleue avec browser.display.focus_ring_style en modifiant la valeur à 0.

On peut aussi appliquer une couleur de fond (browser.display.focus_background_color) ou une couleur de texte (browser.display.focus_text_color) personnalisable à l’élément qui prend le focus en activant la préférence browser.display.use_focus_colors.

Ces préférences écrasent alors les styles auteurs ainsi que les styles utilisateurs.

Conclusion

Cette possibilité native de forcer et de modifier l’indication visuelle de prise de focus est une fonctionnalité intéressante et unique ^[3] à Firefox.

Elle résout une problématique d’accessibilité encore trop présente sur le web pour les personnes qui naviguent au clavier uniquement.

Il est regrettable néanmoins qu’elle soit cachée dans l’éditeur de configuration. La majorité des personnes ne se risqueront certainement pas à modifier des préférences dans about:config. D’autant plus que, sauf erreur de ma part, les préférences sont très mal documentées.

Il serait bien plus intéressant que cette option soit ajoutée dans la section « Langue et apparence » des paramètres du navigateur, là où les utilisatrices et utilisateurs disposent déjà de fonctionnalités de personnalisation de l’affichage.

Il manque par ailleurs la possibilité de modifier la couleur de la bordure pour les personnes qui en auraient besoin pour mieux se repérer.

Attention : si vous réalisez des audits d’accessibilité, utilisez bien les valeurs par défaut, sous peine de passer à côté d’une indication visuelle de prise de focus supprimée ou dégradée.

Ressources

• About:config entries : liste non exhaustive et plus ou moins à jour des préférences Firefox.
• RGAA – Critère 10.7 : Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
• Understanding Success Criterion 2.4.7 Focus Visible