Qualité web - Luc Poupard Meetup #01 / 31 janvier 2019 

2 Faire un site web, c’est facile ! 

3 Des connaissances et des compétences variées Faire un site web c’est facile ! Contenus Design Ergonomie Référencement Performance Sécurité Marketing Code Relation client Traductions Formulaires Navigation Accessibilité Gestion de projets Documents Cookies Téléchargements E-commerce Serveur Mobile Standards Impression E-mails Médias c’est compliqué 

4 Des contextes d’utilisation infinis Faire un site web c’est facile ! Desktop Mobile Montre Télévision Frigo Voiture Windows Mac Linux Android iOS Internet Explorer Firefox Chrome Souris Clavier Trackpad Tactile Lecteur d’écran Imprimante Plage braille Flux RSS Moteurs de recherche Frigo c’est compliqué 

5 La qualité web, c’est quoi ? 

6 La qualité web, c’est quoi… d’après vous ? Un site de qualité… • Est beau et donne envie de l’utiliser • Est ergonomique et fonctionne bien • N’a aucun défaut • Charge rapidement • … Oui mais non… • Beau, bien… c’est subjectif : ça dépend du point de vue de chacun • Il y aura toujours des défauts : on n’atteint jamais la perfection, mais on peut toujours améliorer davantage 

7 Du jugement subjectif à l’évaluation objective Objectif : contrôle / assurance qualité appliqué au web • Mesurer, évaluer et estimer le niveau de qualité • Gérer, améliorer et contrôler • Garantir, certifier et assurer Réponse : projet Opquast • 1999 – Création d’un annuaire dédié à la qualité web • 2004 – Liste de bonnes pratiques et définition de la qualité web 

8 Définition « La qualité web représente l'aptitude d'un service en ligne à satisfaire des exigences explicites ou implicites » Définition proposée en 2004 dans le cadre du projet Opquast inspirée de la norme ISO 8402:1994 (Management de la qualité et assurance de la qualité) elle-même révisée par la norme ISO 9000:2015 (Systèmes de management de la qualité) ISO 8402:1994 : https://www.iso.org/fr/standard/20115.html ISO 9000:2015 : https://www.iso.org/fr/standard/45481.html 

9 La qualité web : un sujet transversal 

10 Un modèle transversal : VPTCS Un modèle pour synthétiser les attentes des utilisateurs finaux conçu en 2001 par Élie Sloïm et Éric Gateau V Visibilité P Perception T Technique C Contenus S Services Être rencontré par ses utilisateurs potentiels Être utilisable et correctement perçu par ses utilisateurs Fonctionner correctement Délivrer de l’information de qualité Proposer, accompagner et/ou générer la réalisation de services de qualité 

11 Un modèle transversal : VPTCS Vision des métiers contribuant à la qualité web V Visibilité P Perception T Technique C Contenus S Services Communication Marketing Référencement Positionnement Accessibilité Ergonomie Design Navigation Hébergement Sécurité Performance Conformité W3C Rédaction Traduction Stratégie éditoriale Architecture de l’information E-commerce Logistique E-services Relation client Support / SAV 

12 Un modèle transversal : VPTCS Vision globale de l’expérience utilisateur V Visibilité P Perception T Technique C Contenus S Services Pourquoi utiliser le site ? Comment mettre en valeur les contenus et services ? Après la visite Avant la visite Pendant la visite UI UX 

13 Comment évaluer, gérer et garantir la qualité d’un site web ? 

14 Entre excellence et minimum vital WCAG AAA Accessibilité Tests utilisateurs Ergonomie Tests de charge Performance Tests d’intrusion Sécurité Conformité W3C Standards SEO SEM Référencement Etc. Etc. 

15 Bonnes pratiques • Première liste de bonnes pratiques qualité en 2004 • Traductions d’exigences génériques en règles individuelles précises • Élaboration communautaire • Diffusion sous licence CC BY-SA • Attribution – Partage dans les mêmes conditions • Évolution dans le temps • Version 3 depuis 2015 : 226 bonnes pratiques • Premiers travaux pour la version 4 courant 2019 

16 Une bonne pratique doit : • Avoir une valeur ajoutée pour l’utilisateur • Être vérifiable • Être réaliste • Être universelle • Faire consensus …mais ne doit pas : • Faire référence à une solution technique • Faire référence à une valeur numérique • Faire référence à une norme ou un standard avec des exigences multiples 

17 Exemple de bonne pratique BP #1 – Chaque image décorative est dotée d’une alternative textuelle appropriée Objectif Éviter aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d’écran, navigateur avec images désactivées) d’être perturbés par des informations sur des images qui leur sont inutiles. Fournir aux robots d’indexation uniquement des informations pertinentes. Solution technique D’une manière générale, si un code (un attribut HTML, par exemple) est prévu pour l’alternative, il doit être présent, mais en restant vide. Pour les cas les plus courants : • Donner à chaque élément img décoratif un attribut alt vide (alt=""). • Donner à chaque élément area décoratif un attribut alt vide. • Laisser vide le contenu de chaque élément object concerné (entre les balises et ). • Laisser vide le contenu de chaque élément canvas concerné. • Ne donner à chaque élément svg concerné aucun attribut ARIA qui lui confère un label (aria-labelledby, aria- describedby, etc.). Moyen de contrôle Cette vérification s’effectue dans le code HTML généré à l’aide d’un inspecteur de code ou d’une barre d’outils dédiée : • Tester au préalable la présence des attributs alt en vérifiant la validité du code HTML généré, par exemple avec le validateur du W3C (le validateur HTML signale les images privées d’alternative) : chaque image décorative doit avoir un attribut alt (présent mais vide). • Vérifier que chaque image img ne véhiculant pas d’information nécessaire à la compréhension du contenu a bien un alt vide. • Vérifier les éventuels autres objets graphiques du type object, canvas dont le contenu (entre les balises ouvrantes et fermantes) doit être vide. • Vérifier les éventuels autres éléments du type svg susceptibles de recevoir une alternative via un attribut ARIA. 

18 Bonnes pratiques : thématiques • Alternatives • Code • Contact • Contenus • E-commerce • Espaces publics • Fichiers et multimédia • Formulaires • Hyperliens • Identification • Internationalisation • Mobile • Navigation • Newsletter • Présentation • Sécurité et confidentialité • Serveur et performances • Syndication • Tableaux 

19 En livre « Qualité web » Toutes les bonnes pratiques En ligne https://checklists.opquast.com/fr/ 

20 Comment on fait ça, nous ? 

21 Acquérir les connaissances et les compétences Certification Opquast : Maîtrise de la qualité en projet Web • Comprendre et maîtriser les bonnes pratiques qualité, ainsi que le vocabulaire et les risques associés • Être capable de décider et agir en connaissance de cause • Plateforme de formation accessible pendant 3 mois • Examen type TOEIC (Test of English for International Communication) • QCM de 125 questions en 1h30 • Note de 0 à 1000 

22 Utiliser les check-lists • Utiliser la check-list Opquast v3 comme base d’amélioration continue • Choisir les critères qu’on souhaite appliquer en priorité • Ajouter de nouveaux critères au fur et à mesure qu’on s’améliore • Construire ses propres check-lists, selon les besoins • Utiliser d’autres check-lists et ajouter ses propres critères • Fonctionner par étape de projet et/ou par métier • Cahier des charges, spécifications, design, développement, conception éditoriale, phase de test, audit… 

Améliorons !