Le but de cet exercice est de vous mettre dans le rôle d'un consultant pour un cabinet d'audits de sites web. En l'occurence d'un site web responsive. Vous venez d'être engagé(e) par l'agence Bob qui a des problèmes avec le site d'un client. Après que le site a été mis en ligne après sa refonte, l'audience a fortement chuté, et il y a eu beaucoup de retours négatifs de la part des utilisateurs comme la difficulté à atteindre la première page du site. Malheureusement le développeur responsable du code, Bobert, et les designers sont partis en claquant les portes et avec les sources (code HTML, fichiers axure...). Mais apparemment, il existerait un moyen de voir le code source d'un site web et de faire des modifications à la volée avec le navigateur, et même d'en sauvegarder les sources.

• Accéder à l'accueil du site du devoir

Par conséquent, pas de code de source à votre disposition, vous allez devoir vous débrouiller avec ce que le navigateur affiche et votre connaissance de ses outils. Toutefois, l'agence sait que le projet a été développé avec la version 5 de bootstrap. Et certaines fonctionnalités ont été developpées en javascript via l'outil jQuery, notamment.
Le site respectant la Règlement Générale sur la Protection des Données ou RGPD, une fenêtre modale a été ajoutée pour permettre aux utilisateurs de sélectionner comment il souhaite gérer ses cookies. Mal codée, elle s'affiche à chaque affichage de page, néanmoins, en ajoutant le paramètre "?hidemodal=true" dans l'url du navigateur (exemple accueil.html?hidemodal=true), elle ne s'affiche pas, ça peut être pratique si elle vous gêne durant votre audit.

Le but de votre audit (devoir) n'est pas de corriger le code, mais de rédiger un rapport d'audit (autrement dit, un document écrit) listant les problèmes que vous aurez trouvé. Pour chaque problème, il faudra ensuite expliquer en quoi c'est problématique et enfin de proposer une solution. Cette solution peut s'exprimer sous les formes suivantes :

• Code : Un fragment de code et expliquer son rôle
• Design : Une esquisse / dessin / design claire. Expliquer / annoter le comportement
• Texte : Expliquer de façon textuelle la solution. Attention aux fautes et au sens
• Capture d'écran : Expliquer / annoter la capture d'écran

Pour qu'une erreur soit validée, il faut impérativement : l'erreur, son explication et sa correction / recommendation. Par exemple :

Textes trop petits

Statut : critique

Problème : Sur la page d'accueil ("accueil.html"), certains textes possèdent une taille inférieure à celle recommandée pour du texte (~16 px). Une taille de texte trop petite peut rendre très difficile la lecture pour les personnes ayant de déficits visuels notamment. A cela s'ajoute le fait que certaines tailles de textes sont en pixels, ce qui pose un très gros problème au niveau de l'accessibilité. En effet, les personnes atteintes de troubles visuels augmentent souvent la taille par défaut de la police d'écriture de leur navigateur. Ceci leur permet d'avoir des textes affichés en plus grand. En utilisant l'unité pixel (px), unité absolue, la taille du texte n'est pas influencée par les préférences du navigateur de l'utilisateur, ce qui rend leurs préférences inutiles.

Recommendation : Dans le cadre d'une démarche visant à améliorer l'accessibilité, nous vous recommendons les axes d'améliorations suivants :

• Remplacement des unités absolues pour le texte. Utilisation de l'unité rem, unité beaucoup plus souple et facile à l'utilisation
• Augmentation des tailles pour les textes dont la taille est inférieure à 16px

La mise en forme du texte ci-dessus est un exemple, libre à vous la respecter ou non. Ici, il a été mis une image pour appuyer notre point. Plus votre rapport d'expertise sera clair, plus il sera pris en compte et mieux vous serez payé(e) noté(e). Toutefois rappelez-vous bien que pour chaque point de votre audit, il vous faut noter :

• L'erreur
• Explication de l'erreur et ses conséquence sur l'utilisateur / le site...
• Proposition de solution / Proposition d'axe d'amélioration

Les icônes '?' ont été rajoutées pour vous indiquer qu'il est possible d'intéragir avec au survol, inutile de les mettre dans votre audit.

Vous n'êtes pas obligé de rajouter le statut d'un problème. Mais si vous le souhaitez, on peut catégoriser le statut en trois catégories :

• Mineur : Peut être corrigé (bien) plus tard. Amélioration de l'expérience utilisateur
• Considérable : Doit être corrigé
• Critique : Doit être corrigé immédiatement, nui à l'expérience utilisateur. Ex : Le site prend trop de temps à charger ou faille de sécurité grave.

