Sites Web Les Bonnes Pratiques Ed4 v1

Bonnes pratiques Recommandations Recommandations Recommandations
Bonnes pratiques Serveur et performances, Syndication, Recommandations Contenus, Fichiers et multimédia, Formulaires, Internationalisation, Navigation, Newsletter, Sécurité et confidentialité, Serveur
Présentation, Sécurité et confidentialité Tableaux Mettre en œuvre les bonnes pratiques Alternatives, Code, Contenus Identification, Internationalisation Présentation, Sécurité et confidentialité et performances, Tableaux
mémento
web
Les bonnes pratiques
Présentation Serveur et performances Compressez, optimisez, mettez le turbo Auditer un site Les bonnes pratiques Opquast doivent être à la fois réalistes, utiles et Contenus (suite) Internationalisation (suite) Sécurité et confidentialité (suite) Remerciements
vérifiables. Au cours des ateliers de conception des bonnes pratiques, il arrive
Cette opération consiste à évaluer un site en ligne au regard de la liste fréquemment que nous ayons à écarter des critères qui ne respectent pas l’une L’affichage de contenus publicitaires ou sponsorisés ne vient pas auto- Les pages dont le contenu est issu d’une traduction automatique sont L’utilisateur peut modifier à tout moment ses choix en matière de cookies.
n Les contenus sont présentés avec un contraste suffisant par rapport à n Le serveur envoie les informations permettant la mise en cache des
complète des 226 bonnes pratiques. La liste des points conformes montre
R21
matiquement modifier la mise en page.
R41
signalées comme telles.
R60
Merci à Fabrice Bonny, aux équipes présentes et passées de Temesis et
leur arrière-plan. (181) contenus. (206) ou l’autre de ces exigences. Cela ne veut pas du tout dire que celles-ci n’ont d’Opquast, et à tous les partenaires et soutiens du projet :
tout ce qui a été bien fait. La liste des points non conformes vous donne pas de valeur ajoutée. Certaines de ces règles sont très utiles et il est fortement R61 Toute collecte d’information personnelle fait l’objet d’une explication ou
les pistes d’amélioration.
n Les mises en majuscules à des fins décoratives sont effectuées à l’aide n Le serveur envoie un code HTTP 404 pour les ressources non trouvées. recommandé de les mettre en place. Nous les avons donc conservées et R22 Une métadonnée indique l’URL de référence des contenus proposés sous R42 Le sens de lecture du contenu est indiqué lorsqu’il diffère de celui par d’une justification.
Version 3 (2015) : Olivier Keul • Vincent Valentin • Vincent Aniort • Éric
des styles . (182) (207)
ordonnées : elles viennent compléter la liste des bonnes pratiques et peuvent plusieurs formes. défaut.
Gateau • Vincent • Jérémie Patonnier • Delphine Malassingne • Bertrand
Renforcer un cahier des charges vous permettre d’améliorer de manière importante la qualité de votre site. R62 Le serveur est configuré pour ne pas renvoyer d’informations sur les
n Les styles ne justifient pas le texte. (183) n Le serveur envoie une page d’erreur 404 personnalisée. (208)
Fichiers et multimedia Navigation versions des logiciels et langages utilisés. Matge • Nicolas Hoizey • Nicolas Hoffmann • Nicolas Gallet • Carl-Ste-
La licence de diffusion des bonnes pratiques vous permet de les intégrer à phan Parent • Aurélien Levy • Véronique Lapierre • Bastien Gatellier • Gaël
n Un contenu n’est pas désigné uniquement par sa forme ou par sa n Le serveur envoie une page d’interdiction 403 personnalisée. (209) des cahiers des charges ou à des documents de spécification. Alternatives Poupard • Yann Olive • Jean-Luc Gay • Jean-Pierre Vincent • Fabrice Bonny
position à l’écran. (184) R23 Les tableaux de données des documents PDF internes sont structurés. R43 Les pages contiennent des liens transversaux (alternatives à la navigation Serveur et performances • Fabrice Bournisien • Arnaud Malon • Charles-Édouard Coste • Emmanuel
n Le menu principal de navigation figure sur les pages d’erreur personna-
Piloter un parc de site
R1 Si un contenu est proposé sous une forme inaccessible, une version par les menus).
Clément • Christophe Clouzeau • Valery-Xavier Lentz • Claire Bizingre •
lisées. (210) alternative accessible est mise à disposition. R24 Les listes ordonnées et non ordonnées des documents PDF internes sont R63 Le serveur envoie un code 301 pour le contenu ayant changé d’adresse
Sécurité et confidentialité Rassurer et protéger les internautes structurées. R44 Le code source des pages contient des liens relatifs vers l’auteur, les droits de façon permanente. Sophie Drouvroy • Boris Schapira • Thomas Beduneau • Damien Jubeau •
Les sociétés, agences web et SSII travaillent sur plusieurs sites. Une société
n Le serveur transmet des contenus compressés aux clients qui les
doit obtenir des indicateurs pour l’ensemble de ses sites. Une agence web R2 Une description étendue correctement associée complète l’alternative de reproduction, l’accueil et le plan du site. Julie Mathiau • François D. • Dario Spagnolo • Frédéric Kayser Nathalie •
n L’identité des prestataires impliqués dans les transactions est précisée.
(185)
acceptent. (211)
doit, quant à elle, mesurer la qualité moyenne des sites qu’elle produit. textuelle des images complexes. R25 Les images des documents PDF internes sont dotées d’alternatives tex- R64 Le site ne pratique pas de détection du user-agent. Arnaud Malon • Guillaume Verstraete • Yvain Liechti • Daniel Roch • Nathalie
tuelles. R45 Les blocs de contenu affichés individuellement à la demande de l’utilisa- Rosenberg • Monique Brunel.
n Les en-têtes envoyés par le serveur contiennent les informations relatives La mise en place d’indicateurs de conformité (conformité globale, pour un
Les captchas audio peuvent être mis en pause. teur peuvent être ouverts en une seule fois. R65 Les appels de scripts ne sont pas dupliqués.
n La politique de confidentialité et de respect de la vie privée est accessible au jeu de caractères employé. (212) niveau, pour une bonne pratique ou pour une rubrique donnée) permet de R3
R26 Les documents PDF sont linéarisables. Version 2 (2010) : Delphine Malassingne • Nicolas Le Gall • Martin
depuis toutes les pages. (186) piloter, de suivre et d’améliorer les processus de production.
Le défilement du contenu ne provoque pas l’affichage automatique de R66 La date et l’heure du serveur sont correctes. Supiot • Jérémie Patonnier • Nicolas Gallet • Carl-Stéphan Parent • Florent
n Le serveur respecte l’ordre préférentiel de langues des outils de consul- Code Les pages proposent un accès à une information synthétique pour les
R46
contenu interstitiel.
n Le site propose une procédure de réinitialisation du mot de passe. (187) tation. (213)
Auditer un CMS
R27
contenus sonores, visuels, animés et médias synchronisés. R67 Les appels aux scripts sont placés après le contenu.
Verschelde • Nicolas Hoizey • Mathias Poujol-Rost • Vincent Valentin • Natha-
R4 Le code source de chaque page ne comporte pas d’erreur portant sur lie Rosenberg • Thierry Régagnon • Pascale Lambert-Charreteur • Ghislain
n Les mots de passe peuvent être choisis ou changés par l’utilisateur. (188)
n Les feuilles de styles du site sont minifiées. (214) La capacité d’un CMS (Système de gestion de contenus) à respecter les l’arbre du document ou la syntaxe des balises et attributs. R47 Chaque résultat de recherche est accompagné d’un extrait du contenu.
Le serveur envoie des pages d’erreurs personnalisées.
Sillaume • Armand Abric • Vincent Aniort • Leo Ludwig • Corinne Schillinger
R28 Les contenus multimédias sont sous-titrés. R68
• Claire Bizingre • Jean-Paul Chiron • David Lafon • Véronique Lapierre •
bonnes pratiques qualité peut s’avérer décisive pour la qualité de vos sites.
n Les mots de passe choisis par l’utilisateur admettent les caractères impri-
n Les scripts du site sont minifiés. (215) Nous vous conseillons d’installer le CMS et d’évaluer le site avant même R5 Le code source des pages est valide au regard de la grammaire choisie. R48 L’utilisateur peut choisir le nombre de résultats de recherche affichés par Frank Taillandier • Marie Destandau • Matthieu Blondel • Sébastien Delorme
mables de la table ASCII. (189) R29 Chaque contenu vidéo est doté d’une audio-description. page. R69 Le nombre de requêtes HTTP est optimisé.
de créer les premiers contenus. Les bonnes pratiques non conformes sont • Gilles Rouyer • Sébastien Billard • Romain Gervois • Serge Boujo.
n Les fonctions de scripts internes au site sont placées dans des fichiers
Sites
n Un dispositif sensibilise l’utilisateur sur le degré de sécurisation du mot autant de défauts qui pourront se retrouver dans les futurs sites. R6 Les éléments avec une sémantique native sont préférés.
de passe qu’il choisit. (190)
externes. (216) Formulaires R49 Les alternatives textuelles, étiquettes et libellés de liens ayant des fonc- Tableaux Version 1 (2004) : Ned Baldessin • Vincent Bénard • Christophe Bonnet
tions identiques sont cohérentes à travers le site.
Ce document est la propriété exclusive de Aurore Mariscal (aurore.mariscal@hotmail.com) - jeudi 25 août 2022 à 10h33
R7 Les zones principales de la page sont identifiées dans le code source. • Jérémie Bouillon • Michel Brack • Frédéric Cavazza • Mathieu Charrier
n Les certificats de sécurité sont signés et en cours de validité. (191) n L’adresse du site et de ses sous-domaines fonctionnent avec ou sans Suivre la production d’un site R30 L’utilisateur est averti du verrouillage majuscule de son clavier lors de la R70 Le site ne comporte pas de tableaux de données complexes.
• Jean-Paul Chiron • Antoine Chopin • Emmanuel Clément • Éric Daspet •
préfixe www. (217) saisie d’un champ sensible à la casse. L’accès à chaque contenu temporisé peut être mis en pause ou prolongé.
Plus les erreurs sont détectées tard dans le processus de production, plus R8 Les citations sont balisées de façon appropriée. R50
Olivier de Segonzac • Jean-Marc Fontaine • Frédéric Frances • Mathieu
n Les données sensibles ne sont pas transmises en clair dans les URL. (192)
Syndication Des flux pour diffuser les contenus
elles sont difficiles et coûtent cher à corriger. Froidure • Pierre Goiffon, • Julien Heberte • Nicolas Hoffmann • Stéphane
R9 Les dimensions réelles des images sont indiquées dans le code source. R31 La position des libellés et des champs est uniforme dans chaque formu- Newsletter Huc • Olivier Jeannet • Pascal Kuczynski • Normand Lamoureux • Sylvain
n Les échanges de données sensibles sont sécurisés et signalés comme tels.
(193)
n Le code source des fils de syndication indique leur fréquence de mise à
Coût des erreurs
détectées R10 L’accès aux contenus et services est possible sans le support des scripts.
laire.
R51 Le champ « destinataire » de la newsletter ne comprend que l’e-mail du
Dix principes pour la qualité web Machefert • Richard Moret • Willy Morin • Jean-François Nogier • François
jour. (218) Les validations de formulaires côté client ont une alternative côté serveur. Nonnenmacher • Bruno Patri • Guy-Philippe Uberos • Stéphane Villatte •
R32 destinataire (ou à défaut un e-mail générique créé par l’expéditeur). Appuyez-vous sur ces cinq principes techniques (1 à 5) et ces cinq principes
n Les en-têtes envoyés par le serveur désactivent la détection automatique
R11 Le site n’emploie aucune technique destinée à bloquer ou gêner l’affi- de management (6 à 10) pour définir votre stratégie qualité web.
Philippe Worontzof.
du type MIME de chaque ressource. (194) n Les fils de syndication sont détectables par les agents utilisateurs. (219) La possibilité d’envoyer un formulaire à l’aide de la touche Entrée du
chage et/ou la lecture du code source. R33
Présentation
clavier n’est pas altérée.
n Le serveur indique le type MIME de chaque ressource. (195) n Les hyperliens contenus dans les fils de syndication sont absolus. (220)
R12 Le site n’emploie aucune technique destinée à empêcher l’utilisation de R52 L’interlettrage n’est réalisé que dans les styles CSS.
1 • Séparer le fond de la forme.
Préférer les standards stricts et n’utilisez pas CSS pour véhiculer du contenu.
Vous êtes professionnel du Web ? Les bonnes pratiques vous semblent
Le lien d’activation de l’aide contextuelle à un champ de formulaire est importantes ? Découvrez l’ensemble des briques du projet Opquast.
n Les informations sur la sécurité des transactions sont indiquées. (196) n Le site propose au moins un lien vers chaque fil de syndication. (221) fonctions natives des agents utilisateurs (clic droit, sélection de texte, R34
visuellement rattaché à l’étiquette de ce champ.
2 • Structurer sémantiquement les contenus.
impression...). R53 Les dispositifs de changement de taille de caractères proposés par le site Utilisez des éléments HTML en rapport avec la nature et la structure des contenus. • Qualité web – La référence des professionnels du Web, éditions Eyrolles
n L’objectif des cookies et les limitations inhérentes à leur refus sont expli-
Tableaux Idéal pour présenter les données… tabulaires Spécifications Prototypes Design Intégrations Développement Vie du site
agissent sur la totalité de la page. 3 • Un contenu unique pour plusieurs supports.
http://qualite-web-lelivre.com/
qués. (197) Identification
Contenus Exploitez les mécanismes d’adaptation de présentation en fonction du media (feuilles
Les styles en ligne ne sont utilisés que s’ils ne peuvent pas être de styles, screen, print, media queries...) avant de créer des versions spécifiques.
n La procédure d’accès et de rectification des données personnelles est n Les cellules des tableaux de données sont reliées à leurs en-têtes. (222) Pour faciliter la détection des erreurs en amont, chaque bonne pratique L’auteur de chaque article est identifiable. R35 Les informations relatives à l’audience et à la fréquentation du site sont
R54
externalisés. 4 • Développer des interfaces enrichissables.
• Opquast certified, la certification des professionnels du Web
décrite. (198)
R13 http://certified.opquast.com/fr/
a été associée à différents aspects de la production de sites. Il est ainsi accompagnées de la période couverte et du mode de mesure. Développez d’abord vos applications sans JavaScript ni Ajax pour qu’elles fonc-
n Les titres des tableaux de données sont renseignés. (223)
possible d’extraire des listes de bonnes pratiques pour chaque phase de tionnent dans tous les contextes (l’application pourra alors être enrichie).
R14 Des sources (citations, lien vers une référence...) légitiment les informa- R55 Le contenu textuel reste lisible avec une taille de caractères augmentée • Opquast check-lists : les check-lists des pros du Web
n La création d’un compte est soumise à un processus de confirmation.
(199) n La linéarisation des tableaux utilisés pour la mise en page ne nuit pas production d’un site. Les listes ainsi obtenues constituent des check-lists tions présentées et/ou leurs auteurs. R36 La syntaxe des URL est homogène sur l’ensemble du site. d’un facteur 2 dans le navigateur. 5 • Se faire aider par les machines. https://checklists.opquast.com/fr/
à la compréhension des contenus. (224) métier, dont certaines sont présentées dans ce mémento. Les frameworks, systèmes de gestion de contenu et outils de test sont là pour vous
Un seul jeu d’identifiants est nécessaire pour accéder à l’ensemble des faire gagner du temps. Ces outils fonctionnent vite et de façon répétable. • Opquast reporting, un outil pour faire vos audits qualité Web
n La création de compte est possible sans recours à un système d’identifi-
n Les tableaux de données ne sont pas remplacés par des images. (225)
R15 L’identité du ou des traducteurs est indiquée. R37
services proposés.
R56 Les vignettes ne sont pas des images de taille supérieure redimensionnées
6 • Respecter la séparation des métiers. https://reporting.opquast.com/fr/
cation tiers. (200) Créer des sites respectant les bonnes pratiques côté client.
Veillez à circonscrire chaque métier. Laissez la production de contenu aux contribu-
Conception : Nord Compo © Groupe Eyrolles 2017

