Navigation clavier: focus

AnthonyBrunelli commented 4 years ago

Focus peu visible ou invisible sur les éléments suivants:

"Consulter l'obs" page d'accueil.
Liens réseaux sociaux en pied de page
Observatoire: Filtres, Trier par, version tableau (date)

lucaa commented 4 years ago

@AnthonyBrunelli aucun traîtement spécifique n'a été fait pour le focus. Ainsi, ce qu'on voit aujourd'hui est le comportement par défaut du navigateur, qui peut être convenable. Par exemple, mon Google Chrome v 80.0 encadre les liens d'un carré bleu, assez visible mais Firefox ajoute juste une bordure pointillée :

@AnthonyBrunelli Est-ce que la recommendation pour RGAA est d'intervenir sur les décorations standard du navigateur? Si oui, as-tu une idée de comment faire un meilleur marquage, potentiellement adapté à toutes les couleurs?

Note: sur le selecteur des options de tri et le selecteur de date du tableau on ne voit pas du tout le marqueur du navigateur, à verifier s'il n'y a pas une regle CSS qui l'enlève.

AnthonyBrunelli commented 4 years ago

Je creuse le point. A priori, le RGAA n'est pas précis sur ce point, mais il s'appuie sur les WCag qui parle entre autre d'épaisseur du trait:

Le lien https://www.w3.org/TR/WCAG21/#focus-visible Critère 2.4.7 des WCAG 2.10 Dont le succés dépend https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=247#focus-visible

...qui indique que la bordure du focus doit être au minimum de 2 CSS pixel.

Ça reste à voir donc, je me renseigne.

AnthonyBrunelli commented 4 years ago

@lucaa Voilà ce que dit notre expert:

Quand le focus navigateur n’est pas assez visible, une bonne pratique consiste à appliquer sur les éléments en question un style css à la prise du focus.

https://www.accede-web.com/notices/html-css-javascript/12-navigation-clavier/12-3-visibilite-focus-clavier/

Note du RGAA 4 : l’indication visuelle du focus du navigateur ne doit pas être pas supprimée ou dégradée sauf si un style du focus défini par l’auteur est visible et suffisamment contrasté au regard du critère 3.3.

As-tu besoin d'autres éléments @lucaa ?

AnthonyBrunelli commented 4 years ago

(et comme vu ensemble, voir le problème du bleu sur bleu pour Chrome)

lucaa commented 4 years ago

As-tu besoin d'autres éléments @lucaa ?

Par rapport à la recommandation: "Quand le focus navigateur n’est pas assez visible, une bonne pratique consiste à appliquer sur les éléments en question un style css à la prise du focus", je voudrais une proposition de style que je peux implémenter après.

AnthonyBrunelli commented 4 years ago

@ugodtn ? :)

AnthonyBrunelli commented 3 years ago

à voir avec nos designers donc...

AnthonyBrunelli commented 3 years ago

Ce point a été signalé lors de l'audit d'accessibilité. Critère 10.7: Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

Page d'accueil

"Sur Firefox, dans le header, la prise de focus sur le lien ""République française/L'observatoire..."" (en haut à gauche) n'est pas visible à cause de la règle CSS suivante : a:active, a:hover {outline: 0;} . La supprimer.

Sur mobile, dans le header, la prise de focus n'est pas visible sur le bouton ouvrant le menu. Supprimer la règle CSS suivante : .navbar-toggle:focus {outline: 0;}

Sur Firefox, la prise de focus n'est pas assez visible sur le bouton rouge ""Consulter l'observatoire"" et n'est pas visible du tout sur le bouton ""En savoir plus"" (dans la section ""Comment évaluons nous"").

