designer guidelines for SC3.2.6 (#555)

* designer guidelines for SC3.2.6

* update

* add designer tests

* SC3.2.6 EN

* update SC3.2.6 EN

* fix trad

src/assets/json/checklist/tests-concepteur-en.json

@@ -327,6 +327,26 @@
     "raccourcis": "",
     "profils": ["Designer"]
   },
+  {
+    "themes": "Common navigation",
+    "title": "Make sure that help elements are placed in the same relative order on the different pages that include them.",
+    "type": [],
+    "tests": [
+      "Check wireframes and graphic mock-ups.",
+      "Identify the positioning of help mechanisms on all pages."
+    ],
+    "verifier": [
+      "Check the order of help mechanisms on each page.",
+      "If the page structure is modified according to the user profile (e.g. visitor profile or logged-in profile), each profile should be checked.",
+      "If the page structure is modified according to the screen size or orientation (CSS breakpoint or portrait/landscape mode), check each case separately."
+    ],
+    "resultat": [
+      "Help items appear in the same order on each page."
+    ],
+    "exception": "<ul><li>Compliant: The repositioning of help elements is generated by a display change initiated by the user (change of orientation, page resolution, activation of zoom, etc.).</li><li>Non-applicable: Pages that have nothing in common from a visual and functional point of view (e.g., on an e-shop website, during payment process, the template may change therefore the payment page is functionally and visually completely different).</li></ul>",
+    "raccourcis": "",
+    "profils": ["Designer"]
+  },
   {
     "themes": "Keyboard navigation",
     "title": "Allow keyboard-only navigation",

src/assets/json/checklist/tests-concepteur-fr.json

@@ -327,6 +327,26 @@
     "raccourcis": "",
     "profils": ["Concepteur"]
   },