R16 Les contenus éditoriaux qui le nécessitent sont associés à une date ou
n Les comptes ou abonnements ouverts en ligne peuvent être fermés par n Les tableaux de données ne sont pas simulés à l’aide de texte mis en Adressez-vous à l’une des agences partenaires Opquast ; son responsable une période de publication. Internationalisation R57 Le site n’impose pas d’effets de flash. teurs, le développement aux développeurs, le webdesign aux designers...
4 e édition
le même moyen. (201) forme. (226) qualité web saura vous renseigner et évaluer vos besoins. Les agences sont 7 • Soigner son agilité.
Élie Sloïm
recensées sur http://partners.opquast.com/fr/. La date de mise à jour des contenus contractuels est indiquée. Établissez des recettes et intégrez des ajustements tôt et fréquemment.
n Le serveur n’envoie pas la liste des fichiers des répertoires n’ayant pas
R17 R38 Les titres, libellés et contenus alternatifs sont traduits dans la langue de Sécurité et confidentialité 8 • Prêter l’oreille aux utilisateurs. Chez le même éditeur...
ISBN : 978-2-212-14442-0
Code éditeur : G14442
la page.
de page d’index. (202) À vous de jouer Les systèmes de votes, notes et sondages précisent le nombre de votants, Personne n’est aussi mal placé qu’un créateur de site pour définir les attentes des Mémento Ergonomie. A. BOUCHER
Former et certifier des personnels La commande ou la création de compte ne provoque pas d’inscription
Laurent Denis
R18 R58
Le respect des bonnes pratiques proposées dans ce mémento n’a pas de caractère utilisateurs. Écoutez-les à tout moment, ils ont (presque) toujours raison. Mémento CSS3. R. GOETTER
la période et le mode de mesure. R39 Les formulaires et les messages associés sont rédigés dans une langue automatique à une newsletter.
n Le serveur envoie les informations d’activation de protection cross site obligatoire. Il s’agit simplement d’un aide-mémoire sur les fondamentaux de la La maîtrise des bonnes pratiques, des objectifs associés à chacune d’entre
unique.
9 • S’appuyer sur des modèles et référentiels.
Mémento UML2.5. P. ROQUES
scripting. (203) elles, et du vocabulaire constituent des éléments fondamentaux de la Pour atteindre des objectifs de qualité ou d’accessibilité, ils doivent être définis
création web. De la même façon qu’un pilote de ligne déroule une check-list avant
chaque décollage quels que soient son expérience et le nombre d’heures de vol culture web et de la capacité des professionnels à travailler ensemble sur
R19 Le site respecte les règles orthotypographiques de la langue du texte.
La version originale des contenus traduits est indiquée.
R59 Les contenus postés dans des formulaires sont filtrés pour éviter les
injections.
quelque part. Les modèles et référentiels sont là pour vous aider.
Mémento PHP5/SQL. C. PIERRE DE GEYER,
G. PONÇON, S. MARIEL
et les contributeurs Opquast
n Le serveur envoie les informations indiquant les domaines autorisés à
qu’il a déjà effectuées, les meilleurs professionnels du Web ne sont pas à l’abri des projets de sites. Vous pouvez vous former pour l’obtention de la certi- R20 Le contenu des pages ne contient pas de mots-clés dissimulés.
R40
10 • Penser d’abord contenu et services.
intégrer ses pages dans des cadres. (204) d’un oubli. Tout comme le pilote qui peut tout de même faire décoller son avion Le succès et l’utilité de votre site dépendent d’abord de la qualité de son contenu Mémento MYSQL5. R. RIMELÉ
fication Opquast. Pour découvrir ce système de certification, rendez-vous
lorsque les défauts détectés sont mineurs, vous pouvez parfaitement décider de sur certified.opquast.com. et des services qu’il propose ; les autres aspects de la qualité web ne servent qu’à Mémento JQUERY. É. SARRION
n Le site propose un mécanisme de sécurité permettant de restreindre
lancer votre site ou de le laisser en l’état si les défauts que vous avez détectés ne les mettre en valeur. Mémento HTML5. R. RIMELÉ
l’origine des contenus. (205)
vous semblent pas critiques. Cette capacité à mesurer la gravité d’un défaut dans
un contexte donné est une compétence essentielle pour un professionnel du Web.
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
n Les mises en majuscules à des fins décoratives sont effectuées à l’aide n Le serveur envoie un code HTTP 404 pour les ressources non trouvées. les pistes d’amélioration. recommandé de les mettre en place. Nous les avons donc conservées et R22 Une métadonnée indique l’URL de référence des contenus proposés sous R42 Le sens de lecture du contenu est indiqué lorsqu’il diffère de celui par d’une justification.
des styles . (182) (207) Version 3 (2015) : Olivier Keul • Vincent Valentin • Vincent Aniort • Éric
(185)
acceptent. (211)
R46
Auditer un CMS
R27
n Les scripts du site sont minifiés. (215) Nous vous conseillons d’installer le CMS et d’évaluer le site avant même R5 Le code source des pages est valide au regard de la grammaire choisie. R48 L’utilisateur peut choisir le nombre de résultats de recherche affichés par Frank Taillandier • Marie Destandau • Matthieu Blondel • Sébastien Delorme
Sites
R7 Les zones principales de la page sont identifiées dans le code source. tions identiques sont cohérentes à travers le site. • Jérémie Bouillon • Michel Brack • Frédéric Cavazza • Mathieu Charrier
n Les certificats de sécurité sont signés et en cours de validité. (191) n L’adresse du site et de ses sous-domaines fonctionnent avec ou sans Suivre la production d’un site R30 L’utilisateur est averti du verrouillage majuscule de son clavier lors de la R70 Le site ne comporte pas de tableaux de données complexes.
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
n Les informations sur la sécurité des transactions sont indiquées. (196) n Le site propose au moins un lien vers chaque fil de syndication. (221) fonctions natives des agents utilisateurs (clic droit, sélection de texte, R34
R54
décrite. (198)
services proposés.
R16 Les contenus éditoriaux qui le nécessitent sont associés à une date ou Veillez à circonscrire chaque métier. Laissez la production de contenu aux contribu-
4 e édition
Élie Sloïm
R17 R38 Les titres, libellés et contenus alternatifs sont traduits dans la langue de
la page.
Sécurité et confidentialité 8 • Prêter l’oreille aux utilisateurs. Chez le même éditeur...
Laurent Denis
R18 R58
unique.
injections.
R40
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Bonnes pratiques
Bonnes pratiques Bonnes pratiques Bonnes pratiques Espaces publics, Fichiers et multimédia, Bonnes pratiques Bonnes pratiques Bonnes pratiques
Qualité Web Mode d’emploi de ce mémento Alternatives, Code Contact, contenus, E-commerce E-commerce, Espaces publics Formulaires Formulaires, Hyperliens, Identification Internationalisation, Mobile, Navigation Navigation, Newsletter, Présentation
DÉFINITION Qu’est-ce que la qualité web ? Un précieux aide-mémoire Alternatives Accéder à l’information dans tous les contextes Contact Identifiez-vous clairement et soyez joignable E-Commerce (suite) Espaces publics (suite) Formulaires (suite) Internationalisation Un media mondial, des contenus pour tous Navigation (suite)
La qualité d’un service en ligne ou e-qualité est l’aptitude d’un service en ligne Comme son nom l’indique, ce mémento joue le rôle d’aide-mémoire lors
à satisfaire à des exigences implicites ou explicites. de la création ou de l’analyse d’un site. Même si le respect de toutes n Chaque image décorative est dotée d’une alternative textuelle appro- n Le site propose au moins un moyen de contact. (26) n Les conditions de fonctionnement du service après-vente sont indiquées. n Les contenus ou fichiers destinés à des espaces publics peuvent être n Les éléments d’une liste déroulante qui peuvent être regroupés le sont n L’indicatif international est disponible pour tous les numéros de télé- n Le focus clavier n’est ni supprimé ni masqué. (155)
priée. (1) (50) vérifiés avant leur envoi définitif. (74) de manière appropriée. (105) phone. (130)
Le modèle VPTCS les bonnes pratiques n’est pas obligatoire, mieux vaut ne rien laisser au n Le site propose au moins deux moyens de contact. (27) n Le site est intégralement utilisable au clavier. (156)
hasard. n Chaque image-lien est dotée d’une alternative textuelle appropriée. (2) n Les conditions de débit ou d’encaissement sont spécifiées avant la vali- n Les informations destinées à des espaces publics peuvent être prévisua- n Les listes d’options de formulaires sont présentées dans un ordre identi- n Le pays est précisé pour toutes les adresses postales. (131)
n Les coordonnées postales et téléphoniques de la représentation locale ou dation définitive de la commande. (51) lisées sous la forme où elles seront affichées. (75) fiable. (106) n La navigation au clavier s’effectue dans un ordre prévisible. (157)
V P T C S Un support d’audit sur le terrain n Chaque image porteuse d’information est dotée d’une alternative tex-
tuelle appropriée. (3)
du siège social des sociétés et organisations sont indiquées. (28)
n Les conditions de garantie sont indiquées. (52)
Fichiers et multimédia Un site interactif et respectueux Hyperliens Mieux naviguer grâce aux liens
n Le code source de chaque page indique la langue principale du contenu.
(132) n Le site ne comporte pas de liens internes vers des pages en construction.
(158)
Visibilité Perception Technique Contenus Services Ce mémento est conçu comme un outil de poche de vérification de site. En n Chaque demande d’information fait l’objet d’un accusé de réception. (29)
cochant ses cases, vous pouvez directement effectuer un audit. n Les objets inclus sont dotés d’une alternative textuelle appropriée. (4) n Les conditions de vente ou d’utilisation sont accessibles depuis toutes les n La langue principale de la page cible d’un hyperlien est identifiable
n Chaque page affiche une information permettant de connaître son
Rédaction E-commerce n Les délais de réponse aux demandes d’information sont indiqués. (30) pages. (53) n La durée des contenus vidéo ou audio est indiquée. (76) n Chaque lien est doté d’un intitulé dans le code source. (107) lorsqu’elle diffère de celle de la page d’origine. (133) emplacement dans l’arborescence du site. (159)
Référencement Ergonomie Sécurité
Traduction Logistique
Des fiches détaillées en ligne n Les contenus générés via les styles sont dotés d’une alternative appro-
n Le format des fichiers proposés en téléchargement est indiqué. (77) n Le soulignement est réservé aux hyperliens.
Positionnement Accessibilité Hébergement
Stratégie éditoriale E-services priée. (5) n Les données contenues dans le Whois du site permettent de le relier n Les informations relatives à la zone de livraison des produits ou de (108)
n Chaque changement de langue est signalé. (134)
n Le site propose un moteur de recherche interne. (160)
Webmarketing Webdesign Performance - QoS
Architecture SAV, Chaque bonne pratique est suivie d’un numéro d’identification qui permet directement à son propriétaire. (31) réalisation des services sont indiquées. (54)
Communication Navigation Conformité W3C
de l’info. Relation client
d’accéder à une fiche en ligne. Voici un exemple. n Les pictogrammes typographiques sont dotés d’une alternative appro- n La taille des fichiers internes proposés en téléchargement est indiquée.
(78)
n Les hyperliens sont visuellement différenciés du reste du contenu. (109)
n Les liens d’accès aux versions traduites pointent directement vers la
n La page des résultats de recherche indique le nombre de résultats, le
priée. (6) Contenus Des contenus clairs et identifiés n Les moyens de paiement acceptés et les procédures correspondantes sont
n Le site n’applique pas le même style aux liens visités et non visités. (110)
traduction de la page courante. (135) nombre de pages de résultats, et le nombre de résultats par page. (161)
• La visibilité désigne l’aptitude d’un site à être rencontré par ses utilisa- n Le serveur envoie une page d’erreur 404 personnalisée. (208) indiqués. (55)
n La langue des fichiers en téléchargement est précisée lorsqu’elle diffère
teurs potentiels. Le numéro 208 indique qu’une fiche complète est accessible à l’adresse : n Chaque contenu audio et vidéo est accompagné de sa transcription
n Le titre de chaque page permet d’identifier le site. (32) de celle de la page d’origine. (79) n Le site n’impose pas d’interdiction ou de restriction à la mise en place n Les liens vers les versions équivalentes de la page ou du site sont rédigés
n Chaque page de résultats de recherche peut être atteint via une adresse
• La perception représente son aptitude à être utilisable et correctement http://checklists.opquast.com/oqs-v3/208 textuelle. (7) n Les horaires et tarifs de fonctionnement des services mis à la disposition
des liens entrants. (111)
dans leur langue cible. (136) web. (162)
perçu par ses utilisateurs. n Le titre de chaque page permet d’identifier son contenu. (33) des utilisateurs sont indiqués. (56)
Exemple de fiche Opquast n L’information n’est pas véhiculée uniquement par la couleur. (8) n Les animations, sons et clignotements peuvent être mis en pause. (80)
Mobile
• La technique concerne son aptitude à fonctionner correctement.
n Les recours en cas de litige sont indiqués dans les conditions générales n Le survol ou l’activation des hyperliens ne modifie pas la mise en page. Un contexte fréquent, des précautions spécifiques n Un plan du site est accessible depuis chaque page. (163)
• Les contenus recouvrent l’aptitude à délivrer de l’information de qualité. Libellé Le serveur envoie une page d’erreur 404 personnalisée.
n Les captchas audio peuvent être réécoutés à volonté. (9)
n Les contenus publicitaires ou sponsorisés sont identifiés comme tels. (34)
de vente ou d’utilisation. (57) n Le déroulement des animations ne bloque pas la navigation ou l’accès (112)
• Les services déterminent son aptitude à proposer, accompagner ou Informer l’utilisateur sur l’erreur rencontrée, sur la aux contenus. (81) n Le serveur ne force pas la redirection de la version desktop vers la n Les blocs de navigation de même nature sont affichés aux mêmes
générer la réalisation de services de qualité. Objectif continuité de fonctionnement du serveur et lever le doute
n Les captchas sont accompagnés d’une solution alternative d’accès. n Les informations relatives aux droits de copie et de réutilisation sont n Les hyperliens de même nature ont des couleurs, des formes et des version mobile. (137) emplacements sur toutes les pages. (164)
Les cinq points de ce modèle VPTCS (visibilité, perception, technique, sur un éventuel problème lié à sa connexion.
(10)
accessibles depuis toutes les pages. (35) n L’adresse et les conditions de retour des produits sont indiquées. (58)
n Les sons et vidéos sont déclenchés par l’utilisateur. (82) comportements identiques sur toutes les pages. (113)
contenus et services) sont indispensables à la qualité d’un site web. Ils sont n Le mode de dépôt et la procédure de traitement des réclamations sont n Il est possible de basculer depuis chaque page entre les versions mobile n Les icônes de navigation sont accompagnées d’une légende explicite.
Modifier la configuration du serveur web pour renvoyer Code Un code propre et robuste n Le site fournit aux utilisateurs la possibilité de connaître les nouveaux n Le texte des documents PDF internes est sélectionnable. (83) n Tous les hyperliens internes du site sont valides. (114) et desktop du site. (138) (165)
d’importance égale. La valeur ajoutée d’un site réside essentiellement dans l’utilisateur vers une page personnalisée lorsque la contenus ou services. (36) indiqués. (59)
ressource demandée n’existe pas. Si la configuration n Les liens provoquant l’ouverture d’un logiciel externe ont un libellé
ses Contenus et Services. n Le code source de chaque page débute par une déclaration de type de n Les documents PDF internes sont dotés d’une structure de titres. (84) n Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu
n Le site ne bloque pas les fonctionnalités de zoom du navigateur. (139)
Mise en
principale du serveur n’est pas directement accessible et
si l’environnement le permet, utiliser une configuration document dont la syntaxe est conforme à celles recommandées par le n Si le site propose un espace personnel ou abonné, il est possible de n Les conditions de remboursement sont indiquées. (60) vers lequel il pointe. (115) explicite. (166)
Qualité web : le modèle VPTCS sauvegarder les contenus personnels dans un format standard. (37)
œuvre
locale par répertoire par exemple, l’environnement W3C. (11)
n Les matériels et logiciels nécessaires au fonctionnement du service sont Formulaires Faciliter les échanges d’informations n Les alertes JavaScript et fenêtres modales invitant à l’installation d’une
Apache autorise la création d’un fichier .htaccess indiqués avant la validation de la commande. (61) n Les hyperliens consécutifs sont séparés visuellement. (116) application mobile ne se produisent qu’une seule fois par session. (140) n Si le site n’est pas réservé à un public spécifique, l’accès aux contenus
n Un lexique ou un glossaire adapté au public visé explique le vocabulaire est immédiat. (167)
V P T C S contenant des directives relatives aux traitements des
erreurs : ErrorDocument 404 /mapage.html.
n
n
Chaque identifiant HTML n’est utilisé qu’une seule fois par page. (12)
Le contenu de chaque page est organisé selon une structure de titres et

sectoriel ou technique. (38)
n Les prix affichés mentionnent le détail des taxes et suppléments éventuels
n Chaque étiquette de formulaire est visuellement rattachée au champ
qu’elle décrit. (92) n Les hyperliens internes et externes sont différenciés. (117)
n La promotion de l’application mobile ne recourt ni aux alertes JavaScript
ni aux fenêtres modales. (141) n Chaque page contient des liens d’accès rapide placés au début du code
Visibilité Perception Technique Contenus Services ainsi que le montant hors taxes. (62) source. (168)
À partir de n’importe quelle adresse URL du site sous-titres hiérarchisée. (13) E-Commerce Bâtir la confiance pour vendre mieux et plus n En cas de rejet des données saisies dans un formulaire, les champs Identification Jouer la transparence
examiné :
n Une adresse de livraison différente de l’adresse de facturation peut être contenant les données rejetées sont indiqués à l’utilisateur. (93) n Le site propose un ou plusieurs mécanismes dédiés à l’adaptation aux
Avant la visite Pendant la visite Après la visite �Modifier l’adresse URL afin d’obtenir une erreur 404, n Le site n’impose pas de redirection ou de rafraîchissement automatique
n L’achat d’un produit ou service est possible sans création de compte. (39) spécifiée. (63) n L’identité de l’auteur, de la société ou de l’organisation est indiquée. (118) terminaux mobiles. (142) Newsletter Un envoi ne s’improvise pas
côté client. (14)
UI par exemple, en ajoutant une série de trois ou quatre n En cas de rejet des données saisies dans un formulaire, les raisons du
n Les champs de saisie de type e-mail, URL, téléphone, nombre, recherche,
caractères aléatoires en fin d’adresse tels que : n Aucun produit ni service annexe n’est ajouté au panier de commande n Le site accepte au moins deux moyens de paiement. (64) rejet sont indiquées à l’utilisateur. (94) n L’identité de la personne ou du service responsable des contenus est n Un lien de désinscription est présent dans chaque newsletter. (169)
UX
http://www.exemple.com/dbvdjb. n Les dates sont présentées dans des formats explicites. (15)
sans que cette action soit déclenchée par l’utilisateur. (40) indiquée. (119) mots de passe, heure et date sont dotés du type approprié. (143)
�Vérifier que la page retournée correspond à une page
n L’emplacement des blocs de navigation est cohérent dans le code source n La référence de la transaction est affichée au client après la validation n En cas de rejet des données saisies dans un formulaire, toutes les don- n La désinscription depuis une newsletter ne demande pas de confirmation
personnalisée, cohérente avec le reste du site, et non
de toutes les pages. (16) n La disponibilité des produits est indiquée avant la validation définitive de sa commande. (65) nées saisies peuvent être modifiées par l’utilisateur. (95) n La page d’accueil expose la nature des contenus et services proposés.
(120)
n Les numéros de téléphone sont activables via le protocole approprié. (144) par courriel. (170)
Contrôle pas à la page 404 envoyée par défaut par le serveur de la commande. (41)
Le modèle VPTCS est un modèle UX (expérience utilisateur) qui permet de (Apache, iiS, nginx).
n Le codage de caractères utilisé est UTF-8. n Les mentions d’appartenance à un ordre ou groupe professionnel, d’un n Lors de la saisie d’un formulaire réparti sur plusieurs pages, un récapi- Navigation Aider les internautes à trouver ce qu’ils cherchent n L’inscription aux newsletters est soumise à un processus de confirmation.
différencier d’une part l’expérience utilisateur (UX) qui commence avant �Dans le cas de l’utilisation d’un CMS, ce dernier peut
(17)
n Le délai de livraison estimé est indiqué avant la validation définitive de label ou d’une récompense sont accompagnées d’un lien vers la source. tulatif global est affiché avant l’envoi définitif. (96) n Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page.
(121)
(171)
la visite du service en ligne (Visibilité) et se termine après que l’utilisateur vous faire croire qu’il ne renvoie pas la page 404 par la commande. (42) (66)
n Chaque iframe est doté d’une description. (145)
défaut, il faudra donc effectuer la même vérification via
n Le code source de chaque page contient une métadonnée qui définit le
n La page affichée après l’envoi d’un formulaire permet de reprendre n La désinscription aux newsletters est possible depuis le site. (172)
a quitté l’interface (Services), et d’autre part l’interface utilisateur (UI) qui jeu de caractères. (18) n Si le site est réservé ou destiné à un public spécifique, ce public est
regroupe les aspects visuels et ergonomiques (Perception), le fonctionne- l’adresse URL d’une image ou d’un fichier CSS ou JS pour n Les modalités de récupération d’un bien dématérialisé sont précisées n Les produits indisponibles font l’objet d’une différenciation visuelle et directement la navigation. (97)
mentionné au moins sur la page d’accueil. (122) n Le site n’emploie pas la technique des jeux de cadres. (146)
n La dernière newsletter envoyée est disponible en ligne. (173)
valider définitivement cette bonne pratique. Dans l’idéal, avant la commande. (43) textuelle. (67)
ment technique (Technique) et la qualité des contenus du site (Contenus). cette page contiendra un message d’erreur explicatif, un n Un contenu qui doit être restitué dans un lecteur d’écran ne lui est pas
n La soumission d’un formulaire est suivie d’un message indiquant la n Il est possible de revenir à la page d’accueil depuis toutes les pages. (147)
plan du site et le menu principal de navigation.
dissimulé. (19)
n La modification de la quantité de chaque article, l’ajout et la suppression n Un courriel indiquant la référence de la transaction et les données de la réussite ou non de l’action souhaitée. (98) n L’adresse complète et le numéro de téléphone des sociétés et organisa- n Les archives de newsletters sont disponibles en ligne. (174)
tions sont accessibles depuis toutes les pages du site. (123)
Les bonnes pratiques Opquast n Le contenu et le sens de chaque page ne sont pas altérés lorsque les d’un ou plusieurs articles restent possibles avant la validation définitive commande est envoyé suite à la validation. (68) n L’utilisateur est averti des ouvertures de nouvelles fenêtres. (148)
n La fréquence d’envoi des newsletters est consultable avant l’abonne-
Les fiches sont également présentées dans le livre Qualité web – la réfé- styles sont désactivés. (20) de la commande. (44) n Les processus complexes sont accompagnés de la liste de leurs étapes.
n La racine du site contient des instructions pour les robots d’indexation. ment. (175)
Le projet Opquast (Open Quality Standards) recherche et établit des
rence des professionnels du Web. n Chaque réclamation fait l’objet d’un accusé de réception. (69) (99)
(124)
n La navigation sur le site ne provoque pas l’ouverture de fenêtres surgis-
bonnes pratiques permettant d’offrir des services web de qualité. Les n La nature et les caractéristiques quantifiables des produits et services santes (pop-ups). (149)
bonnes pratiques sont mises au point, discutées et validées dans des ateliers Licence et liens utiles
n Les éléments visuellement présentés sous forme de liste sont balisés de
sont indiquées. (45) n Le site propose au moins un moyen de contacter le responsable des n L’étape en cours d’un processus complexe est indiquée. (100) Présentation À fond la forme
en ligne, avec les contributeurs Opquast. Mises au point par et pour des Le modèle VPTCS et les bonnes pratiques Opquast sont diffusés sous licence
façon appropriée dans le code source. (21) réclamations. (70) n Le code source de chaque page contient une métadonnée qui en décrit
n Les mécanismes de fermeture de fenêtres sont visuellement rattachés à
le contenu. (125)
professionnels de différents métiers et pays, elles n’ont bien sûr pas vocation Creative Commons BY-SA. Vous pouvez les modifier et les utiliser librement, n Les textes pouvant être mis en forme via des styles ne sont pas remplacés n La période et les conditions de validité des offres spéciales et promotions n Chaque étape d’un processus complexe permet de revenir à l’étape leur contenu. (150) n La charte graphique est cohérente sur l’ensemble du site. (176)
sont indiquées. (46) précédente. (101)
à se substituer à la loi d’un pays donné. Pour être recevable, une bonne à la condition expresse de citer vos sources. Vous pouvez également les par des images. (22) Espaces publics De la modération en toutes choses n Le code source des pages contient un appel valide à une icône de favori.
n Les mécanismes de fermetures de fenêtres sont immédiatement dispo-
pratique doit remplir les critères suivants : télécharger sur : http://checklists.opquast.com (126) n La taille des polices destinées à l’affichage écran est exprimée en taille
• apporter une valeur ajoutée aux usagers voire aux administrateurs ; Pour suivre le projet Opquast, rendez-vous à l’adresse : n La première occurrence d’une abréviation ou d’un acronyme dans le n Le numéro d’immatriculation délivré aux sociétés ou organisations au
n Le site propose au moins un moyen de contacter le modérateur des n L’utilisateur est averti de la perte d’information en cas d’utilisation de nibles. (151) variable et non en taille fixe. (177)
terme des procédures légales d’enregistrement en vigueur dans leur l’historique de son navigateur dans un processus complexe. (102)
• être « réaliste » et réalisable ; http://www.opquast.com corps de chaque page donne accès à sa signification. (23)
pays est indiqué. (47)
espaces publics. (71) n L’extension utilisée est cohérente avec l’identité, l’activité, la zone géo-
n Les nouvelles fenêtres dimensionnées et les fenêtres modales sont dotées n Le site propose des styles dédiés à l’impression. (178)
graphique couverte ou avec le nom de domaine. (127)
• être vérifiable en ligne par une entité extérieure au site ;
n Le code source de chaque page ne contient pas d’éléments détournés à n Les espaces publics proposent au moins un moyen de signaler les abus. n La navigation dans un processus complexe ne provoque pas la perte d’un bouton de fermeture explicite. (152)
• être compréhensible indépendamment du pays ;
des fins de présentation. (24) n Le sous-total détaillé est indiqué avant la validation définitive de la (72)
des données précédemment soumises. (103)
n Le site propose un fichier sitemap indiquant les contenus à explorer. (128) n Le contenu de chaque page est disponible à l’impression sans blocs de
• faire consensus auprès de la communauté consultée. commande. (48) n Les mécanismes de fermetures de fenêtres sont affichés aux mêmes navigation. (179)
Ce mémento présente la troisième version des bonnes pratiques qualité web
n Le code source de chaque page ne contient pas d’éléments ou d’attributs n Les conditions de modération des espaces publics sont indiquées. (73) n Le copier-coller est possible dans les champs de formulaire. (104)
n Si le site déclare respecter un ou plusieurs standards ou référentiels, un emplacements sur toutes les pages. (153)
Opquast accompagnées d’une série de recommandations. de présentation. (25) n Les conditions de financement sont indiquées. (49) lien est proposé vers chacun d’entre eux. (129) n Une famille générique de police est indiquée comme dernier élément de
n La consultation du site ne redimensionne pas la fenêtre du navigateur.
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
Le modèle VPTCS les bonnes pratiques n’est pas obligatoire, mieux vaut ne rien laisser au
n Le site propose au moins deux moyens de contact. (27) n Le site est intégralement utilisable au clavier. (156)
hasard. n Les conditions de débit ou d’encaissement sont spécifiées avant la vali-
n Chaque image-lien est dotée d’une alternative textuelle appropriée. (2) n Les informations destinées à des espaces publics peuvent être prévisua- n Les listes d’options de formulaires sont présentées dans un ordre identi- n Le pays est précisé pour toutes les adresses postales. (131)
n La navigation au clavier s’effectue dans un ordre prévisible. (157)
n Les coordonnées postales et téléphoniques de la représentation locale ou dation définitive de la commande. (51) lisées sous la forme où elles seront affichées. (75) fiable. (106)
(158)
(78)
Mobile
(10)
Mise en
œuvre locale par répertoire par exemple, l’environnement W3C. (11)
n
n

examiné :
UX
(120)
(17)
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
(158)
(78)
Mobile
(10)
n Le site ne bloque pas les fonctionnalités de zoom du navigateur.
(139)
Mise en
n
n

examiné :
UX
(120)
(17)
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
(158)
(78)
Mobile
(10)
Mise en
document dont la syntaxe est conforme à celles recommandées par le n Si le site propose un espace personnel ou abonné, il est possible de n Les conditions de remboursement sont indiquées. (60) vers lequel il pointe. (115)
explicite. (166)
Qualité web : le modèle VPTCS si l’environnement le permet, utiliser une configuration sauvegarder les contenus personnels dans un format standard. (37)
œuvre
n
n

examiné :
UX
(120)
(17)
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
Chaque image décorative est dotée d’une alternative textuelle appro- Le site propose au moins un moyen de contact. Les conditions de fonctionnement du service après-vente sont indiquées. Les contenus ou fichiers destinés à des espaces publics peuvent être Les éléments d’une liste déroulante qui peuvent être regroupés le sont L’indicatif international est disponible pour tous les numéros de télé- n Le focus clavier n’est ni supprimé ni masqué. (155)
à satisfaire à des exigences implicites ou explicites. de la création ou de l’analyse d’un site. Même si le respect de toutes n n (26) n n n n
priée. (1) (50) vérifiés avant leur envoi définitif. (74) de manière appropriée. (105) phone. (130) Le site est intégralement utilisable au clavier. (156)
n Le site propose au moins deux moyens de contact. (27) n
hasard. Chaque image-lien est dotée d’une alternative textuelle appropriée. n Les conditions de débit ou d’encaissement sont spécifiées avant la vali- Les informations destinées à des espaces publics peuvent être prévisua- Les listes d’options de formulaires sont présentées dans un ordre identi- Le pays est précisé pour toutes les adresses postales.
n (2)
Les coordonnées postales et téléphoniques de la représentation locale ou
n n n (131)
n dation définitive de la commande. (51) lisées sous la forme où elles seront affichées. (75) fiable. (106)
(158)
cochant ses cases, vous pouvez directement effectuer un audit. n Les objets inclus sont dotés d’une alternative textuelle appropriée. (4) n Les conditions de vente ou d’utilisation sont accessibles depuis toutes les n La langue principale de la page cible d’un hyperlien est identifiable Chaque page affiche une information permettant de connaître son
n Les délais de réponse aux demandes d’information sont indiqués. (30) pages. (53) n La durée des contenus vidéo ou audio est indiquée. (76) n Chaque lien est doté d’un intitulé dans le code source. (107) lorsqu’elle diffère de celle de la page d’origine. (133) n
Rédaction E-commerce emplacement dans l’arborescence du site. (159)
Traduction Logistique n Les contenus générés via les styles sont dotés d’une alternative appro-
Positionnement Accessibilité Hébergement Des fiches détaillées en ligne priée. (5) n Les données contenues dans le Whois du site permettent de le relier n Les informations relatives à la zone de livraison des produits ou de n Le format des fichiers proposés en téléchargement est indiqué. (77) n Le soulignement est réservé aux hyperliens. (108)
n Chaque changement de langue est signalé. (134) Le site propose un moteur de recherche interne.
Stratégie éditoriale
Architecture
E-services
SAV, Chaque bonne pratique est suivie d’un numéro d’identification qui permet directement à son propriétaire. (31) réalisation des services sont indiquées. (54) n (160)
Communication Navigation Conformité W3C n La taille des fichiers internes proposés en téléchargement est indiquée. n Les hyperliens sont visuellement différenciés du reste du contenu. (109) Les liens d’accès aux versions traduites pointent directement vers la
d’accéder à une fiche en ligne. Voici un exemple. n Les pictogrammes typographiques sont dotés d’une alternative appro-
(78)
n n La page des résultats de recherche indique le nombre de résultats, le
priée. (6) Contenus Des contenus clairs et identifiés n Les moyens de paiement acceptés et les procédures correspondantes sont traduction de la page courante. (135) nombre de pages de résultats, et le nombre de résultats par page. (161)
n La langue des fichiers en téléchargement est précisée lorsqu’elle diffère Les liens vers les versions équivalentes de la page ou du site sont rédigés
n Le titre de chaque page permet d’identifier le site. (32) de celle de la page d’origine. (79) n Le site n’impose pas d’interdiction ou de restriction à la mise en place n n Chaque page de résultats de recherche peut être atteint via une adresse
• La perception représente son aptitude à être utilisable et correctement http://checklists.opquast.com/oqs-v3/208 textuelle. (7) n Les horaires et tarifs de fonctionnement des services mis à la disposition dans leur langue cible. (136) web. (162)
perçu par ses utilisateurs. n Le titre de chaque page permet d’identifier son contenu. (33) des utilisateurs sont indiqués. (56) Les animations, sons et clignotements peuvent être mis en pause.
Exemple de fiche Opquast n L’information n’est pas véhiculée uniquement par la couleur. (8) n (80)
Mobile Un plan du site est accessible depuis chaque page. (163)
Les contenus publicitaires ou sponsorisés sont identifiés comme tels. n Les recours en cas de litige sont indiqués dans les conditions générales n Le survol ou l’activation des hyperliens ne modifie pas la mise en page. Un contexte fréquent, des précautions spécifiques n
n (34)
Les blocs de navigation de même nature sont affichés aux mêmes
• Les services déterminent son aptitude à proposer, accompagner ou Informer l’utilisateur sur l’erreur rencontrée, sur la Les informations relatives aux droits de copie et de réutilisation sont
aux contenus. (81) n Le serveur ne force pas la redirection de la version desktop vers la n
n Les captchas sont accompagnés d’une solution alternative d’accès. n L’adresse et les conditions de retour des produits sont indiquées. n Les hyperliens de même nature ont des couleurs, des formes et des version mobile. (137) emplacements sur toutes les pages. (164)
(10)
accessibles depuis toutes les pages. (35) n (58)
Il est possible de basculer depuis chaque page entre les versions mobile n Les icônes de navigation sont accompagnées d’une légende explicite.
contenus et services) sont indispensables à la qualité d’un site web. Ils sont Modifier la configuration du serveur web pour renvoyer Code Un code propre et robuste n Le site fournit aux utilisateurs la possibilité de connaître les nouveaux n Le mode de dépôt et la procédure de traitement des réclamations sont Le texte des documents PDF internes est sélectionnable. Tous les hyperliens internes du site sont valides.
n
d’importance égale. La valeur ajoutée d’un site réside essentiellement dans l’utilisateur vers une page personnalisée lorsque la contenus ou services. (36) indiqués. (59) n (83) n (114) et desktop du site. (138) (165)
ressource demandée n’existe pas. Si la configuration Les documents PDF internes sont dotés d’une structure de titres. Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu n Les liens provoquant l’ouverture d’un logiciel externe ont un libellé
ses Contenus et Services. n n
n Le code source de chaque page débute par une déclaration de type de (84)
n Si le site propose un espace personnel ou abonné, il est possible de n Les conditions de remboursement sont indiquées. (60) vers lequel il pointe. (115) explicite. (166)
Mise en si l’environnement le permet, utiliser une configuration document dont la syntaxe est conforme à celles recommandées par le
œuvre
Si le site n’est pas réservé à un public spécifique, l’accès aux contenus
Apache autorise la création d’un fichier .htaccess indiqués avant la validation de la commande. (61) n Les hyperliens consécutifs sont séparés visuellement. (116) application mobile ne se produisent qu’une seule fois par session. (140) n
n
n