Supprimer la règle suivante : .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}
Modifier la règle CSS suivante : .xcontent a.btn-default { [...], transition: color .2s; background-color: .2s}
Enfin, rajouter la règle suivante : . btn-default:focus, .btn-primary:focus, .pushed:focus {outline: #ffffff dotted 2px; outline-offset: -4px;} "

Tableau de l'Observatoire

"Sur Firefox, la prise de focus n'est pas assez visible sur les liens ""Partager via Facebook"", etc. Rajouter la règle CSS suivante : .social-network:focus {outline-offset: 2px}

Sur Firefox, la prise de focus n'est pas visible sur les éléments suivants les boutons ""Trier par"" et ""Edition avril 2021"". Supprimer la règle CSS suivante : .dropdown-toggle:focus {outline: 0;}

Sur Firefox, la prise de focus n'est pas visible sur les champs de sélection ""Tous les ministères"" et ""Tous les publics"". Modifier la règle CSS suivante : .form-control:focus, textarea:focus, select:focus, input[type=""text""]:focus, input[type=""password""]:focus {border-color: #66afe9; outline: 0; [...]}

Sur Firefox, la prise de focus n'est pas visible sur les boutons bleus (ou qui deviennent bleus lorsqu'ils sont activés). Rajouter la règle CSS suivante : btn-default:focus, .btn-primary:focus, .pushed:focus {outline: #ffffff dotted 2px; outline-offset: -4px;}

Sur mobile, dans le header, la prise de focus n'est pas visible sur le bouton ouvrant le menu. Supprimer la règle CSS suivante : .navbar-toggle:focus {outline: 0;}

Sur Firefox, dans le header, la prise de focus sur le lien """"République française/L'observatoire..."""" (en haut à gauche) n'est pas visible à cause de la règle CSS suivante : a:active, a:hover {outline: 0;} . La supprimer."

Page avec graphiques des démarches

"Sur Firefox, la prise de focus n'est pas assez visible pour le lien ""?"" (""Comment est calculé le taux de satisfaction d'une démarche ?""). Sur Firefox, par défaut, la prise de focus (outline) reprend la couleur du texte. Aussi, en corrigeant le contraste du lien (voir critère 3.3), celle-ci sera suffisamment visible.

Sur mobile, dans le header, la prise de focus n'est pas visible sur le bouton ouvrant le menu. Supprimer la règle CSS suivante : .navbar-toggle:focus {outline: 0;}

Sur Firefox, dans le header, la prise de focus sur le lien """"République française/L'observatoire..."""" (en haut à gauche) n'est pas visible à cause de la règle CSS suivante : a:active, a:hover {outline: 0;} . La supprimer."

Page de connexion

"Sur mobile, dans le header, la prise de focus n'est pas visible sur le bouton ouvrant le menu. Supprimer la règle CSS suivante : .navbar-toggle:focus {outline: 0;}

Sur Firefox, dans le header, la prise de focus sur le lien ""République française/L'observatoire..."" (en haut à gauche) n'est pas visible à cause de la règle CSS suivante : a:active, a:hover {outline: 0;} . La supprimer."

Page Comment donner son avis sur une démarche?

"Sur mobile, dans le header, la prise de focus n'est pas visible sur le bouton ouvrant le menu. Supprimer la règle CSS suivante : .navbar-toggle:focus {outline: 0;}

Sur Firefox, dans le header, la prise de focus sur le lien ""République française/L'observatoire..."" (en haut à gauche) n'est pas visible à cause de la règle CSS suivante : a:active, a:hover {outline: 0;} . La supprimer."

lucaa commented 3 years ago

@slauriere le feedback ci-dessus est à reorganiser pour regrouper ensemble les modifications qui sont traités par les mêmes règles (génériques de la skin) et celles qui sont spécifiques aux pages ou elles sont rapportées... Ensuite, il faudra les implémenter, en faisant particulièrement attention aux effets de bord.

slauriere commented 3 years ago

Voici ci-dessous un regroupement avec indications visuelles lors d'un focus, déduites des règles CSS proposées :

Règles globales :
- Introduire deux règles d'outline communes : outline par défaut et outline avec pointillés blancs de 2px
- Logo : outline par défaut
- Bouton du menu tiroir : outline par défaut
Page d'accueil :
- Boutons "Consulter l'observatoire" et "En savoir plus" : outline avec pointillés + effet de transition (à voir)
Observatoire
- Liens de partage : outline par défaut avec changement de couleur et ajout d'offset
- Boutons de sélection et de retour en haut de page : outline avec pointillés
- Boutons "En temps réel", "Filtrer", "Trier par" : outline par défaut
- Filtres "Tous les ministères", "Tous les publics" et "Mot clé" : outline par défaut (ou #66afe9)
Graphiques
- Lien "?" : traitement particulier sauf si on souhaite une outline pour tous les liens du site

slauriere commented 3 years ago

J'ai implémenté ces règles en étant attentif aux effets de bord. Reste à valider point par point que le rendu obtenu correspond bien à l'intention.

AnthonyBrunelli commented 2 years ago

Recettage incomplet mais a priori ok pour le tableau sauf - à confirmer par Améziane - l'entête avec focus L'observatoire et A propos "un peu faiblard" dixit Erwan: "pourquoi ne pas utiliser le même contour que le reste?". A priori, pas de blocage pour la mise en prod.

lucaa commented 2 years ago

l'entête avec focus L'observatoire et A propos "un peu faiblard" dixit Erwan: "pourquoi ne pas utiliser le même contour que le reste?". l'entête avec focus L'observatoire et A propos "un peu faiblard" dixit Erwan: "pourquoi ne pas utiliser le même contour que le reste?".

Je pense qu'il y a une confusion: l'outline des liens "Observatoire" et "A propos" me semble être celui par défaut du navigateur, tout comme pour les autres liens de la page (bouton "observatoire" ainsi que liens dans les détails des critères). C'est le logo qui n'utilise pas l'outline du navigateur et met en place une couleur specifique (bleu) et un style spécifique. Donc, si on veut qu'il soit un peu plus fort, il faudra personnaliser les focus standard du navigateur. En ce qui concerne la personnalisation trop forte du focus du logo, j'ai l'impression qu'il y a eu un traitement trop spécifique pour ce ticket. Je crée un nouveau ticket pour revoir tout ça, pour la version suivante.

amezyane commented 2 years ago

@lucaa J'ai vérifié les outlines sur Chrome, Firefox, Edge et Safari.

Il reste deux petits bugs sur Safari, absents sur Chrome, FF et Edge :

Le focus sur le logo coupe le texte (1ère capture), est-ce qu'on le tolère dans ce cas ? Si l'on conserve le outline par défaut, le problème n'est plus présent (voir 2e capture).
Dans l'observatoire, le outline par défaut sur le lien "Données ouvertes sur data.gouv.fr" n'est pas assez contrasté :

lucaa commented 2 years ago

J'ajoute ces 2 éléments à vérifier lors des correctifs décorations de focus planifiés pour #998.

Par contre, même question que sur https://github.com/DISIC/wikidemarches/issues/1002#issuecomment-885002795https://github.com/DISIC/wikidemarches/issues/1002#issuecomment-885002795 , y-a-t-il un objectif explicite par rapport aux navigateurs supportés ainsi que leurs versions?

amezyane commented 2 years ago

@AnthonyBrunelli Question de @lucaa : y-a-t-il un objectif explicite par rapport aux navigateurs supportés ainsi que leurs versions?

AnthonyBrunelli commented 2 years ago

Non, pas outre de ce qui est imposé dans le cadre d'un audit d'a11é... Quel est la règle dans un audit? @amezyane

AnthonyBrunelli commented 2 years ago

Alors notre expert Erwan écrit: "Les systèmes d’exploitation retenus sont Windows et Mac OS X et les navigateurs, Internet Explorer, Firefox et Safari. Il appartient à l’auditeur de définir, en concertation avec les responsables du site audité, les versions de système d’exploitation et de navigateur en adéquation avec le contexte d’usage du site et l’environnement de test utilisé lors du développement du site. Les versions des technologies d’assistance à utiliser seront soit la dernière disponible en langue française sur le système d’exploitation retenu soit la version précédente"

Il faut ajouter Chrome. En environnement ouvert, il est difficile de restreindre les versions... mais par soucis de faisabilité, disons qu'on regarde la dernière? Tu en dis quoi @amezyane ?

amezyane commented 2 years ago

Dans le cadre d'un audit RGAA, il faut effectivement tester la restitution par le lecteur d'écran avec IE, FF et Safari.

Mais je pense que la question d'Anca porte sur les bugs techniques (JS, CSS) et non sur la restitution. Est-ce qu'il avait été spécifié dans le cahier des charges les navigateurs que doit supporter le site de l'observatoire ?

amezyane commented 2 years ago

Dans tous les cas, je pense qu'il est pertinent de prendre en compte Chrome pour tester certains problèmes d'a11y visuels (zoom à 200%, prise de focus, redéfinition des marges/interlignage), comme il s'agit du navigateur le plus utilisé sur desktop. Tu en penses quoi @lucaa ?

AnthonyBrunelli commented 2 years ago

"Mais je pense que la question d'Anca porte sur les bugs techniques (JS, CSS) et non sur la restitution. Est-ce qu'il avait été spécifié dans le cahier des charges les navigateurs que doit supporter le site de l'observatoire ?" -> je ne crois pas - mais à creuser.

AnthonyBrunelli commented 2 years ago

PI, stat des navigateurs pour Obs et JDMA 210729 Stat navigateurs Obs et JDMA.ods

lucaa commented 2 years ago

Par rapport au support et/ou au cahier des charges, la plateforme XWiki qui est utilisée comme base annonce cette compatibilité: https://dev.xwiki.org/xwiki/bin/view/Community/SupportStrategy/BrowserSupportStrategy (à decliner le "latest" à la version du moment de la release de la version utilisée pour l'observatoire, 9.11.3), je ne me rappelle pas avoir fait des spécifications supplémentaires à ce moment.

Avec toutes ces questions d'accessibilité et aussi avec les mises à jour des technologies front end (e.g. DSFR), il faudra peut-être définir clairement le scope. Je vois dans le spreadsheet de @AnthonyBrunelli que IE 11 est très très bas comme usage (même s'il se trouve dans la liste des navigateurs supportés par XWiki), donc il serait probablement utile de l'enlever de l'objectif de support.

D'ailleurs, parlant de technologies & support des navigateurs, je n'arrive pas à trouver l'objectif de support des navigateurs pour les composants du DSFR (car le plus simple serait de s'aligner à cet objectif). Quelqu'un a cette info (@AnthonyBrunelli @ugodtn @marineb ) ?

AnthonyBrunelli commented 2 years ago

PI, le dsfr gère bien ie11.

AnthonyBrunelli commented 2 years ago

Il me semble que tous les points restants sont traités par ailleurs, je mets dans tested.

DISIC / observatoire

Navigation clavier: focus #841

Ce point a été signalé lors de l'audit d'accessibilité. Critère 10.7: Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?