+  {
+    "themes": "Navigation générale",
+    "title": "S'assurer que les éléments d'aide sont placés dans le même ordre relatif sur les différentes pages qui les intègrent.",
+    "type": [],
+    "tests": [
+      "Examiner les wireframes et les maquettes graphiques",
+      "Identifier le positionnement des mécanismes d'aide sur l'ensemble des pages."
+    ],
+    "verifier": [
+      "Vérifier l'ordre des mécanismes d'aide sur chaque page",
+      "Si la structure des pages est modifiée selon les profils d'utilisation (par exemple profil visiteur ou profil connecté), il convient de faire la vérification pour chaque profil.",
+      "Si la structure des pages est modifiée selon la taille ou l'orientation de l'écran (point de rupture CSS ou mode portait/paysage), il convient de faire la vérification pour chaque cas."
+    ],
+    "resultat": [
+      "Les éléments d'aide apparaissent dans le même ordre sur chaque page."
+    ],
+    "exception": "<ul><li>Conforme : Le repositionnement des éléments d'aide est engendré par un changement d'affichage à l'initiative de l'utilisateur (changement d'orientation, de résolution de la page, activation du zoom, etc.).</li><li>Non-applicable : Des pages qui n'auraient rien à voir d'un point de vue visuel et fonctionnel (exemple : sur un site de e-commerce, lors du processus de paiement, le peut changer donc la page de paiement est fonctionnellement et visuellement totalement différente).</li></ul>",
+    "raccourcis": "",
+    "profils": ["Concepteur"]
+  },
   {
     "themes": "Navigation clavier",
     "title": "Permettre une navigation uniquement clavier",

src/en/web/design/common-navigation.md

@@ -106,3 +106,51 @@ The site offers, at the same time, a complete and precise main navigation and a
 
 **Don't:**  
 An application provides a parcel navigation menu and no other way for the user to navigate the pages or locate where the current page is in the tree.
+
+
+
+##  Ensure that the help elements are placed in the same relative order on the pages that include them.
+
+**Target:** Everyone, especially people with visual impairments, cognitive problems or memory loss, to facilitate access to the help mechanism on a website or application.
+
+**When:** when designing.
+
+**Description :** 
+Help elements must be positioned in the same places and in the same relative order (i.e., related to other elements on pages) on all the pages where they are present. 
+For example, in the case of a common header, only the relative order of the content present in it and on all the pages containing the help mechanism should be taken into account.
+The following are considered to be help elements:
+- Human contact details: email, address, telephone, opening hours.
+- Human contact mechanisms: customer chat, contact form, redirect link to external help (social network or other). 
+- Self help options: FAQ, selfcare link, help page, etc. 
+- Fully automated contact mechanisms: chatbot, etc. 
+
+This criterion does not require the presence of help mechanisms but to ensure their relative order remains the same eveywhere if present.
+
+If the page structure is modified according to the user profile (e.g. visitor profile or logged-in profile), each profile should be checked.
+
+**Good practice:** If possible, the visual order should also be respected.
+
+**Checklist:**
+- Identify the repeated presence of help elements on different pages. 
+- Help elements appear in the same relative order: any other content present in all the web pages and located before the help element must be located before the help element on this page. Elements located after the help element on other pages must be located after the help element on this page. 
+- Recheck the above points for each display mode (user profiles, CSS breakpoint on the web, portrait/landscape mode on mobile).
+
+NB: If the visual order differs from the relative order, then a particular attention should be paid to criterias <a href=https://a11y-guidelines.orange.com/en/web/develop/layout/#ensure-a-comprehensible-reading-order>1.4.4 Resize text</a> et <a href=https://a11y-guidelines.orange.com/en/web/develop/keyboard-navigation/#the-focus-order-must-be-sequential-and-logical-without-keyboard-trap>2.4.3 Focus order</a>.
+
+**Exceptions:**
+1. Compliant: An element is not positioned visually and exactly in the same place but is in the same order (according to the source code) compared to other common elements on the page.
+2. Compliant: The repositioning of help elements is caused by a display change initiated by the user (change of orientation, page resolution, activation of zoom, etc.).
+3. Compliant: An element such as an ad-hoc promotional link, which only appears on a single page and modifies the relative order of the help mechanism on this single page, can be ignored.
+4. Not applicable: Pages that have nothing in common from a visual and functional point of view (example: on an e-shop website, during payment process, the template may change and the payment page is functionally and visually completely different).
+
+**Users' goal:**
+Enabling users to find help elements easily on a site or application.
+
+**Do:**
+A chatbot support button is always in the same place on the different pages.
+
+**Don't:**
+A list of contact details placed in a footer or menu whose elements are ordered differently from one page to another.
+
+**<abbr>WCAG</abbr> reference:**  
+<a lang="en" href=https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html>3.2.6 Consistent Help</a>

src/en/web/design/textual-content.md

@@ -32,7 +32,7 @@ Allow users to identify the topic of a page, find and get a clear idea of the co
 **Don’t:** 
 `<title>Home</title>`
 
-**Reference <abbr>WCAG</abbr>&nbsp;:**
+**<abbr>WCAG</abbr> reference:**
 - <a href="https://www.w3.org/TR/WCAG21/#page-titled">2.4.2 Page Titled</a>
 
 

src/en/web/design/touch-and-interactions.md

@@ -40,7 +40,7 @@ The dragging movement functionality is:
 - essential (dexterity games) 
 - controlled by the user agent and not modified 
 
-**Référence <abbr>WCAG</abbr>&nbsp;:**  
+**<abbr>WCAG</abbr> reference:**  
 - <a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements">2.5.7 Dragging movements</a>
 
 

src/fr/web/designer/navigation-generale.md

@@ -102,3 +102,51 @@ Le site propose, à la fois, une navigation principale complète et précise et
 
 **Exemple invalide :**
 Une application offre un menu de navigation parcellaire et aucun autre moyen pour  l’utilisateur de s’orienter dans les pages ou de repérer où se situe la page courante dans l’arborescence.
+
+
+## S'assurer que les éléments d'aide sont placés dans le même ordre relatif sur les pages qui les intègrent.
+
+**Cible :** tout le monde, en particulier les personnes ayant une déficience visuelle, des troubles cognitifs ou perte de mémoire, afin de faciliter l'accès à l'aide sur un site ou une application.
+
+**Quand :** lors de la conception.
+
+**Description :** 
+Les éléments d'aide doivent être positionnés aux mêmes endroits et dans le même ordre relatif (i.e., par rapport aux autres éléments de contenu des pages) sur toutes les pages où ils sont présents.
+Par exemple, dans le cas d’un en-tête commun, seul l'ordre relatif du contenu présent dans l'en-tête et sur toutes les pages contenant le mécanisme d'aide, doit être pris en compte. 
+Sont considérés comme éléments d'aide : 
+- Les coordonnées permettant de contacter une personne : email, adresse, téléphone, heures d'ouverture.
+- Les mécanismes permettant de contacter une personne :  Chat client, formulaire de contact, lien de redirection vers une aide externe (réseau social ou autre).
+- Les options d'aide en autonomie : FAQ, lien selfcare, page d'assistance, etc.
+- Les systèmes de contact entièrement automatisés : chatbot, etc.
+
+Ce critère n'impose pas la présence de mécanismes d'aide mais seulement de vérifier, quand ils sont présents, que leur positionnement relatif est le même sur les différents pages du site ou de l'application.
+
+Si la structure des pages est modifiée selon les profils d'utilisation (par exemple profil visiteur ou profil connecté), il convient de faire la vérification pour chaque profil.
+
+**Bonne pratique :** si possible l'ordre visuel doit être aussi respecté. 
+
+**À vérifier :**
+- Identifier la présence répétée d'éléments d'aide sur différentes pages.
+- Les éléments d'aides apparaissent dans le même ordre RELATIF : tout autre contenu présent dans l'ensemble des pages Web et situé avant l'élément d'aide doit se trouver avant l'élément d'aide sur cette page. Les éléments qui se trouvent après l'élément d'aide sur d'autres pages doivent être après l'élément d'aide sur cette page.
+- Revérifier les points précédents pour chaque mode d'affichage (profils d'utilisation, point de rupture CSS en web,  mode portait/paysage sur mobile).
+
+NB : Si l'ordre visuel diffère de l'ordre relatif, alors une attention particulière sera accordée aux critères <a href=https://a11y-guidelines.orange.com/fr/web/developper/mise-en-page/#assurer-un-ordre-de-lecture-du-contenu-comprehensible>1.3.2 Ordre séquentiel logique</a> et <a href=https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#rendre-le-parcours-du-focus-sequentiel-et-logique-sans-piege-clavier>2.4.3 Parcours du focus</a>.
+
+**Exceptions :**
+1. Conforme : Un élément n'est pas positionné visuellement et exactement au même endroit mais pourtant dans le même ordre (selon le code source) par rapport aux autres éléments communs de la page.
+2. Conforme : Le repositionnement des éléments d'aide est engendré par un changement d'affichage à l'initiative de l'utilisateur (changement d'orientation, de résolution de la page, activation du zoom, etc.).
+3. Conforme : Un élément comme un lien promotionnel ad-hoc, qui n'apparaît que sur une seule page et modifie l'ordre relatif du mécanisme d'aide sur cette seule page, peut être ignoré.
+4. Non-applicable : Des pages qui n'auraient rien à voir d'un point de vue visuel et fonctionnel (exemple : sur un site de e-commerce, lors du processus de paiement, le template peut changer et la page de paiement est fonctionnellement et visuellement totalement différente).
+
+**Objectif utilisateur :**
+Permettre aux utilisateurs de retrouver facilement les éléments d'aides sur un site ou une application.
+
+**Exemple valide :**
+Un bouton de support par chatbot est toujours présent au même endroit sur les différentes pages.
+
+**Exemple non valide :**
+Une liste de coordonnées placés dans un footer ou un menu dont les éléments sont ordonnés différemment d'une page à l'autre.
+
+**Référence <abbr>WCAG</abbr> :**  
+<a lang="en" href=https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html>3.2.6 Consistent Help</a>
+