examiné : Une adresse de livraison différente de l’adresse de facturation peut être contenant les données rejetées sont indiqués à l’utilisateur. (93) n Le site propose un ou plusieurs mécanismes dédiés à l’adaptation aux
Avant la visite Pendant la visite Après la visite n Le site n’impose pas de redirection ou de rafraîchissement automatique n L’identité de l’auteur, de la société ou de l’organisation est indiquée. (118) terminaux mobiles. (142) Newsletter Un envoi ne s’improvise pas
�Modifier l’adresse URL afin d’obtenir une erreur 404,
côté client. (14) n L’achat d’un produit ou service est possible sans création de compte. (39) spécifiée. (63) n
n Aucun produit ni service annexe n’est ajouté au panier de commande n L’identité de la personne ou du service responsable des contenus est n Les champs de saisie de type e-mail, URL, téléphone, nombre, recherche, Un lien de désinscription est présent dans chaque newsletter.
caractères aléatoires en fin d’adresse tels que :
n Les dates sont présentées dans des formats explicites. (15) n Le site accepte au moins deux moyens de paiement. (64) rejet sont indiquées à l’utilisateur. (94)
indiquée. (119) mots de passe, heure et date sont dotés du type approprié. (143)
n (169)
http://www.exemple.com/dbvdjb. sans que cette action soit déclenchée par l’utilisateur. (40)
UX En cas de rejet des données saisies dans un formulaire, toutes les don- n La désinscription depuis une newsletter ne demande pas de confirmation
n L’emplacement des blocs de navigation est cohérent dans le code source n La référence de la transaction est affichée au client après la validation n La page d’accueil expose la nature des contenus et services proposés. n Les numéros de téléphone sont activables via le protocole approprié. (144)
de toutes les pages. (16) n La disponibilité des produits est indiquée avant la validation définitive de sa commande. (65) nées saisies peuvent être modifiées par l’utilisateur. (95) n (120)
par courriel. (170)
Le modèle VPTCS est un modèle UX (expérience utilisateur) qui permet de (Apache, iiS, nginx). n Les mentions d’appartenance à un ordre ou groupe professionnel, d’un n Lors de la saisie d’un formulaire réparti sur plusieurs pages, un récapi- Navigation Aider les internautes à trouver ce qu’ils cherchent n L’inscription aux newsletters est soumise à un processus de confirmation.
n Le codage de caractères utilisé est UTF-8. (17)
Le délai de livraison estimé est indiqué avant la validation définitive de n Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page.
différencier d’une part l’expérience utilisateur (UX) qui commence avant �Dans le cas de l’utilisation d’un CMS, ce dernier peut n label ou d’une récompense sont accompagnées d’un lien vers la source. tulatif global est affiché avant l’envoi définitif. (96)
(121)
(171)
la visite du service en ligne (Visibilité) et se termine après que l’utilisateur vous faire croire qu’il ne renvoie pas la page 404 par Le code source de chaque page contient une métadonnée qui définit le la commande. (42) (66)
n n La page affichée après l’envoi d’un formulaire permet de reprendre n La désinscription aux newsletters est possible depuis le site. (172)
a quitté l’interface (Services), et d’autre part l’interface utilisateur (UI) qui jeu de caractères. (18) Les modalités de récupération d’un bien dématérialisé sont précisées n Si le site est réservé ou destiné à un public spécifique, ce public est
regroupe les aspects visuels et ergonomiques (Perception), le fonctionne- l’adresse URL d’une image ou d’un fichier CSS ou JS pour n n Les produits indisponibles font l’objet d’une différenciation visuelle et directement la navigation. (97)
valider définitivement cette bonne pratique. Dans l’idéal, Un contenu qui doit être restitué dans un lecteur d’écran ne lui est pas avant la commande. (43) textuelle. (67)
ment technique (Technique) et la qualité des contenus du site (Contenus). cette page contiendra un message d’erreur explicatif, un n n La soumission d’un formulaire est suivie d’un message indiquant la n Il est possible de revenir à la page d’accueil depuis toutes les pages. (147)
dissimulé. (19) La modification de la quantité de chaque article, l’ajout et la suppression n L’adresse complète et le numéro de téléphone des sociétés et organisa- n Les archives de newsletters sont disponibles en ligne. (174)
plan du site et le menu principal de navigation. n n Un courriel indiquant la référence de la transaction et les données de la réussite ou non de l’action souhaitée. (98)
tions sont accessibles depuis toutes les pages du site. (123) L’utilisateur est averti des ouvertures de nouvelles fenêtres.
Les bonnes pratiques Opquast n Le contenu et le sens de chaque page ne sont pas altérés lorsque les d’un ou plusieurs articles restent possibles avant la validation définitive commande est envoyé suite à la validation. (68) n (148)
Les fiches sont également présentées dans le livre Qualité web – la réfé- de la commande. (44) n Les processus complexes sont accompagnés de la liste de leurs étapes.
Le projet Opquast (Open Quality Standards) recherche et établit des styles sont désactivés. (20) n La racine du site contient des instructions pour les robots d’indexation. La navigation sur le site ne provoque pas l’ouverture de fenêtres surgis- ment. (175)
(124)
n
bonnes pratiques sont mises au point, discutées et validées dans des ateliers Licence et liens utiles sont indiquées. (45) n Le site propose au moins un moyen de contacter le responsable des n L’étape en cours d’un processus complexe est indiquée. (100)
Le code source de chaque page contient une métadonnée qui en décrit Présentation À fond la forme
façon appropriée dans le code source. (21) réclamations. (70) n n Les mécanismes de fermeture de fenêtres sont visuellement rattachés à
Chaque étape d’un processus complexe permet de revenir à l’étape le contenu. (125)
professionnels de différents métiers et pays, elles n’ont bien sûr pas vocation Creative Commons BY-SA. Vous pouvez les modifier et les utiliser librement, n Les textes pouvant être mis en forme via des styles ne sont pas remplacés n La période et les conditions de validité des offres spéciales et promotions n leur contenu. (150) n La charte graphique est cohérente sur l’ensemble du site. (176)
n Les mécanismes de fermetures de fenêtres sont immédiatement dispo- La taille des polices destinées à l’affichage écran est exprimée en taille
pratique doit remplir les critères suivants : télécharger sur : http://checklists.opquast.com L’utilisateur est averti de la perte d’information en cas d’utilisation de (126) n
n Le site propose au moins un moyen de contacter le modérateur des n nibles. (151) variable et non en taille fixe. (177)
terme des procédures légales d’enregistrement en vigueur dans leur l’historique de son navigateur dans un processus complexe. (102) L’extension utilisée est cohérente avec l’identité, l’activité, la zone géo-
espaces publics. (71) n n Les nouvelles fenêtres dimensionnées et les fenêtres modales sont dotées n Le site propose des styles dédiés à l’impression. (178)
La navigation dans un processus complexe ne provoque pas la perte graphique couverte ou avec le nom de domaine. (127)
n Le code source de chaque page ne contient pas d’éléments détournés à n Les espaces publics proposent au moins un moyen de signaler les abus. n d’un bouton de fermeture explicite. (152)
Le contenu de chaque page est disponible à l’impression sans blocs de
n Le site propose un fichier sitemap indiquant les contenus à explorer. (128)
Les mécanismes de fermetures de fenêtres sont affichés aux mêmes
n
• faire consensus auprès de la communauté consultée. commande. (48)
Le copier-coller est possible dans les champs de formulaire.
n navigation. (179)
n Le code source de chaque page ne contient pas d’éléments ou d’attributs n Les conditions de modération des espaces publics sont indiquées. (73) n (104)
Une famille générique de police est indiquée comme dernier élément de
Opquast accompagnées d’une série de recommandations. de présentation. (25) n Les conditions de financement sont indiquées. (49) lien est proposé vers chacun d’entre eux. (129)
La consultation du site ne redimensionne pas la fenêtre du navigateur.
n
n (154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
Chaque image décorative est dotée d’une alternative textuelle appro- Le site propose au moins un moyen de contact. Les conditions de fonctionnement du service après-vente sont indiquées. Les contenus ou fichiers destinés à des espaces publics peuvent être Les éléments d’une liste déroulante qui peuvent être regroupés le sont L’indicatif international est disponible pour tous les numéros de télé- n Le focus clavier n’est ni supprimé ni masqué. (155)
à satisfaire à des exigences implicites ou explicites. de la création ou de l’analyse d’un site. Même si le respect de toutes n n (26) n n n n
priée. (1) (50) vérifiés avant leur envoi définitif. (74) de manière appropriée. (105) phone. (130) Le site est intégralement utilisable au clavier. (156)
n Le site propose au moins deux moyens de contact. (27) n
hasard. Chaque image-lien est dotée d’une alternative textuelle appropriée. n Les conditions de débit ou d’encaissement sont spécifiées avant la vali- Les informations destinées à des espaces publics peuvent être prévisua- Les listes d’options de formulaires sont présentées dans un ordre identi- Le pays est précisé pour toutes les adresses postales.
n (2)
Les coordonnées postales et téléphoniques de la représentation locale ou
n n n (131)
n dation définitive de la commande. (51) lisées sous la forme où elles seront affichées. (75) fiable. (106)
(158)
cochant ses cases, vous pouvez directement effectuer un audit. n Les objets inclus sont dotés d’une alternative textuelle appropriée. (4) n Les conditions de vente ou d’utilisation sont accessibles depuis toutes les n La langue principale de la page cible d’un hyperlien est identifiable Chaque page affiche une information permettant de connaître son
n Les délais de réponse aux demandes d’information sont indiqués. (30) pages. (53) n La durée des contenus vidéo ou audio est indiquée. (76) n Chaque lien est doté d’un intitulé dans le code source. (107) lorsqu’elle diffère de celle de la page d’origine. (133) n
Rédaction E-commerce emplacement dans l’arborescence du site. (159)
Traduction Logistique n Les contenus générés via les styles sont dotés d’une alternative appro-
Positionnement Accessibilité Hébergement Des fiches détaillées en ligne priée. (5) n Les données contenues dans le Whois du site permettent de le relier n Les informations relatives à la zone de livraison des produits ou de n Le format des fichiers proposés en téléchargement est indiqué. (77) n Le soulignement est réservé aux hyperliens. (108)
n Chaque changement de langue est signalé. (134) Le site propose un moteur de recherche interne.
Stratégie éditoriale
Architecture
E-services
SAV, Chaque bonne pratique est suivie d’un numéro d’identification qui permet directement à son propriétaire. (31) réalisation des services sont indiquées. (54) n (160)
Communication Navigation Conformité W3C n La taille des fichiers internes proposés en téléchargement est indiquée. n Les hyperliens sont visuellement différenciés du reste du contenu. (109) Les liens d’accès aux versions traduites pointent directement vers la
d’accéder à une fiche en ligne. Voici un exemple. n Les pictogrammes typographiques sont dotés d’une alternative appro-
(78)
n n La page des résultats de recherche indique le nombre de résultats, le
priée. (6) Contenus Des contenus clairs et identifiés n Les moyens de paiement acceptés et les procédures correspondantes sont traduction de la page courante. (135) nombre de pages de résultats, et le nombre de résultats par page. (161)
teurs potentiels. Le numéro 208 indique qu’une fiche complète est accessible à l’adresse : n Chaque contenu audio et vidéo est accompagné de sa transcription n Les liens vers les versions équivalentes de la page ou du site sont rédigés Chaque page de résultats de recherche peut être atteint via une adresse
• La perception représente son aptitude à être utilisable et correctement http://checklists.opquast.com/oqs-v3/208 textuelle. (7) n Le titre de chaque page permet d’identifier le site. (32)
n Les horaires et tarifs de fonctionnement des services mis à la disposition de celle de la page d’origine. (79) n Le site n’impose pas d’interdiction ou de restriction à la mise en place
dans leur langue cible. (136) n
des liens entrants. (111) web. (162)
perçu par ses utilisateurs. n Le titre de chaque page permet d’identifier son contenu. (33) des utilisateurs sont indiqués. (56) Les animations, sons et clignotements peuvent être mis en pause.
Exemple de fiche Opquast n L’information n’est pas véhiculée uniquement par la couleur. (8) n (80)
Mobile Un plan du site est accessible depuis chaque page. (163)
Les contenus publicitaires ou sponsorisés sont identifiés comme tels. (34) n Les recours en cas de litige sont indiqués dans les conditions générales n Le survol ou l’activation des hyperliens ne modifie pas la mise en page. Un contexte fréquent, des précautions spécifiques n
n de vente ou d’utilisation. (57) n Le déroulement des animations ne bloque pas la navigation ou l’accès (112)
Les blocs de navigation de même nature sont affichés aux mêmes
• Les services déterminent son aptitude à proposer, accompagner ou Informer l’utilisateur sur l’erreur rencontrée, sur la Les informations relatives aux droits de copie et de réutilisation sont
aux contenus. (81) n Le serveur ne force pas la redirection de la version desktop vers la n
n Les captchas sont accompagnés d’une solution alternative d’accès. n L’adresse et les conditions de retour des produits sont indiquées. n Les hyperliens de même nature ont des couleurs, des formes et des version mobile. (137) emplacements sur toutes les pages. (164)
(10)
accessibles depuis toutes les pages. (35) n (58)
Il est possible de basculer depuis chaque page entre les versions mobile n Les icônes de navigation sont accompagnées d’une légende explicite.
contenus et services) sont indispensables à la qualité d’un site web. Ils sont Modifier la configuration du serveur web pour renvoyer Code Un code propre et robuste n Le site fournit aux utilisateurs la possibilité de connaître les nouveaux n Le mode de dépôt et la procédure de traitement des réclamations sont Le texte des documents PDF internes est sélectionnable. Tous les hyperliens internes du site sont valides.
n
d’importance égale. La valeur ajoutée d’un site réside essentiellement dans l’utilisateur vers une page personnalisée lorsque la contenus ou services. (36) indiqués. (59) n (83) n (114) et desktop du site. (138) (165)
ressource demandée n’existe pas. Si la configuration Les documents PDF internes sont dotés d’une structure de titres. Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu n Les liens provoquant l’ouverture d’un logiciel externe ont un libellé
ses Contenus et Services.
principale du serveur n’est pas directement accessible et n Le code source de chaque page débute par une déclaration de type de
n Les conditions de remboursement sont indiquées. (60) n (84) n n Le site ne bloque pas les fonctionnalités de zoom du navigateur. (139)
Mise en document dont la syntaxe est conforme à celles recommandées par le n Si le site propose un espace personnel ou abonné, il est possible de vers lequel il pointe. (115) explicite. (166)
Si le site n’est pas réservé à un public spécifique, l’accès aux contenus
Apache autorise la création d’un fichier .htaccess indiqués avant la validation de la commande. (61) n Les hyperliens consécutifs sont séparés visuellement. (116) application mobile ne se produisent qu’une seule fois par session. (140) n
n
n