Notez que le contenu de l'audit doit être argumenté, si certains points peuvent exprimer votre avis personnel, écrire “Je trouve ça laid“, n'est pas recevable. Parallèlement, certaines erreurs sont transverses, compter la même erreur sur plusieurs pages ne compte que pour une seule erreur dans votre audit, à vous de chercher un peu partout pour diversifier et remplir votre document d'audit. Les erreurs sont de différents ordres :

• Expérience utilisateur. Par exemple une action s'effectue de façon non naturelle
• Code HTML/CSS. Par exemple, une balise utilisée de façon inappropriée ou mal placée
• Accessibilité. Par exemple, du texte trop petit
• Code Javascript / jQuery. Par exemple, un évènement mal utilisé. Effectivement, on ne vous a pas encore enseigné le javascript. Toutefois, ce langage est un langage dit "haut-niveau", ce qui veut dire que sa syntaxe est relativement compréhensible même pour un non-développeur (à condition de lire l'anglais). Ainsi, vous n'avez pas spécialement besoin de connaître le langage, mais juste le lire et comprendre ce qui a été écrit

Notes

• Ce travail est individuel
• La date de limite de rendu est le 26 mai à 23h59, passé cette date, je serai contraint de vous mettre un 0/20.
  
• Le devoir est à rendre sur ENT : Accéder au lien pour le rendu du devoir sur ENT (ouverture dans un nouvel onglet)
• Le 26 mai n'est pas la date du jour de rendu, mais la date butoire, vous pouvez rendre votre devoir avant
• A partir du 24 mai, je ne répondrai plus à vos questions. Ceci pour vous inviter à vous organiser et ne pas commencer à travailler la veille de la date limite de rendu
• L'utilisation de l'attribut "style" dans la partie "e-commerce" de la page debouches.html est tout à fait normal, ceci n'est pas une erreur
• Il n'y a pas vraiment un nombre d'erreurs fixe attendu. Préférez la qualité à la quantité. Bien évidemment, il y a des choses plus problématiques que d'autres.
  Noter qu'un texte est mal indenté vaut moins que noter que la taille du texte est trop petite. Donc à vous de voir, chercher quelques grosses erreurs ou plusieurs petites erreurs, ou même un mélange des deux
• L'audit ne concerne que les pages accueil.html, presentation.html, debouches.html et contact.html. Cette page (consignes.html) n'est pas concernée.
• Votre audit peut être rendu sous forme de document au format pdf ou une archive d'un site web (pensez bien à mettre tous vos fichiers). Tout autre format sera jugé irrecevable. Et sera considéré comme étant un devoir non rendu, et donc sera noté 0/20
• Archive de site web (pensez bien à mettre tous vos fichiers) ou document pdf, votre rendu devra être nommé NOM-Prénom.
  Si cette règle n'est pas respectée, un point sera retiré
• Pour rappel, l'accessibilité ce n'est pas uniquement une personne en fauteuil roulant. Ça concerne tout le monde. Ne prenez pas votre expérience d'internaute comme acquise pour tous, prenez du recul sur votre expérience, votre façon de naviguer pour découvrir des problèmes
• Si vous êtes face à quelque chose que vous ne connaissez pas, renseignez-vous, ne jouez pas aux devinettes, vous n'êtes pas à l'abri d'un contre-sens
• Ce site est en ligne, vous pouvez donc y accéder depuis votre smartphone à défaut d'utiliser le mode responsive de votre navigateur
• Le site a été pensé pour Firefox / Chrome / Safari en priorité. N'allez pas tester le site sur Internet Explorer / Edge et lister des problèmes.
• Les images affichées sont aléatoires, n'allez pas les signaler comme étant un problème, ça sera considéré comme étant irrecevable
• Faites attention aux fautes dans votre rendu, si elles deviennent trop nombreuses, je serai obligé de retirer des points
• L'utilisation de la console du navigateur (touche F12 ou "clic droit > inspecter / explorer") est presque indispensable pour réussir cet exercice
• Le TP4 sur l'UX pourrait bien vous aider (voir le TP4 - ouverture dans un onglet). Ainsi que les comptes-rendus des devoirs qui ont été envoyés
• Si vous n'êtes pas capable d'expliquer pourquoi quelque chose n'est pas normal, c'est certainement que ceci n'est pas anormal
• Une démarche d'audit est un travail consciencieux. Ne soyez pas uniquement consommateur du site, soyez-en acteur, vous avez des compétences en développement web désormais, essayez plein de choses. Regardez, comprenez les sources (même de choses qu'on ne vous a pas encore enseignées), vous pourriez même être très bien récompensé(e)

Bon courage.