Guide-utilisateurs-Tanaguru2020-webapp.md

+# Guide utilisateur Tanaguru2020-wepapp (avril 2023)
+
+# Connexion
+
+La connexion au service se fait via la page de connexion
+
+<img src="images/connexion.png"/>
+
+La page est composée de 2 champs de formulaire « votre identifiant » et « votre mot de passe ».   
+Puis d’un bouton « se connecter ».   
+Vos identifiants et mots de passe vous sont  transmis par l’administrateur de la plateforme.
+
+#  Entête de page 
+
+<img src="images/entete.png"/>
+
+Dans l’entête de Tanaguru 2020 vous retrouvez plusieurs informations:   
+
+- Un lien d'évitement pour accéder au contenu
+- Une option pour choisir la langue de l'interface (anglais / français)
+- Un lien vers le guide utilisateur
+- Deux liens vers le tableau de bord (sous la forme du logo et d'un lien texte)
+- Un lien vers votre profil
+- Un lien vers l'administration si votre rôle le permet
+- Un lien pour vous déconnecter
+
+# Tableau de bord
+
+<img src="images/tableaudebord.png" />
+
+Le tableau de bord permet d'avoir une vision synthétique de vos projets.   
+Il contient :
+
+- Des liens rapides vers :
+    * Vos projets;
+    * Vos projets partagés;
+    * Les projets qui sont partagés avec vous.
+
+- Un lien pour créer un nouveau projet (si votre rôle le permet)
+- Et la liste des projets auxquels vous avez accès.
+
+# Détail d'un projet dans la vue du tableau de bord
+
+<img src="images/detailprojet.png" />
+
+Pour chaque projet, nous avons lees informations suivantes :
+
+- Les informations générales du projet
+    * Le nom du projet
+    * Le nom du contrat auquel est rattaché le projet
+    * Un lien vers les Archives du projet
+    * Le domaine (URL) du prjet
+    * Le référentiel de référence du projet
+    * La date de validité du contrat (définit par l'administrateur)        
+- Les scores et informations liées au dernier audit
+    * Nombre d'anomalies constatées
+    * Scrore
+    * Un lien pour lancer un nouvel audit sur ce projet      
+- Les informations sur l'équipe associée à ce projet
+    * Nom des personnes
+    * Et leur rôle dans le projet   
+- La visualisation des différents types d'audit réalisé sur ce projet (page, site, fichier, scénario)
+    * Et le lien vers le dernier audit de chaque type
+    * Un rappel des différents types de résultats    
+- Et à nouveau un lien vers les archives du projet.
+
+# Créer un projet
+
+<img src="images/creerprojet.png"/>
+
+Un projet est créé dans un contrat dans lequel l'utilisateur à un rôle de propriétaire (Contract Owner).
+
+Pour créer un prket, il est nécessaire de préciser :
+
+- Le nom du projet que l'on souhaite créer
+- Le domaine lié à ce projet
+- Valider la création du projet en appuyant sur le bouton "créer"
+
+Sous le formulaire de création du projet, vous avez accès à l'ensemble des projets liés à votre contrat.
+
+Pour chacun des porjets : 
+
+- Son nom
+- Un lien vers le projet
+- Un lien vers les archives du projet
+- Un lien pour supprimer le projet
+
+La suppression decra être confirmée avant la suppression définitive du projet : 
+
+<img src="images/suppression.png" />
+
+Lancer un audit : 
+
+<img src="images/audit.png"/>
+
+Le haut de la page de lancement d'un audit comporte : 
+
+- Le nom du projet
+- Un bouton pour lancer l'audit
+- Une information pour préciser si l'ensemble des informations nécessaire au lancement de l'audit sont réunies
+
+Le reste de la page est définie en plusieurs parties : 
+
+- La définition de l'audit
+- La configuration de l'audit
+- Les référentiels
+- La résolution (les breakpoints)
+- La gestion des temps d'attentes (pour les frameworks JS)
+- Le choix du navigateur utilisé pour l'audit
+- La possibilité de renseigner les informations liées à la sécurité (htaccess)
+
+# La définition de l'audit
+
+<img src="images/definitionaudit.png" />
+
+- Cette partie permet de choisir le type d'audit à réaliser (bouton radio) : 
+    * Audit de page
+    * Audit de site 
+    * Audit de fichier
+    * Audit de scénario
+
+- Il est également nécessaire de donner un nom à l'audit (nom généré par défaut, mais modifiable)
+
+- Puis de préciser s'il est nécessaire ou non de réaliser des captures d'écran pendant l'audit
+
+# Configuration de l'audit en fonction de son type
+## Configuration de l'audit de page
+
+<img src="images/configauditpage.png"/>
+
+L'audit de page permet de réaliser l'audit d'une page ou d'ensemble de pages.
+
+En fonction du choix de l'audit : 
+
+- "Saisie par page"
+    * L'ajout de page se fait par l'appui sur le bouton de "ajouter une page"
+- "Saisie libre"
+    * Il est nécessaire de fournir une liste de page séparée par un point-virgule. (voir la capture ci-dessous)
+
+<img src="images/configauditpage2.png"/>
+
+# 
+## Configuration de l'audit de site
+
+<img src="images/configauditsite.png"/>
+
+L'audit de site permet de réaliser l'audit en parcourant automatiquement les pages de votre site (pages accessibles sans identification à un service).
+
+Pour réaliser un audit de site, il est nécessaire de fournir les informations suivantes : 
+
+- La racine du site, lien à partir duquel vous voulez lancer l'audit
+- La durée maximum de l'audit du parcours du robot dans le site (différent du temps nécessaire à réaliser l'audit)
+    * Par défaut ce temps est limité à 3600 seconces (1 heure)
+- Le nombre de pages maximum à prendre en compte dans l'audit 
+    * Par défaut ce nombre est limité à 100 pages (1000 pages maximum)
+- Les champs inclusion des URL contenant
+    * Une chaîne ou des chaînes de caractères qui doit être présente dans l'URL
+- Les champs exclusion des URL contenant
+    * Une chaîne ou des chaînes de caractères qui ne doit pas être présente dans l'URL
+
+# 
+## Configuration de l'audit d'un fichier
+
+<img src="images/configauditfichier.png"/>
+
+L'audit de fichier permet de réaliser l'audit de ficchier HTML.
+
+Il est nécessaire de : 
+
+- Fixer le nom du fichier à tester
+- Sélectionner le fichier depuis votre ordinateur avec le bouton "choisir un fichier"
+- Ajouter le fichier dans la liste des fichiers téléchargés (voir capture ci-dessous) en activant le bouton "ajouter"
+- Sélectionner le fichier à auditer
+    * En sélectionnat le bouton radio correspondant
+
+<img src="images/configauditfichier2.png"/>
+
+#
+## Configuration de l'audit de scénario
+
+<img src="images/configauditscenario.png"/>
+
+L'audit de scénario permet d'audit des services web, des parcours d'achat ou des pages accessibles uniquement à des utilisateurs connectés.
+
+Tanaguru 2020 utilise des scénarios ayant pour extension .side générés par les extensions chrome ou Firefox "Slénium IDE" : 
+
+- [Selenium IDE - Chrome Web Store](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=en)
+
+- [Selenium IDE - Get this extension for Firefox (en-US)](https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/)
+
+Il est nécessaire de : 
+
+- Fixer le nom du scénario à tester
+- Sélectionner le fichier avec l'extension .side depuis votre ordinateur avec le bouton "choisir un fichier"
+- Ajouter le fichier dans la liste des scénariios téléchargés (voir capture ci-dessous) en activant le bouton "ajouter"
+- Sélectionner le fichier à auditer
+    * En sélectionnant le bouton radio correspondant
+
+    <img src="images/configauditscenario2.png"/>
+
+# Le choix du ou des référentiels
+
+<img src="images/choixreferentiel.png"/>
+
+Dans Tanaguru 2020, il est possible de sélectionner un ou plusieurs référentiels lors de l'exécution d'un audit.
+
+Il est nécessaire de choisir :
+
+- Un des référentielsdisponibles (WCAG ou RGAA)
+    * Le référentiel contient une référence de la version du référentiel
+    * De la date de la mise à jour du référentiel         
+- Un référentiel de référence (donnée utilisée pour remonter les scores dans le tableau de bord)
+
+# Le choix de la résolution de la fenêtre d'audit
+
+<img src="images/choixresolution.png"/>
+
+Dans Tanaguru 2020, il est possible de définir la résolution de l'écran, mais également de lancer l'audit selon plusieurs résolutions (correspondantes aux "points de rupture" de votre application).
+
+Il est nécessaire de choisir à minima une résolution (par défaut 1920) et de choisir une ou plusieurs autres résolutions. L'ajout de résolution peut se faire par l'appui sur le bouton "ajouter un point de rupture".
+
+# La gestion de temps d'attente avant audit
+
+<img src="images/tempsattente.png"/>
+
+Lorsque les sites ou les applications sont développés avec des Framework JS (angular JS, React), le chargement de la page se fait dynamiquement, chargement de la base du dom puis des événements JS. Tanaguru peut alors auditer uniquement la base du dom. 
+
+En fixant un "temps d'attente" plus long, il est alors possible de décaler le lancement de l'audit "après" le chargement du contenu.
+
+# Le choix du navigateur
+
+<img src="images/choixnavigateur.png"/>
+
+Dans Tanaguru 2020, il est maintenant possible de choisir le navigateur qui servira à récupérer le HTML généré.
+
+Il est alors nécessaire de choisir par les navigateurs suivants:
+
+- Google Chrome
+- Mozilla Firefox
+
+# La gestion des Htaccess
+
+<img src="images/gestionhtaccess.png"/>
+
+Dans Tanaguru 2020 il est maintenant possible de gérer la sécurité des pages protégées dans Gtaccess dans la configuration de l'audit.
+
+Pour cela il est nécessaire de remplir les champs utilisateur, Mot de passe. Si la page de connexion n'est pas incluse dans les pages à tester (renseignées en section 2), il est nécessaire également de remplir le champ URL.
+
+# Suivre le lancement d'un audit (détail de l'audit)
+## Systèmes d'onglets
+
+<img src="images/systemeonglet.png"/>
+
+A l'initialisation de l'audit, seul l'onglet logs est disponible.
+
+L'onglet synthèse est uniquement affiché à la fin de l'audit.
+
+# Onglet logs
+## Statut de l'audit
+
+<img src="images/statutaudit1.png"/>
+<img src="images/statutaudit2.png"/>
+<img src="images/statutaudit3.png"/>
+
+Le statut de l'audit est stipulé à la fin du nom de l'audit. Ce statut à 4 valeurs:
+
+- En attente (à l'initialisation de l'audit)
+- En cours (lors de l'audit)
+- Terminé
+- Erreur (si l'audit a échoué)
+
+#
+## Paramètre de l'audit
+
+<img src="images/parametreaudit.png"/>
+
+Les paramètres de l'audit sont une synthèse de l'ensemble des paramètres utilisés au lancement de l'audit:
+
+- Type d'audits:
+
+    * Pages
+    * Site
+    * Fichiers
+    * Scénarios
+- Navigateur utilisé
+- Temps d'attente
+- Gestion des captures d'écran
+- Résolutions de la page du webdriver
+- Détails spécifiques aux types d'audits
+
+#
+## Liste des pages auditées
+
+<img src="images/listepageaudit.png"/>
+
+Un audit comporte une ou plusieurs pages, voire une page dans plusieurs résolutions (spécifier par la mention_1920 dans la capture ci-dessus).
+
+Le nom de la page auditée est structuré ainsi: 
+
+- Titre de la page (contenu de la balise title)
+- _xxx (xxx étant la résolution utilisée pour l'audit)
+- L'URL de la page auditée
+
+Cette liste est constituée de liens permettant d'accéder au détail de chaque page.
+
+Lorsque la liste des pages est supérieures à 10, la liste suivie est suivie d'une pagination. Avec pour premier chiffre la page actuelle et comme second chiffre le nombre total de pages.
+
+Cette indication est suivie d'un bouton page suivante et d'un bouton d'accès à la dernière page.
+
+#
+## Historique des actiones réalisées lors de l'audit
+
+<img src="images/historiqueaudit.png"/>
+
+L'historique de l'audit est contitué de l'ensemble des actions réalisées par Tanaguru Engine pour lancer l'ensemble des actions.
+
+Ces informations sont précieuses si jamais un audit échoue.
+
+# Onglet Synthèse (lors d'un audit de plusieurs pages)
+## La cartouche
+
+<img src="images/cartouche.png"/>
+
+La cartouche est constituée de plusieurs éléments:
+
+- Une capture d'écran de la page auditée (ou une capture par défaut)
+- Le domaine utilisé
+- La date de création de l'audit
+- Le nombre de pages auditées
+- Le choix du référentiel (ayant un impact sur le score et le nombre d'anomalies)
+- Le Tanaguru meter, ratio entre les tests validés et les tests invalidés (à l'échelle de l'éechantillon)
+- Le nombre d'anomalies (nombre d'occurences des tests invalidés du référentiel)
+
+#
+## La vue d'ensemble de l'audit
+
+<img src="images/vuedensembleaudit.png"/>
+
+La vue d'ensemble de l'audit permet de mieux visualiser les typologies d'anomalies: 
+
+- La répartition des tests
+    * Non conforme: test décidable qui invalide l'accessibilité
+    * A qualifier: test dont une partie peut être automatisée, mais qui nécessite une décision humaine
+    * Conforme: test décidable qui valide l'accessibilité
+    * Non applicable: test dont le périmètre applicable n'est pas présent dans l'audit
+
+- Pour chaque typologie de résultats, le nombre de tests convernés
+- La répartition des occurences d'anomalies par thématique du RGAA
+
+#
+## Le récapitulatif des pages auditées
+
+<img src="images/recappageaudit.png"/> 
+
+Ce récapitulatif permet d’avoir rapidement une vue des éléments invalidés.
+
+C’est un tableau avec dans les entêtes de colonnes les pages de l’audit et dans les entêtes de lignes les tests du référentiel.
+
+Pour permettre la visibilité de l’ensemble des pages du périmètre de l’audit, il existe un système de pagination au-dessus du tableau.
+
+Dans les cellules la typologie de résultat selon le référentiel utilisé. On sait donc très rapidement si un test est invalidé sur l’ensemble des pages ou si l’anomalie est ponctuelle dans le périmètre de l’audit.
+
+Les cellules sont cliquables et permettent d’afficher les détails du test
+
+<img src="images/detailstest.png"/>
+
+Dans cet exemple, le test 1.1.1, le test est validé par un des tests du référentiel et invalidé par un autre.
+
+Le statut général est affiché ainsi que le lien vers la règle concernée (page détaillée de l’audit contenant l’anomalie).
+
+# Le résultat détaillé d'un audit
+
+La page de résultat détaillé d'une page permet de voir le détail des anomalies de la page.
+
+## Options d'affichage
+
+<img src="images/optionaffichage.png"/>
+
+L'encart option d'affichage est constitué de plusieurs éléments: 
+
+- Un bouton permettant de plier ou déplier les paramètres (pour sauvegarder de la place sur l'écran)
+- Une bouton pour fixer les paramètres à l'écran (pour qu'ils soient tout le temps disponible lors de l'analyse des résultats)
+- Le choix du référentiel (ce qui permet pour plusieurs pages d'afficher les résultats selon plusieurs référentiels)
+- Une option d'affichage selon le type d'anomalie ou la structure du ou des référentiels 
+    * La vue par anomalie présente les éléments par typologie de résultats (invalidé, validé, non applicable...)
+    * La vue par référentiel présente les éléments via la structure du RGAA ou des WCAG
+- Un champ texte permettant de filtrer les résultats en fonction d'étiquettes (image, bouton, lien...)
+
+L'ensemble de ces options impactant dynamiquement les données de la page.
+
+#
+## La cartouche
+
+<img src="images/cartouchedetailaudit.png"/>
+
+La cartouche est constituée de plusieurs éléments:
+
+- Un identifiant unique permettant d'identifier l'audit
+- Le nom de l'audit
+- Un bouton permettant de copier un lien de partage vers le résultat de l'audit
+- Une capture d'écran de la page auditée (ou une capture par défaut)
+- Le domaine audité
+- La date de création de l'outil
+- Le nombre de page auditées
+- Le référentiel sélectionné dans les paramètres d'affichage
+- Le Tanaguru meter, ratio entre les tests validés et les tests invalidés de la page. Attention le Tanaguru meter n'est disponible que dans la vue "référentiel".
+- Le nombre d'anomalies (nombre d'occurences des tests invalidés du référentiel)
+
+#
+## La vue d'ensemble de l'audit 
+
+<img src="images/vueensembleaudit.png"/>
+
+La vue d'ensemble de l'audit permet de mieux visualiser les typologies d'anomalies:
+
+- La répartition des tests
+    * Non conforme: test décidable qui invalide l'accessibilité
+    * À qualifier : test dont une partie peut être automatisée, mais qui nécessite une décision humaine
+    * Non testé : test qui n’est pour le moment pas décidable
+    * Conforme : test décidable qui valide l’accessibilité
+    * Non applicable : test dont le périmètre applicable n’est pas présent dans l’audit
+
+- Pour chaque typologie de résultats, le nombre de tests concernés
+- La répartition des occurrences d'anomalie par thématique du RGAA
+
+# Les résultats détaillés de l'audit
+## Les résultats détaillés par anomalie
+
+
+
+