examiné : Une adresse de livraison différente de l’adresse de facturation peut être contenant les données rejetées sont indiqués à l’utilisateur. (93) n Le site propose un ou plusieurs mécanismes dédiés à l’adaptation aux
Avant la visite Pendant la visite Après la visite n Le site n’impose pas de redirection ou de rafraîchissement automatique n L’identité de l’auteur, de la société ou de l’organisation est indiquée. (118) terminaux mobiles. (142) Newsletter Un envoi ne s’improvise pas
�Modifier l’adresse URL afin d’obtenir une erreur 404,
côté client. (14) n L’achat d’un produit ou service est possible sans création de compte. (39) spécifiée. (63) n
n Aucun produit ni service annexe n’est ajouté au panier de commande n L’identité de la personne ou du service responsable des contenus est n Les champs de saisie de type e-mail, URL, téléphone, nombre, recherche, Un lien de désinscription est présent dans chaque newsletter.
caractères aléatoires en fin d’adresse tels que :
n Les dates sont présentées dans des formats explicites. (15) n Le site accepte au moins deux moyens de paiement. (64) rejet sont indiquées à l’utilisateur. (94)
indiquée. (119) mots de passe, heure et date sont dotés du type approprié. (143)
n (169)
http://www.exemple.com/dbvdjb. sans que cette action soit déclenchée par l’utilisateur. (40)
UX En cas de rejet des données saisies dans un formulaire, toutes les don- n La désinscription depuis une newsletter ne demande pas de confirmation
n L’emplacement des blocs de navigation est cohérent dans le code source n La référence de la transaction est affichée au client après la validation n La page d’accueil expose la nature des contenus et services proposés. n Les numéros de téléphone sont activables via le protocole approprié. (144)
de toutes les pages. (16) n La disponibilité des produits est indiquée avant la validation définitive de sa commande. (65) nées saisies peuvent être modifiées par l’utilisateur. (95) n (120)
par courriel. (170)
Le modèle VPTCS est un modèle UX (expérience utilisateur) qui permet de (Apache, iiS, nginx). n Les mentions d’appartenance à un ordre ou groupe professionnel, d’un n Lors de la saisie d’un formulaire réparti sur plusieurs pages, un récapi- Navigation Aider les internautes à trouver ce qu’ils cherchent n L’inscription aux newsletters est soumise à un processus de confirmation.
n Le codage de caractères utilisé est UTF-8. (17)
Le délai de livraison estimé est indiqué avant la validation définitive de n Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page.
différencier d’une part l’expérience utilisateur (UX) qui commence avant �Dans le cas de l’utilisation d’un CMS, ce dernier peut n label ou d’une récompense sont accompagnées d’un lien vers la source. tulatif global est affiché avant l’envoi définitif. (96)
(121)
(171)
la visite du service en ligne (Visibilité) et se termine après que l’utilisateur vous faire croire qu’il ne renvoie pas la page 404 par Le code source de chaque page contient une métadonnée qui définit le la commande. (42) (66)
n n La page affichée après l’envoi d’un formulaire permet de reprendre n La désinscription aux newsletters est possible depuis le site. (172)
a quitté l’interface (Services), et d’autre part l’interface utilisateur (UI) qui jeu de caractères. (18) Les modalités de récupération d’un bien dématérialisé sont précisées n Si le site est réservé ou destiné à un public spécifique, ce public est
regroupe les aspects visuels et ergonomiques (Perception), le fonctionne- l’adresse URL d’une image ou d’un fichier CSS ou JS pour n n Les produits indisponibles font l’objet d’une différenciation visuelle et directement la navigation. (97)
valider définitivement cette bonne pratique. Dans l’idéal, Un contenu qui doit être restitué dans un lecteur d’écran ne lui est pas avant la commande. (43) textuelle. (67)
ment technique (Technique) et la qualité des contenus du site (Contenus). cette page contiendra un message d’erreur explicatif, un n n La soumission d’un formulaire est suivie d’un message indiquant la n Il est possible de revenir à la page d’accueil depuis toutes les pages. (147)
dissimulé. (19) La modification de la quantité de chaque article, l’ajout et la suppression n L’adresse complète et le numéro de téléphone des sociétés et organisa- n Les archives de newsletters sont disponibles en ligne. (174)
plan du site et le menu principal de navigation. n n Un courriel indiquant la référence de la transaction et les données de la réussite ou non de l’action souhaitée. (98)
tions sont accessibles depuis toutes les pages du site. (123) L’utilisateur est averti des ouvertures de nouvelles fenêtres.
Les bonnes pratiques Opquast n Le contenu et le sens de chaque page ne sont pas altérés lorsque les d’un ou plusieurs articles restent possibles avant la validation définitive commande est envoyé suite à la validation. (68) n (148)
Les fiches sont également présentées dans le livre Qualité web – la réfé- de la commande. (44) n Les processus complexes sont accompagnés de la liste de leurs étapes.
styles sont désactivés. (20) n La racine du site contient des instructions pour les robots d’indexation. La navigation sur le site ne provoque pas l’ouverture de fenêtres surgis- ment. (175)
(124)
n
bonnes pratiques sont mises au point, discutées et validées dans des ateliers Licence et liens utiles sont indiquées. (45) n Le site propose au moins un moyen de contacter le responsable des n L’étape en cours d’un processus complexe est indiquée. (100)
Le code source de chaque page contient une métadonnée qui en décrit Présentation À fond la forme
façon appropriée dans le code source. (21) réclamations. (70) n n Les mécanismes de fermeture de fenêtres sont visuellement rattachés à
Chaque étape d’un processus complexe permet de revenir à l’étape le contenu. (125)
professionnels de différents métiers et pays, elles n’ont bien sûr pas vocation Creative Commons BY-SA. Vous pouvez les modifier et les utiliser librement, n Les textes pouvant être mis en forme via des styles ne sont pas remplacés n La période et les conditions de validité des offres spéciales et promotions n leur contenu. (150) n La charte graphique est cohérente sur l’ensemble du site. (176)
n Les mécanismes de fermetures de fenêtres sont immédiatement dispo- La taille des polices destinées à l’affichage écran est exprimée en taille
pratique doit remplir les critères suivants : télécharger sur : http://checklists.opquast.com L’utilisateur est averti de la perte d’information en cas d’utilisation de (126) n
n Le site propose au moins un moyen de contacter le modérateur des n nibles. (151) variable et non en taille fixe. (177)
terme des procédures légales d’enregistrement en vigueur dans leur l’historique de son navigateur dans un processus complexe. (102) L’extension utilisée est cohérente avec l’identité, l’activité, la zone géo-
espaces publics. (71) n n Les nouvelles fenêtres dimensionnées et les fenêtres modales sont dotées n Le site propose des styles dédiés à l’impression. (178)
La navigation dans un processus complexe ne provoque pas la perte graphique couverte ou avec le nom de domaine. (127)
n Le code source de chaque page ne contient pas d’éléments détournés à n Les espaces publics proposent au moins un moyen de signaler les abus. n d’un bouton de fermeture explicite. (152)
Le contenu de chaque page est disponible à l’impression sans blocs de
n Le site propose un fichier sitemap indiquant les contenus à explorer. (128)
Les mécanismes de fermetures de fenêtres sont affichés aux mêmes
n
• faire consensus auprès de la communauté consultée. commande. (48)
Le copier-coller est possible dans les champs de formulaire.
n navigation. (179)
n Le code source de chaque page ne contient pas d’éléments ou d’attributs n Les conditions de modération des espaces publics sont indiquées. (73) n (104)
Une famille générique de police est indiquée comme dernier élément de
Opquast accompagnées d’une série de recommandations. de présentation. (25) n Les conditions de financement sont indiquées. (49) lien est proposé vers chacun d’entre eux. (129)
La consultation du site ne redimensionne pas la fenêtre du navigateur.
n
n (154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
(158)
(78)
Mobile
(10)
Mise en
n
n

examiné :
UX
(120)
(17)
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
(158)
(78)
Mobile
(10)
n Le site ne bloque pas les fonctionnalités de zoom du navigateur.
(139)
Mise en
n
n

examiné :
UX
(120)
(17)
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Bonnes pratiques
Le modèle VPTCS les bonnes pratiques n’est pas obligatoire, mieux vaut ne rien laisser au n Le site propose au moins deux moyens de contact. (27) n Le site est intégralement utilisable au clavier. (156)
hasard. n Chaque image-lien est dotée d’une alternative textuelle appropriée. (2) n Les conditions de débit ou d’encaissement sont spécifiées avant la vali- n Les informations destinées à des espaces publics peuvent être prévisua- n Les listes d’options de formulaires sont présentées dans un ordre identi- n Le pays est précisé pour toutes les adresses postales. (131)
n Les coordonnées postales et téléphoniques de la représentation locale ou dation définitive de la commande. (51) lisées sous la forme où elles seront affichées. (75) fiable. (106) n La navigation au clavier s’effectue dans un ordre prévisible. (157)
(158)
n Le format des fichiers proposés en téléchargement est indiqué. (77) n Le soulignement est réservé aux hyperliens. (108)
Stratégie éditoriale E-services priée. (5) n Les données contenues dans le Whois du site permettent de le relier n Les informations relatives à la zone de livraison des produits ou de n Chaque changement de langue est signalé. (134)
(78)
Mobile
n Les captchas audio peuvent être réécoutés à volonté. (9) n Les contenus publicitaires ou sponsorisés sont identifiés comme tels. (34)
n Les captchas sont accompagnés d’une solution alternative d’accès. (10) n Les informations relatives aux droits de copie et de réutilisation sont n Les hyperliens de même nature ont des couleurs, des formes et des version mobile. (137) emplacements sur toutes les pages. (164)
Les cinq points de ce modèle VPTCS (visibilité, perception, technique, sur un éventuel problème lié à sa connexion. accessibles depuis toutes les pages. (35) n L’adresse et les conditions de retour des produits sont indiquées. (58)
ses Contenus et Services.
principale du serveur n’est pas directement accessible et n Le code source de chaque page débute par une déclaration de type de
n Les conditions de remboursement sont indiquées. (60) n Les documents PDF internes sont dotés d’une structure de titres. (84) n Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu
Mise en document dont la syntaxe est conforme à celles recommandées par le n Si le site propose un espace personnel ou abonné, il est possible de vers lequel il pointe. (115) explicite. (166)
n
n
examiné :
UX
http://www.exemple.com/dbvdjb. n Les dates sont présentées dans des formats explicites. (15) sans que cette action soit déclenchée par l’utilisateur. (40) indiquée. (119) mots de passe, heure et date sont dotés du type approprié. (143)
(120)
n Le codage de caractères utilisé est UTF-8. (17) n Les mentions d’appartenance à un ordre ou groupe professionnel, d’un n Lors de la saisie d’un formulaire réparti sur plusieurs pages, un récapi- Navigation Aider les internautes à trouver ce qu’ils cherchent n L’inscription aux newsletters est soumise à un processus de confirmation.
différencier d’une part l’expérience utilisateur (UX) qui commence avant �Dans le cas de l’utilisation d’un CMS, ce dernier peut n Le délai de livraison estimé est indiqué avant la validation définitive de label ou d’une récompense sont accompagnées d’un lien vers la source. tulatif global est affiché avant l’envoi définitif. (96) n Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page.
(121)
(171)
dissimulé. (19)
(124)
le contenu. (125)
(154)
substitution. (180)
G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

mémento
web
R21
R41
R60
des styles . (182) (207)
(185)
acceptent. (211)
R46
n Le site propose une procédure de réinitialisation du mot de passe. (187)
tation. (213)
Auditer un CMS
R27
n Les scripts du site sont minifiés. (215)
Nous vous conseillons d’installer le CMS et d’évaluer le site avant même R5 Le code source des pages est valide au regard de la grammaire choisie. R48 L’utilisateur peut choisir le nombre de résultats de recherche affichés par Frank Taillandier • Marie Destandau • Matthieu Blondel • Sébastien Delorme
Sites
n Les certificats de sécurité sont signés et en cours de validité. (191)
n L’adresse du site et de ses sous-domaines fonctionnent avec ou sans Suivre la production d’un site R30 L’utilisateur est averti du verrouillage majuscule de son clavier lors de la R70 Le site ne comporte pas de tableaux de données complexes.
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
n Les informations sur la sécurité des transactions sont indiquées. (196)
n Le site propose au moins un lien vers chaque fil de syndication. (221) fonctions natives des agents utilisateurs (clic droit, sélection de texte, R34
n La procédure d’accès et de rectification des données personnelles est n Les cellules des tableaux de données sont reliées à leurs en-têtes. (222)
Pour faciliter la détection des erreurs en amont, chaque bonne pratique L’auteur de chaque article est identifiable. R35 Les informations relatives à l’audience et à la fréquentation du site sont
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
(185)
acceptent. (211)
R46
tation. (213)
Auditer un CMS
R27
Sites
tions identiques sont cohérentes à travers le site.
R7 Les zones principales de la page sont identifiées dans le code source. • Jérémie Bouillon • Michel Brack • Frédéric Cavazza • Mathieu Charrier
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
des styles . (182) (207)
(185)
acceptent. (211)
R46
tation. (213)
Auditer un CMS
R27
Sites
Les éléments avec une sémantique native sont préférés.
n Un dispositif sensibilise l’utilisateur sur le degré de sécurisation du mot externes. (216) autant de défauts qui pourront se retrouver dans les futurs sites. R6
Formulaires R49 Les alternatives textuelles, étiquettes et libellés de liens ayant des fonc- Tableaux Version 1 (2004) : Ned Baldessin • Vincent Bénard • Christophe Bonnet
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
n Les contenus sont présentés avec un contraste suffisant par rapport à n Le serveur envoie les informations permettant la mise en cache des R21 R41 R60
complète des 226 bonnes pratiques. La liste des points conformes montre ou l’autre de ces exigences. Cela ne veut pas du tout dire que celles-ci n’ont matiquement modifier la mise en page. signalées comme telles.
leur arrière-plan. (181) contenus. (206) d’Opquast, et à tous les partenaires et soutiens du projet :
Les mises en majuscules à des fins décoratives sont effectuées à l’aide Le serveur envoie un code HTTP 404 pour les ressources non trouvées. les pistes d’amélioration.
n n recommandé de les mettre en place. Nous les avons donc conservées et R22 Une métadonnée indique l’URL de référence des contenus proposés sous R42 Le sens de lecture du contenu est indiqué lorsqu’il diffère de celui par d’une justification.
des styles . (182) (207)
Le serveur envoie une page d’erreur 404 personnalisée. Renforcer un cahier des charges vous permettre d’améliorer de manière importante la qualité de votre site. R62 Le serveur est configuré pour ne pas renvoyer d’informations sur les
n Les styles ne justifient pas le texte. (183) n (208)
n Le menu principal de navigation figure sur les pages d’erreur personna- R1 Si un contenu est proposé sous une forme inaccessible, une version par les menus).
lisées. (210) Piloter un parc de site alternative accessible est mise à disposition. R24 Les listes ordonnées et non ordonnées des documents PDF internes sont R63 Le serveur envoie un code 301 pour le contenu ayant changé d’adresse Clément • Christophe Clouzeau • Valery-Xavier Lentz • Claire Bizingre •
n Le serveur transmet des contenus compressés aux clients qui les Une description étendue correctement associée complète l’alternative de reproduction, l’accueil et le plan du site. Julie Mathiau • François D. • Dario Spagnolo • Frédéric Kayser Nathalie •
L’identité des prestataires impliqués dans les transactions est précisée. doit obtenir des indicateurs pour l’ensemble de ses sites. Une agence web R2
n (185)
acceptent. (211)
La politique de confidentialité et de respect de la vie privée est accessible Les captchas audio peuvent être mis en pause. teur peuvent être ouverts en une seule fois. R65 Les appels de scripts ne sont pas dupliqués.
n au jeu de caractères employé. (212) niveau, pour une bonne pratique ou pour une rubrique donnée) permet de R3
R46
tation. (213)
R27 Verschelde • Nicolas Hoizey • Mathias Poujol-Rost • Vincent Valentin • Natha-
Auditer un CMS R4 Le code source de chaque page ne comporte pas d’erreur portant sur contenus sonores, visuels, animés et médias synchronisés. R67 Les appels aux scripts sont placés après le contenu. lie Rosenberg • Thierry Régagnon • Pascale Lambert-Charreteur • Ghislain
n Les mots de passe peuvent être choisis ou changés par l’utilisateur. (188) Les feuilles de styles du site sont minifiées. (214) Chaque résultat de recherche est accompagné d’un extrait du contenu. Sillaume • Armand Abric • Vincent Aniort • Leo Ludwig • Corinne Schillinger
n La capacité d’un CMS (Système de gestion de contenus) à respecter les l’arbre du document ou la syntaxe des balises et attributs.
R28 Les contenus multimédias sont sous-titrés.
R47
R68 Le serveur envoie des pages d’erreurs personnalisées. • Claire Bizingre • Jean-Paul Chiron • David Lafon • Véronique Lapierre •
Les mots de passe choisis par l’utilisateur admettent les caractères impri- bonnes pratiques qualité peut s’avérer décisive pour la qualité de vos sites.
n n Les scripts du site sont minifiés. (215)
Sites
Un dispositif sensibilise l’utilisateur sur le degré de sécurisation du mot Les éléments avec une sémantique native sont préférés.
n externes. (216) autant de défauts qui pourront se retrouver dans les futurs sites. R6
Formulaires R49 Les alternatives textuelles, étiquettes et libellés de liens ayant des fonc- Tableaux Version 1 (2004) : Ned Baldessin • Vincent Bénard • Christophe Bonnet
n L’adresse du site et de ses sous-domaines fonctionnent avec ou sans Suivre la production d’un site L’utilisateur est averti du verrouillage majuscule de son clavier lors de la R70 Le site ne comporte pas de tableaux de données complexes.
préfixe www. (217)
R30
Plus les erreurs sont détectées tard dans le processus de production, plus R8 Les citations sont balisées de façon appropriée. saisie d’un champ sensible à la casse. R50 L’accès à chaque contenu temporisé peut être mis en pause ou prolongé.
n Les données sensibles ne sont pas transmises en clair dans les URL. (192) elles sont difficiles et coûtent cher à corriger.
Syndication Des flux pour diffuser les contenus Froidure • Pierre Goiffon, • Julien Heberte • Nicolas Hoffmann • Stéphane
(193)
Coût des erreurs
laire.
Les en-têtes envoyés par le serveur désactivent la détection automatique
n R11 Le site n’emploie aucune technique destinée à bloquer ou gêner l’affi- de management (6 à 10) pour définir votre stratégie qualité web.
Philippe Worontzof.
Présentation
Le serveur indique le type MIME de chaque ressource. (195) clavier n’est pas altérée.
n n Les hyperliens contenus dans les fils de syndication sont absolus. (220)
Les informations sur la sécurité des transactions sont indiquées. fonctions natives des agents utilisateurs (clic droit, sélection de texte, Le lien d’activation de l’aide contextuelle à un champ de formulaire est importantes ? Découvrez l’ensemble des briques du projet Opquast.
n (196)
n Le site propose au moins un lien vers chaque fil de syndication. (221) R34
n L’objectif des cookies et les limitations inhérentes à leur refus sont expli- agissent sur la totalité de la page.
qués. (197) Tableaux Idéal pour présenter les données… tabulaires Spécifications Prototypes Design Intégrations Développement Vie du site
3 • Un contenu unique pour plusieurs supports.
Contenus Identification Exploitez les mécanismes d’adaptation de présentation en fonction du media (feuilles
Les cellules des tableaux de données sont reliées à leurs en-têtes. Les styles en ligne ne sont utilisés que s’ils ne peuvent pas être de styles, screen, print, media queries...) avant de créer des versions spécifiques.
n La procédure d’accès et de rectification des données personnelles est n (222)
R54
décrite. (198)
Les titres des tableaux de données sont renseignés. a été associée à différents aspects de la production de sites. Il est ainsi accompagnées de la période couverte et du mode de mesure. Développez d’abord vos applications sans JavaScript ni Ajax pour qu’elles fonc-
n (223)
La création d’un compte est soumise à un processus de confirmation. R14 Des sources (citations, lien vers une référence...) légitiment les informa- R55 Le contenu textuel reste lisible avec une taille de caractères augmentée • Opquast check-lists : les check-lists des pros du Web
n (199) n La linéarisation des tableaux utilisés pour la mise en page ne nuit pas production d’un site. Les listes ainsi obtenues constituent des check-lists tions présentées et/ou leurs auteurs. R36 La syntaxe des URL est homogène sur l’ensemble du site. d’un facteur 2 dans le navigateur. 5 • Se faire aider par les machines. https://checklists.opquast.com/fr/
La création de compte est possible sans recours à un système d’identifi- Un seul jeu d’identifiants est nécessaire pour accéder à l’ensemble des faire gagner du temps. Ces outils fonctionnent vite et de façon répétable. • Opquast reporting, un outil pour faire vos audits qualité Web
n n Les tableaux de données ne sont pas remplacés par des images. (225)
services proposés.

Les tableaux de données ne sont pas simulés à l’aide de texte mis en R16 Les contenus éditoriaux qui le nécessitent sont associés à une date ou
n Les comptes ou abonnements ouverts en ligne peuvent être fermés par n Adressez-vous à l’une des agences partenaires Opquast ; son responsable une période de publication. Internationalisation R57 Le site n’impose pas d’effets de flash. teurs, le développement aux développeurs, le webdesign aux designers...
4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
Le serveur envoie les informations d’activation de protection cross site la période et le mode de mesure. R39 Les formulaires et les messages associés sont rédigés dans une langue automatique à une newsletter.
n obligatoire. Il s’agit simplement d’un aide-mémoire sur les fondamentaux de la La maîtrise des bonnes pratiques, des objectifs associés à chacune d’entre
unique.
Le serveur envoie les informations indiquant les domaines autorisés à

injections.
n qu’il a déjà effectuées, les meilleurs professionnels du Web ne sont pas à l’abri des projets de sites. Vous pouvez vous former pour l’obtention de la certi- R20 Le contenu des pages ne contient pas de mots-clés dissimulés.
R40
n Le site propose un mécanisme de sécurité permettant de restreindre les mettre en valeur. Mémento HTML5. R. RIMELÉ
lancer votre site ou de le laisser en l’état si les défauts que vous avez détectés ne
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
des styles . (182) (207)
(185)
acceptent. (211)
R46
tation. (213)
Auditer un CMS
R27
Sites
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
des styles . (182) (207)
(185)
acceptent. (211)
R46
tation. (213)
Auditer un CMS
R27
Sites
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

mémento
web
R21
R41
R60
(185)
acceptent. (211)
R46
Auditer un CMS
R27
Sites
(193)
Coût des erreurs
laire.
Philippe Worontzof.
Présentation
R54
décrite. (198)
services proposés.

4e édition
Élie Sloïm
ISBN : 978-2-212-14442-0
la page.
Laurent Denis
R18 R58
unique.
injections.
R40
7e
G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Sites Web Les Bonnes Pratiques Ed4 v1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Sites Web Les Bonnes Pratiques Ed4 v1

Transféré par

Droits d'auteur :

Formats disponibles

Bonnes pratiques Recommandations Recommandations Recommandations

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Le contenu de chaque page est organisé selon une structure de titres et

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

G00000_SiteWeb_02_OK.indd 1-9 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

Le serveur envoie les informations indiquant les domaines autorisés à

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Conception : Nord Compo © Groupe Eyrolles 2017

G00000_SiteWeb_02_OK.indd 10-18 05/10/2016 09:08

Vous aimerez peut-être aussi