En 2e partie de l’évaluation des sites Web des bannières de pharmacie au Québec au niveau du design et de l’ergonomie, voici un volet un peu plus technique.

J’aime beaucoup le guide des bonnes pratiques Opquast (www.opquast.com). C’est un outil très intéressant et puissant pour évaluer la qualité d’un site Web. Un sous ensemble de 20 bonnes pratiques sous les rubriques accessibilité, code, formulaires, page d’accueil, navigation, URL, hyperliens et titres permettent de bien évaluer la qualité technique d’un site Web.

Notre échantillon : Jean-Coutu, Uniprix, Pharmaprix, Familiprix, Proxim et Brunet.

RESPECT DES NORMES ET BONNES PRATIQUES

www.uniprix.com

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Non respectée. Les images de la page carrières n’ont pas le texte alternatif.

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (px) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Conforme.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, la case code postale devrait utiliser une balise « label » plutôt que la balise « p » . Cela dit, les balises « label » ont été utilisées dans le cas d’une case à cocher ce qui est très bien.

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Conforme.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Conforme. Le site utilise les balises « h1 » et « h2 » .

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non applicable

HYPERLIENS
Le soulignement est réservé aux hyperliens : Conforme.

Les hyperliens sont visuellement différenciés du reste du contenu : Conforme.

Tous les hyperliens internes du site sont valides : Conforme.

Les hyperliens texte visités et non visités sont différenciés : Conforme. Changement de couleur!

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Conforme.

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Conforme. Il y a un changement visuel dans les menus nous permettant de déduire la position de la page dans la structure du site. Cela dit, un fil d’Ariane serait beaucoup plus efficace.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Le site de propose pas de page 404 personnalisée.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Non respectée. 122K

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Conforme.

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme

Les URL internes du site ne contiennent pas d’espaces : Conforme

www.brunet.ca

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Non respectée. Les images de la page d’accueil n’ont pas le texte alternatif.

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (px) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Conforme.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, la case de recherche devrait utiliser une balise « label » plutôt que la balise « p » . Cela dit, les balises « label » ont été utilisées dans le formulaire de renouvellement de prescription ce qui est excellent.

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Conforme. Il faudrait par contre que cette balise « meta » apparaisse avant la balise « title » pour que le titre de la page soit supporté par le même jeu de caractères.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Conforme.

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non respectée. Le formulaire de question à un pharmacien ne respecte pas cette bonne pratique. Par contre, le formulaire de renouvellement de prescription le respecte.

HYPERLIENS
Le soulignement est réservé aux hyperliens : Non applicable. Le soulignement n’est pas utilisé.

Les hyperliens sont visuellement différenciés du reste du contenu : Conforme.

Tous les hyperliens internes du site sont valides : Conforme.

Les hyperliens texte visités et non visités sont différenciés : Non respectée.

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Conforme.

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Non respectée. L’utilisation d’un fil d’Ariane aiderait à la navigation.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Le site ne propose pas de page 404 personnalisée.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Conforme. 59K

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Non respectée. Toutes les pages ont le même titre soit « Brunet ».

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme.

Les URL internes du site ne contiennent pas d’espaces : Conforme.

www.jeancoutu.com

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Conforme

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (px) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Conforme. Les liens dans les animations Flash ne sont pas disponibles avec le clavier seulement.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, le formulaire de renouvellement de prescription devrait utiliser des balises « label » plutôt que des balises « span » .

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Conforme.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Non respectée. Le site utilise la balise « h2 » mais devrait utiliser « h1 » et « h3 » à la place de « strong »

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non respectée. Dans le formulaire de renouvellement de prescription, on connait les champs obligatoires seulement lorsqu’on soumet nos informations et que le formulaire est validé par le serveur.

HYPERLIENS
Le soulignement est réservé aux hyperliens : Non applicable. Le site n’utilise pas le soulignement.

Les hyperliens sont visuellement différenciés du reste du contenu : Non respecté. Ce n’est pas toujours évident comme dans le cas du lien « Cliquez ici » dans la page de renouvellement d’ordonnance. Au premier coup d’oeil, le texte et le lien sont similaires.

Tous les hyperliens internes du site sont valides : Conforme.

Les hyperliens texte visités et non visités sont différenciés : Non respectée. Il faut idéalement faire un changement de couleur, permettant au visiteur de savoir s’il a déjà visité la page ou non.

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Conforme. Il faut faire attention aux liens du style « Cliquez ici » car dans une liste de liens internes, tous les liens « Cliquez ici » seraient ambigus.

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Non respectée. La présence d’un fil d’Ariane aiderait la navigation.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Au moins, le site présente une page 404 personnalisée qui permet de revenir vers la page d’accueil.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Non respectée. Plus de 300K.

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Conforme.

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme

Les URL internes du site ne contiennent pas d’espaces : Conforme

www.pharmaprix.ca

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Non respectée. Les images de la page d’accueil n’ont pas le texte alternatif.

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (px) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Conforme.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, le champ Recherche devrait avoir une balise « label » associée à la case.

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Non respectée.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Non respectée. Le site n’utilise pas les balises « h1 » et « h2 » .

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non applicable

HYPERLIENS
Le soulignement est réservé aux hyperliens : Conforme.

Les hyperliens sont visuellement différenciés du reste du contenu : Conforme.

Tous les hyperliens internes du site sont valides : Conforme.

Les hyperliens texte visités et non visités sont différenciés : Non respectée. Un changement de couleur serait utile.

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Non respectée. Le site utilise à quelques reprises des libellés de type « Cliquez ici »

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Non respectée. L’ajout d’un fil d’Ariane aiderait à la navigation.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme. En cliquant sur le logo. L’ajout d’un lien « Accueil » en texte serait bien.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Le site ne propose pas de page 404 personnalisée.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Non respectée. 116K.

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Conforme.

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme

Les URL internes du site ne contiennent pas d’espaces : Conforme

www.familiprix.com

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Non respectée. Un non voyant ne pourra pas faire la différence entre la publicité du centre photo, celle du CAA et les logos d’Opération Enfant Soleil et d’Apotex

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (pt) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Non respectée. Les liens « Lire la suite » et « Archives » sur la page d’accueil ne fonctionne qu’avec la souris.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, la case recherche devrait utiliser une balise « label » plutôt que la balise « span » .

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Non respectée.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Non respectée. Le code source ne contient aucune balise de titre. Tous les titres sont en « span »

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non applicable

HYPERLIENS
Le soulignement est réservé aux hyperliens : Conforme. Certains liens utilisent le soulignement, d’autres non…

Les hyperliens sont visuellement différenciés du reste du contenu : Non respecté. Les liens dans la liste de maladies ressemblent étrangement aux titres dans les fiches de maladies.

Tous les hyperliens internes du site sont valides : Conforme

Les hyperliens texte visités et non visités sont différenciés : Non respectée. Il faut idéalement faire un changement de couleur, permettant au visiteur de savoir s’il a déjà visité la page ou non.

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Conforme. Il faut faire attention aux liens du style « Lire la suite » car dans une liste de liens internes, tous les liens « Lire la suite » seraient ambigus.

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Non respectée. La présence d’un fil d’Ariane aiderait la navigation.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme. En cliquant sur le logo Familiprix dans la barre de menu. Il serait tout de même idéal d’avoir un lien texte « Accueil » quelque part.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Le site n’a pas de page 404 personnalisée.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Non respectée. 128K.

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Non respectée. Toutes les pages présentent le même titre. Un titre personnalisé est pratique pour les pages pour impression mais également pour améliorer le référencement.

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme

Les URL internes du site ne contiennent pas d’espaces : Conforme

www.essaim.ca

ACCESSIBILITÉ
Le contenu alternatif de toutes les images est correctement indiqué : Non respectée. Les images de la page d’accueil n’ont pas le texte alternatif.

La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe : Non respectée. Utilisation du (px) plutôt que le pourcentage (%) ou (em)

La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier : Non respectée. Le menu est construit à partir du JavaScript.

Le site n’emploie pas la technique des frames : Conforme.

Chaque champ de formulaire est associé à une étiquette qui lui est propre : Non respectée. Par exemple, le formulaire de contact devrait utiliser des balises « label » plutôt que mettre le contenu directement dans des balises « td » .

CODE
Le code source des pages contient les informations relatives au jeu de caractères employé : Conforme.

Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée : Non respectée. Le site n’utilise pas les balises « h1 » à « h6 » .

FORMULAIRES
Les champs obligatoires des formulaires sont indiqués : Non respectée. Le formulaire de contact dans la page Nous Joindre n’indique pas les champs obligatoires.

HYPERLIENS
Le soulignement est réservé aux hyperliens : Conforme.

Les hyperliens sont visuellement différenciés du reste du contenu : Conforme.

Tous les hyperliens internes du site sont valides : Non respectée. Lorsque je suis dans une fiche de maladie dans l’encyclopédie médicale, avec Firefox, certains menus ne fonctionnent plus. De plus, certains liens ne fonctionnent plus dans la section Liens Pratiques.

Les hyperliens texte visités et non visités sont différenciés : Non respectée. Un changement de couleur serait nécessaire.

Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe : Non respectée. L’utilisation de liens du style « Cliquez ici » n’est pas une bonne pratique, à moins que l’attribut « title » soit spécifié.

NAVIGATION
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site : Non respectée. L’ajout d’un fil d’Ariane améliorerait la navigation.

Il est possible de revenir à la page d’accueil depuis toutes les pages : Conforme.

Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée : Non respectée. Le site ne propose pas de page 404 personnalisée.

PAGE D’ACCUEIL
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko : Non respectée. Plus de 400K.

TITRE
Chaque page comporte un titre significatif et représentatif de son contenu : Non respectée. Toujours le même titre sur toutes les pages : « Proxim – Votre destination bien-être »

URL
L’adresse du site fonctionne avec ou sans préfixe www : Conforme.

Les URL internes du site ne contiennent pas d’espaces :Conforme.

Pour ce qui est du respect des standards du W3C, aucun site ne respecte leur spécification HTML ou XHTML et seulement Jean-Coutu et Familiprix respecte la spécification CSS.

Jean-Coutu, Uniprix et Brunet font une bonne utilisation de la technologies CSS pour la conception de leurs pages Web. Les 3 autres utilisent des tableaux pour la mise en page de leur information ce qui constitue une mauvaise pratique.

Occupant la 3e position du palmarès des 150 entreprises les plus respectées des québécois selon la revue Commerce, Le Groupe Jean-Coutu a lancé il y a quelques semaines, une nouvelle version de son site Web. QuiboWeb en profite pour vous présenter, sous 4 volets techniques, une évaluation des principales bannières en pharmacie au Québec soit : Jean-Coutu, Uniprix, Pharmaprix, Familiprix, Proxim et Brunet.

DESIGN ET UTILISABILITÉ WEB

www.familiprix.com

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 800 X 600
Polices de caractère : 3 polices dont 1 accessible pour le web (arial), grosseur standard, polices sans empattements
Palette de couleurs : Accessible pour les daltoniens, bon agencement, bon contraste
Gabarit : bon alignement, bon espacement, emphase sur la mascotte et le service photo
Qualité graphique : Compression normale des images, bonne lisibilité
Objectif du site : Infrmer sur les nouveautés, les dossiers et quizz ainsi que sur les promos en vigueur
Repérage : Impécable!
Iconographie : standard et intuitive
Perception : liens et boutons intuitifs, rollover
Compréhension : Facile
Efficacité : Rapide et facile
Mémorisation : Aucun besoin
Gestion des erreurs : Affiche les erreurs et les solutions
Aspect général : Style corporatif vivant et simpliste, inspire la confiance, la simplicité et le bien-être

POINTS FAIBLES
Résolution d’écran : Une barre de défilement apparaît horizontalement avec la résolution 800 X 600
Perception : Manque un peu de cohérence au niveau des styles des liens et boutons

www.jeancoutu.com

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 1024 X 768
Polices de caractère : 2 polices dont 1 accessible pour le web (arial), grosseur standard, polices sans empattements
Palette de couleurs : bon agencement, bon contraste
Gabarit : Alignement et espacement uniforme
Qualité graphique : Compression normale des images, bonne lisibilité
Objectif du site : Afficher son identité, ses valeurs d’entreprise et ses nouveautés
Repérage : Facile grâce aux menus
Iconographie : intuitive (flèches)
Perception : liens et boutons intuitifs, cohérence dans les couleurs des liens et des rollovers
Compréhension : Facile
Efficacité : Rapide et facile
Mémorisation : Aucun besoin
Gestion des erreurs : Affiche les erreurs et les solutions
Aspect général : Style corporatif simpliste et doux, inspire la confiance

POINTS FAIBLES
Palette de couleurs : Accessibilité moyenne pour les daltoniens (rollover des menus)
Perception : Manque quelques rollovers

www.uniprix.com

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 800 X 600
Polices de caractère : 3 polices dont 1 accessible pour le web (arial), grosseur standard, polices sans empattements
Palette de couleurs : Accessible pour les daltoniens, bon agencement, bon contraste
Gabarit : Alignement et espacement uniforme, mise en évidence d’une seule publicité
Qualité graphique : Compression normale des images, bonne lisibilité
Objectif du site : Afficher les promos, circulaire et services en ligne
Repérage : Facile grâce aux menus
Iconographie : (ne s’applique pas)
Compréhension : Facile
Efficacité : Rapide et facile
Mémorisation : Aucun besoin
Gestion des erreurs : Affiche les erreurs et les solutions
Aspect général : Style corporatif très carré, inspire la dureté et le conventionnel, homogénéité

POINTS FAIBLES
Gabarit : manque d’aération
Qualité graphique : Petits titres bleus flous, images obliques pixelisées
Perception : Manque d’homogénéité dans le style des liens et des boutons, aucun rollover ou presque
Aspect général : Manque de finition, effet «pizza» sur la page d’accueil

www.brunet.ca

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 800 X 600
Polices de caractère : 1 police accessible pour le web (trebuchet), grosseur standard, police sans empattements
Palette de couleurs : Accessible pour les daltoniens, bon agencement, bon contraste
Gabarit : bon alignement, bon espacement, emphase sur l’information et les nouvelles
Qualité graphique : Compression normale des images
Objectif du site : Conseiller, informer et afficher les promos en vigueur
Iconographie : standard et intuitive
Perception : liens et boutons intuitifs
Compréhension : Facile
Efficacité : Moyenne
Gestion des erreurs : Affiche les erreurs et les solutions
Aspect général : Style corporatif épuré, sobre et doux, inspire la confiance et la stabilité

POINTS FAIBLES
Résolution d’écran : Une barre de défilement apparaît horizontalement avec la résolution 800 X 600
Qualité graphique : Manque de visibilité à cause du champs défilant (pour afficher le texte)
Repérage : Désuet à quelques endroits parce qu’il n’y a pas de fil d’arianne
Mémorisation : Obligatoire à certain endroit
Perception : manque de cohérence dans les styles des liens et des boutons, manque des rollovers

www.essaim.ca

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 800 X 600
Polices de caractère : 3 polices dont 1 accessible pour le web (arial), grosseur standard, polices sans empattements
Palette de couleurs : bon agencement, bon contraste
Gabarit : bon espacement, emphase sur la photo
Qualité graphique : bonne lisibilité
Objectif du site : Afficher les thèmes, la carte privilège et le service photo
Iconographie : standard et intuitive
Compréhension : Facile
Efficacité : Moyenne
Gestion des erreurs : Affiche les erreurs et les solutions
Aspect général : Style corporatif doux et artistique, inspire le bien-être, la confiance et la simplicité

POINTS FAIBLES
Gabarit : alignement incertain dans certain cas
Qualité graphique : compression des images trop élevée à certain endroit
Repérage : Désuet!!
Mémorisation : Obligatoire à certain endroit
Perception : manque de cohérence dans les boutons et liens, manque des rollovers
Aspect général : Manque de finition à certain endroit

www.pharmaprix.ca

POINTS FORTS
Résolution d’écran : Adapté pour la résolution 800 X 600
Polices de caractère : 2 polices dont 1 accessible pour le web (arial), grosseur standard, polices sans empattements
Palette de couleurs : Accessible pour les daltoniens, bon agencement, bon contraste
Gabarit : Alignement et espacement uniforme
Qualité graphique : Compression normale des images, bonne lisibilité
Objectif du site : Afficher les promos, cartes de points, catalogue, documentation sur la santé
Iconographie : (ne s’applique pas)
Compréhension : Facile
Efficacité : Rapide et facile
Aspect général : Style corporatif carré mais doux, inspire la douceur et la beauté

POINTS FAIBLES
Résolution d’écran : Une barre de défilement apparaît horizontalement avec la résolution 800 X 600
Gabarit : Aucune mise en évidence en particulier sur la page d’accueil
Repérage : Désuet dans la section «Life brand», aucun fil d’arianne
Mémorisation : Besoin dans la section «Life brand»
Perception : Manque d’homogénéité dans le style des liens et des boutons, manque certain rollover
Gestion des erreurs : Message d’erreurs en anglais!
Aspect général : Manque de finition, effet «pizza» sur la page d’accueil

Suite à un intérêt évident à propos de ma première étude qui évaluait, selon le guide Opquast, la qualité des sites Web des 3 principaux partis politiques du Québec, je viens fermer le dossier en vous présentant l’évaluation des sites du Parti Vert et de Québec Solidaire. Il s’agit d’une évaluation en surface en utilisant le Guide de bonnes pratiques Opquast, en considérant le même sous-ensemble de bonnes pratiques que j’ai utilisé pour l’évaluation des 3 autres sites Web, soit environ 65% des bonnes pratiques listées dans le guide Opquast. Question de rendre cette chronique plus facile à lire, je présenterai seulement les points qui ne respectent pas la norme de l’industrie pour l’un ou l’autre des 2 sites évalués.

Je tiens à préciser que par cette étude, je ne prends aucune position pour un parti ou pour un autre. La politique n’étant pas mon domaine, c’est la qualité des sites Web qui me préoccupe.

Résumé

L’étude suivante peut être longue à lire. Le contenu est également très technique. Voici un court résumé des résultats en considérant que les responsables des sites Web des différents partis ont eu la chance d’apporter des modifications entre le moment de l’évaluation et l’instant même que vous lisez l’article.

Les résultats sont impressionnants, je rappelle pour fin de comparaison les notes qu’avaient obtenues les sites de l’ADQ, le PLQ et le PQ.

L’évaluation Opquast a donné les résultats suivants :

• ADQ : 47%
• PLQ : 57%
• PQ : 56%
• Parti Vert : 68%
• Québec Solidaire : 68%

Les sites du parti Vert et de Québec Solidaire sont tous les 2 conçus à l’aide du CMS (Content Management System – Outil de gestion de contenu) Open Source Drupal, tout comme le site du PQ. Contrairement aux 3 autres sites, l’utilisation des vidéos se fait plus modeste. Québec Solidaire utilise Youtube pour publier ses vidéos sur son site.

Le site du parti Vert est bilingue tandis que celui de Québec Solidaire est en français seulement. Les 2 sites montrent leur ouverture vers les nouvelles technologies par l’utilisation de blogues et d’outil Open Source.

Accessibilité

L’accessibilité numérique est un sujet très important, surtout pour des organismes politiques qui désirent rejoindre l’ensemble de la population. Ainsi, il est important que l’information des sites Web soit accessible pour les gens atteints d’un handicap, qu’il soit visuel ou autre. Les tests ont été faits à l’aide du navigateur Firefox muni de la barre d’outil Web Developer, Lori, Link Evaluator et FireBug le lundi jeudi 8 mars 2007 entre 9h et 12h. Il est possible que des changements aient été apportés après cette période.

Bonne pratique #1
Le contenu alternatif de toutes les images est correctement indiqué

Les 2 sites ne répondent pas à cette bonne pratique. Sur le site du parti Vert, il ne faut pas aller bien loin pour trouver le problème. Le logo ne contient pas de texte alternatif. Sur le site de Québec Solidaire, les images d’actualité de la page d’accueil ne présentent pas de contenu alternatif. Toutes images contribuant au contenu d’une page devraient présenter un texte alternatif pour permettre aux gens atteints de problème visuel de mieux interpréter l’information. Pour ce qui est des autres images, celles qui ne servent qu’à titre de présentation, on devrait les retrouver dans la feuille de styles et non pas dans le code XHTML.

Bonne pratique #13
Le code source des pages contient l’indication de la langue principale du contenu.

Le site du parti Vert ne respecte pas cette bonne pratique puisque dans la version anglaise du site, le code précise qu’il s’agit de contenu francophone ce qui n’est bien entendu pas le cas.

Bonne pratique #160
Le résumé des tableaux est correctement indiqué

Les 2 sites ne respectent pas cette bonne pratique. Le site de Québec Solidaire utilisent les tableaux dans des contextes ou le tableau n’est pas requis. L’utilisation d’un tableau doit être faite seulement pour présenter de l’information sous forme de ligne et de colonne. Il s’agit d’une mauvaise pratique d’utiliser le tableau comme d’un squelette de présentation pour le site ou une partie du site. Dans le cadre d’un tableau qui en ait vraiment un, il est important d’y insérer un résumé afin que les lecteurs d’écran soient en mesure de mieux faire comprendre l’aspect total du tableau avant d’en faire la lecture. Dans le cas du parti Vert, la page Calendrier est un exemple d’un cas où ils sont en faute.

Bonne pratique #2
Les pages du site satisfont au moins au niveau de conformité « A » des directives pour l’accessibilité aux contenus Web (WCAG) 1.0 du W3C

Les sites ne respectent pas le niveau 1 du WCAG (Web Content Accessibility Guidelines). Dès la page d’accueil, il est possible de recenser des erreurs avec le validateur.

Code

La qualité du code, la majorité des gens s’en balance. Par contre, avec un code de qualité, il est plus facile d’assurer une meilleure compatibilité dans les différents navigateurs et une meilleure pérennité des documents. De plus, il est possible que certains outils ne soient pas en mesure de lire l’information si le document en question ne respecte par la DTD qu’il utilise. Les navigateurs populaires ont dû développer une flexibilité au niveau de l’analyse du code car sinon, 98% des sites Web ne seraient par consultables puisqu’ils ne respectent pas leur DTD. Dans le cas des 2 sites de cette étude, le parti Vert a opté pour la DTD XHTML 1.0 Transitional et Québec Solidaire, d’une surdose d’intrépidité opte pour le XHTML 1.0 Strict qui est un peu plus contraignant.

Bonne pratique #149
Les technologies du W3C utilisées sur la page d’accueil le sont de manière conforme

Cette bonne pratique est facile à évaluer. Il s’agit simplement de passer la ou les pages du site dans les différents validateurs mis en place par le W3C. Dans ce cas ci, je n’ai eu besoin que des pages d’accueil pour pouvoir trancher la question. Les 2 sites présentent des erreurs au niveau du code XHTML, mais Québec Solidaire en a qu’une seule! Il arrive parfois que le validateur en échappe de sorte qu’en corrigeant cette erreur, d’autres pourront apparaîtrent.

• PVQ = 25 Erreurs
• QS = 1 Erreur

Il faut également valider les feuilles de styles et les 2 sites ont des erreurs à ce niveau là.

Fichiers en téléchargement

Un site Internet sert à partager de l’information, il est donc normal qu’on doive permettre à nos visiteurs de télécharger certains fichiers. Dans le cas des sites des partis politiques, il s’agit principalement de fichiers aux formats PDF, MP3 et MPG.

Bonne pratique #32
Le format (extension du fichier ou lecteur logiciel) des fichiers proposés en téléchargement est indiqué

Ici il faut prendre l’analyse avec un grain de sel. Il est possible que je n’aie pas bien vu toutes les pages des 2 sites mais il ne me suffit d’une seule erreur pour justifier de noter la non-conformité d’un site!

Seul le site du parti Vert est problématique. Par exemple, dans la section Médias, on peut voir un lien Dépliant de promotion qui est au format PDF mais rien ne l’indique. À ma grande surprise, et je dois avouer que j’ai trouvé ça très chouette, Québec Solidaire présente les fichiers dans un petit tableau en bas de page dans lequel on peut très bien voir le format et la taille du fichier à télécharger. Le parti Vert, utilisant le même CMS propose également ces petits tableaux mais pas de façon systématique…

Bonne pratique #34
La taille des fichiers proposés en téléchargement est indiquée

Comme je l’indique au point précédent, le site de Québec Solidaire gère très bien cette bonne pratique, dans la majorité des cas. Il est possible sur le site de Québec Solidaire de trouver des liens vers des fichiers PDF sans indication de la taille du fichier. Le site du parti Vert ne l’indique pas toujours non plus. Je dois tout de même féliciter l’effort dans la section Médias encore une fois pour la note : Attention 15 Mb!

Formulaires

Bonne pratique #38
Les champs obligatoires des formulaires sont indiqués

Rien de plus frustrant que de se faire dire par un site Web qu’on a omis de remplir certains champs d’un formulaire lorsque rien ne l’indiquait à l’étape précédente. Les sections pour faire un don sur le 2 sites, Don et adhésion sur le site du parti Vert et j’appuie – en ligne pour le site de Québec Solidaire. À la défense du parti Vert, celui-ci utilise un service Web GiftTool.com pour gérer les dons de sorte qu’ils n’ont peut être par le contrôle sur la conception totale du formulaire.

Hyperliens

Bonne pratique #45
Les URL des hyperliens pointant vers un répertoire et non vers une page en particulier se terminent par une barre oblique (« / »)

Les 2 sites sont couplables ! Drupal présente les pages par Node… Vous pouvez d’ailleurs voir le mot node dans les URL des pages. Par défaut, il n’ajoute pas le / à la fin des liens. Voilà pourquoi les 2 sites ne respectent pas cette bonne pratique.

Bonne pratique #52
Les hyperliens texte visités et non visités sont différenciés

Les 2 sites affichent les liens de la même façon qu’ils aient été visités ou non. Il est pourtant pratique, même s’il s’agit d’une subtile nuance de couleur, de pouvoir différencier les pages qu’on a visitées et celles que nous n’avons pas visitées lorsqu’on navigue sur un site Web.

Bonne pratique #167
Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe

Il faut être prudent avec les liens du type : En savoir plus ou Texte intégral! Ce genre de liens ne représentent pas bien l’information vers laquelle ils pointent. Il faut éviter le plus possible d’utiliser des liens dont le contexte donne plus d’information sur le lien que le lien lui-même. D’un point de vue du référencement, un lien du type « Lire la suite » n’ajoute rien à votre stratégie SEO (Search Engine Optimization).

Internationalisation

Bonne pratique #21
Les données financières sont exprimées dans une unité monétaire conforme à la norme internationale

Généralement classée sous la rubrique « Offre » par l’équipe d’Opquast, j’ai décidé de l’inscrire dans la section « Internationalisation » puisqu’il s’agit de la devise qui n’est pas présente sur aucun des 2 sites. Pour devenir membres d’un parti, vous devez cotiser. Les montants sont indiqués mais nul part c’est indiqué qu’il s’agit de dollars canadiens. C’est évident vous me direz… Je suis d’accord… mais si un brésilien voulait cotiser? Dans le cas du parti Vert, puisqu’ils utilisent GiftTool, on peut voir apparaître le code CAD. Malgré tout, dans quelques autres pages les montants ne sont pas accompagnés de la devise.

Bonne pratique #185
Le pays est précisé dans toutes les adresses postales

Qu’on soit séparatiste ou non, le pays est encore officiellement le Canada et aucun des 2 sites n’indique Canada dans les adresses postales. Il faut considérer que pour certaines personnes dans le monde, il est fort possible qu’ils ne sachent pas où c’est le Québec! En indiquant Canada dans les adresses qu’on publie sur nos sites Web, on met les chances de notre côté de mieux informer le visiteur mais également de réduire le nombre de demande par courriel qui ne sont pas justifiées à cause de la question de proximité géographique!

Bonne pratique #186
L’indicatif téléphonique du pays est précisé devant chaque numéro de téléphone

Québec Solidaire se fait prendre à ne pas préciser le 1- devant les numéros de téléphones… À la défense des Webmestres, j’ai pu constater que le numéro 1-800 ou 1-866 ou 1-888 était toujours spécifié avec le 1-. D’un point de vue théorique, il faut spécifier le 1- pour chaque numéro de téléphone pour s’assurer que celui-ci soit le plus complet possible et ainsi en faciliter son utilisation. Le parti Vert profite du fait qu’il publie sur son site Web seulement un numéro sans frais.

Multimédia et Plugins

Bonne pratique #79
Aucun objet multimédia de plus de 50 ko (image ou autre) n’est envoyé sans avertissement préalable, prévisualisation ou affichage progressif

Dans les 2 sites il est facile de trouver une image qui est envoyée automatiquement au navigateur du visiteur sans avertissement préalable dépassant la taille de 50K. Dans le cas du parti Vert, la photo de M. McKay pèse 66K et sur le site de Québec Solidaire dans la section Actualité, la photo de François Saillant pèse 85K.

Bonne pratique #76 et #77
#76 – Si la consultation ou l’utilisation de certains contenus nécessite un plug-in, la taille du fichier à télécharger est précisée

#77- Si la consultation ou l’utilisation de certains contenus nécessite un plug-in, un lien de téléchargement ou d’information sur ce dernier est proposé

Le parti Vert ne présente pas d’élément en Flash sur son site. Dans le cas de Québec Solidaire, je n’ai pas trouvé le lien pour télécharger la dernière version du « player » Flash. Dans le cas du « player » Flash, dans le code il y a moyen d’indiquer l’URL vers la page de téléchargement du plug-in. Il est par contre mieux de présenter un paragraphe d’information qui explique quels plugins sont nécessaires pour consulter le site, pour quelles raisons les documents sont disponibles dans ces formats et sur quels sites peut-on trouver les outils nécessaires pour la consultation des documents.

Navigation

Bonne pratique #62
Les hyperliens internes ne pointent pas vers des pages en construction

Sur le site du parti Vert, au moment de l’évaluation, le site présentait une section Album photos qui était en construction. Autres tâches d’entreprise obligent, j’ai été en mesure d’écrire cet article trop tard!

Bonne pratique #68
Si la totalité des pages du site n’est pas directement accessible depuis le menu de navigation, un plan du site est accessible depuis toutes les pages

Le site du parti vert est pris en défaut car il ne propose pas de plan du site. Quant à lui, le site de Québec Solidaire présente un plan du site très complet. Contrairement aux sites du PQ, PLQ et ADQ, les sites du parti Vert et de Québec Solidaire offre un moteur de recherche disponible sur chaque page.

Bonne pratique #44
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko

En cette période de campagne électorale, il est évident que la page d’accueil des sites des partis est sur utilisée! Aucun des 2 sites ne présente moins de 100K d’information.

• PVQ = 210K
• QS = 370K

Bonne pratique #151
Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée

Les 2 sites respectent la bonne pratique #82, soit d’afficher une page d’erreur 404 personnalisée. Le parti Vert par contre, n’affiche pas de menu sur cette page. En réalité, j’ai l’impression qu’il s’agit plus d’une page par défaut affichée par Drupal, donc une page sans contenu, plutôt qu’une page d’erreur 404…

URL

Bonne pratique #88
Les URL internes du site ne contiennent pas d’espaces

Sur le site du parti Vert, il est possible de trouver des liens vers des documents PDF dont le nom de fichier contient des espaces.

Bonne pratique #89
L’extension du nom de domaine (.com, .org, .net, etc.) est cohérente avec l’activité, la zone géographique couverte ou le statut de l’auteur

Le .net utilisé par Québec Solidaire n’est pas le meilleur choix. Un .qc.ca représente le côté géographique du parti ce qui est bien à mon avis et le .org dénote le côté organisation. Toute autre extension ne serait pas à propos dans le cas des sites évalués. Chose amusante et incompréhensible à la fois, Québec Solidaire a réservé le nom de domaine www.quebecsolidaire.org mais ils utilisent le .net par défaut… Pourquoi ?

Conclusion

Je suis étonné des résultats. Les partis politiques émergeants dépasse considérablement ses rivaux. Il est également amusant de voir que les 2 sites utilisent la même technologie et arrive à la même note. Le PQ utilise le même outil mais est assez loin derrière. C’est ce qui est intéressant avec le guide Opquast. Il s’agit de points assez techniques mais l’outil n’est pas tout, le contenu et la mise en page comptent pour beaucoup. Malgré son 68%, le site du parti Vert est très simpliste… trop peut être… D’un point de vue général, malgré les résultats des évaluations Opquast, les 2 sites les plus intéressants à utiliser et les plus complets sont les sites du PQ et de Québec Solidaire. J’ai bien hâte de constater qui gagnera la vraie bataille!

Pendant que les spécialistes en politique évaluent les différentes campagnes des 3 principaux partis politiques au Québec, l’équipe QuiboWeb, soucieuse des bonnes pratiques sur Internet s’est intéressée à évaluer les sites Web de l’Action démocratique du Québec, du Parti Libéral du Québec et du Parti Québécois. Il s’agit d’une évaluation en surface en utilisant le Guide de bonnes pratiques Opquast. Question de rendre cette chronique plus facile à lire, je présenterai seulement les points qui ne respectent pas la norme de l’industrie pour un ou plusieurs des 3 sites évalués.

Je tiens à préciser que par cette étude, je ne prends aucune position pour un parti ou pour un autre. La politique n’étant pas mon domaine, c’est la qualité des sites Web qui me préoccupe.

Résumé

L’étude suivante peut être longue à lire. Le contenu est également très technique. Voici un court résumé des résultats (profitez-en, c’est rare qu’on peut avoir les résultats dès le début… sauf peut-être avec les Canadiens ces temps ci!).

L’évaluation Opquast a donné les résultats suivants :

• ADQ : 47%
• PLQ : 57%
• PQ : 56%

Seulement 66% des bonnes pratiques du Guide Opquast ont été considérées.

Le site du PQ est plus complet, utilise du logiciel Open Source et encourage les partisans à participer. Il est par contre disponible en français seulement.

Le site de l’ADQ est bilingue mais offre peu d’information outre la liste des candidats et quelques communiqués de presse.

Le site du PLQ présente de l’information des les 2 langues à l’intérieur d’une même page qui est une mauvaise pratique car ça rend les pages plus lourdes.

Les 3 partis utilisent les vidéos, l’audio, les feuilles de styles, les options de partage ce qui montre une ouverture vers les nouvelles technologies.

Accessibilité

L’accessibilité numérique est un sujet très important, surtout pour des organismes politiques qui désirent rejoindre l’ensemble de la population. Ainsi, il est important que l’information des sites Web soit accessible pour les gens atteints d’un handicap, qu’il soit visuel ou autre. Malgré qu’il ait encore quelques problèmes, on dénote une nette amélioration en comparant avec les versions antérieures des sites des partis, principalement pour le Parti Québécois et le Parti Libéral. Les tests ont été faits à l’aide du navigateur Firefox muni de la barre d’outil Web Developer, Lori, Link Evaluator et FireBug le lundi 5 mars 2007 entre 9h et 12h. Il est possible que des changements aient été apportés après cette période.

Bonne pratique #1
Le contenu alternatif de toutes les images est correctement indiqué

Les 3 sites ne répondent pas à cette bonne pratique. Sur le site de l’ADQ, sur les fiches des candidats, la photo de ceux-ci ne présente pas de texte alternatif. Sur le site du PQ, les images de la page d’accueil, sauf les menus, ne présentent pas de contenu alternatif. Sur le site du PLQ, c’est également dans la section Équipe qu’on peut voir le problème. Toutes images contribuant au contenu d’une page devraient présenter un texte alternatif pour permettre aux gens atteints de problème visuel de mieux interpréter l’information. Pour ce qui est des autres images, celles qui ne servent qu’à titre de présentation, on devrait les retrouver dans la feuille de styles et non pas dans le code XHTML.

Bonne pratique #4
La taille des polices destinées à l’affichage écran est exprimée en taille variable et non en taille fixe

Seul le site du parti Libéral respecte cette bonne pratique. Dans les 2 autres, la taille du texte est exprimée en Pixel (px) contrairement au site du parti Libéral qui utilise le EM, unité variable. Il est important de pouvoir modifier la taille des caractères pour permettre aux visiteurs atteints d’un problème visuel d’ajuster la grosseur du caractère pour bien voir l’information.

Bonne pratique #5
La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier

Maintenant, il s’agit de l’Action Démocratique du Québec qui respecte cette bonne pratique. Dans le cas du PLQ, il est impossible de consulter les différents communiqués de presse en utilisant seulement le clavier. Sur le site du PQ, c’est la zone Communiqués / Radio PQ / Agenda du chef / Événements de la page d’accueil qui pose problème. Cette zone utilise la technologie Ajax qui, très souvent, pose des problèmes d’accessibilité. De plus sur le site du PQ, les menus déroulant ne fonctionnent pas avec le clavier seulement.

Bonne pratique #13
Le code source des pages contient l’indication de la langue principale du contenu

Seul le site du PQ respecte cette bonne pratique. À la défense des 2 autres, j’ai l’impression que la seule raison pour laquelle le site du PQ la respecte est parce qu’il utilise le CMS (Content management system) Drupal.

Bonne pratique #160
Le résumé des tableaux est correctement indiqué

Les 3 sites ne respectent pas cette bonne pratique. En réalité, les 3 sites utilisent les tableaux dans des contextes ou le tableau n’est pas requis. L’utilisation d’un tableau doit être faite seulement pour présenter de l’information sous forme de ligne et de colonne. Il s’agit d’une mauvaise pratique d’utiliser le tableau comme d’un squelette de présentation pour le site ou une partie du site. Dans le cadre d’un tableau qui en ait vraiment un, il est important d’y insérer un résumé afin que les lecteurs d’écran soient en mesure de mieux faire comprendre l’aspect total du tableau avant d’en faire la lecture.

Bonne pratique #162
Chaque champ de formulaire est associé à une étiquette qui lui est propre

Une fois de plus, les 3 sites ne respectent pas cette bonne pratique. Il s’agit une fois de plus d’une bonne pratique favorisant la lecture par un lecteur d’écran car celui-ci sera en mesure de relier l’étiquette d’une case avec la case en tant que tel. L’autre avantage de cette bonne pratique, et je suis sûr que les utilisateurs d’Internet seront d’accords avec moi, c’est que dans le cas d’un « radio button » ou d’un « checkbox« , en utilisant la balise « label » il devient possible de cocher et de décocher une case en cliquant sur l’étiquette de la case… Beaucoup plus efficace….

Bonne pratique #2
Les pages du site satisfont au moins au niveau de conformité « A » des directives pour l’accessibilité aux contenus Web (WCAG) 1.0 du W3C

Aucun des sites respecte le niveau 1 du WCAG (Web Content Accessibility Guidelines). Le site du PLQ présente une page d’accueil sans erreur en utilisant le validateur d’accessibilité mais il s’agit de choisir une autre page pour voir apparaître les problèmes. Dans le cas du PQ et de l’ADQ, dès la page d’accueil, il est possible de recenser des erreurs avec le validateur.

Code

La qualité du code, la majorité des gens s’en balance. Par contre, avec un code de qualité, il est plus facile d’assurer une meilleure compatibilité dans les différents navigateurs et une meilleure pérennité des documents. De plus, il est possible que certains outils ne soient pas en mesure de lire l’information si le document en question ne respecte par la DTD qu’il utilise. Les navigateurs populaires ont dû développer une flexibilité au niveau de l’analyse du code car sinon, 98% des sites Web ne seraient par consultables puisqu’ils ne respectent pas leur DTD. Dans le cas des 3 sites de cette étude, il s’agit de la DTD XHTML 1.0 Transitional.

Bonne pratique #16
Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée

Seul le site du PLQ respecte cette bonne pratique. Les 2 autres utilisent les balises DIV plutôt que les balises H1 à H6. Il est important d’utiliser les balises de la bonne façon afin d’améliorer la qualité sémantique du document. N’allez pas croire que le site du PLQ est parfait sur ce point ci. Plusieurs pages utilisent seulement la balise H1 et passe rapidement à l’utilisation des DIV.

Bonne pratique #149
Les technologies du W3C utilisées sur la page d’accueil le sont de manière conforme

Cette bonne pratique est facile à évaluer. Il s’agit simplement de passer la ou les pages du site dans les différents validateurs mis en place par le W3C. Dans ce cas ci, je n’ai eu besoin que des pages d’accueil pour pouvoir trancher la question. Les 3 sites présentent des erreurs au niveau du code XHTML.

• ADQ = 576 Erreurs
• PLQ = 57 Erreurs
• PQ = 250 Erreurs

Fichiers en téléchargement

Un site Internet sert à partager de l’information, il est donc normal qu’on doive permettre à nos visiteurs de télécharger certains fichiers. Dans le cas des sites des partis politiques, il s’agit principalement de fichiers aux formats PDF, MP3 et MPG.

Bonne pratique #32
Le format (extension du fichier ou lecteur logiciel) des fichiers proposés en téléchargement est indiqué

Ici il faut prendre l’analyse avec un grain de sel. Il est possible que je n’aie pas bien vu toutes les pages des 3 sites mais il ne me suffit d’une seule erreur pour justifier de noter la non-conformité d’un site!

Le site de l’ADQ est celui à mon avis qui présente l’erreur de façon plus flagrante. Le site propose plusieurs fichiers PDF en téléchargement mais jamais on indique avant de cliquer sur les liens qu’il s’agit de fichiers PDF. Sur le site du PLQ, je n’ai pas vu d’endroit ou le type de fichier n’était pas spécifié à côté du lien ou dans le texte présentant le lien. Le PLQ respecte donc cette bonne pratique. Dans le cas du PQ, je considère qu’il s’en tire pas trop mal mais le site est victime de lui-même du fait qu’il est beaucoup plus complet que les 2 autres et qu’il présente beaucoup plus d’information. Sur le site du PQ, dans la section Le Chef > Déclarations et discours, il est possible de télécharger des fichiers MP3 et MPG. Puisqu’il est indiqué Audio | Vidéo, le visiteur, sans avoir une idée précise du format des fichiers, il sait tout de même qu’il s’agit d’un son ou d’une vidéo… C’est la raison pour laquelle le PQ s’en tire pas trop mal malgré tout.

Bonne pratique #33
Les fichiers en téléchargement sont proposés dans au moins un format dont les spécifications sont publiques

Encore une fois, le PQ est victime du fait que son site est plus complet que les 2 autres. Puisque celui-ci présente des fichiers audio et vidéo aux format MP3 et MPG, ce que les 2 autres ne font pas, celui-ci ne respecte pas la bonne pratique #33 qui dit que le fichier doit être disponible dans un format dont les spécifications sont publiques. Dans le cas du MP3, le OGG serait l’équivalent public… Qui connaît les OGG? Les mordus de l’Open Source!

Bonne pratique #34
La taille des fichiers proposés en téléchargement est indiquée

Sur aucun site, la taille des fichiers proposés en téléchargement est indiquée. Il est pourtant pratique pour un utilisateur d’une connexion Internet à faible débit de savoir dans quoi il s’embarque avant de cliquer sur un lien pour télécharger une vidéo ou un document volumineux!

Formulaires

Bonne pratique #36
En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l’utilisateur

Seul le site de l’ADQ ne respecte pas cette bonne pratique car le programme PHP derrière le formulaire Partagez ce site contient une erreur aux niveaux du traitement des données. Lorsque vous cliquez sur le bouton Envoyez du formulaire sans remplir aucune case, plutôt que d’indiquer que certaines cases étaient obligatoires, le script PHP plante et présente un message d’erreur cryptique pour M. et Mme. tout le monde!

Bonne pratique #37
En cas de rejet des données saisies dans un formulaire, toutes les données saisies peuvent être modifiées par l’utilisateur

Pour les mêmes raisons que pour la bonne pratique #36, le site de l’ADQ ne passe pas ce critère non plus. De son côté, le PLQ dans sa section Impliquez-vous présente un formulaire pour devenir membre du parti. Si vous indiquez vos informations dans le formulaire mais que vous oubliez une case obligatoire, le site vous présentera le nom de la case que vous avez oubliée ainsi qu’un lien « Cliquez ici pour revenir au formulaire »… Autant utiliser le bouton précédent de votre navigateur car le lien vous retournera vers un formulaire vide et vous devrez spécifier toutes vos informations à nouveau! Pour sa part, le PQ ne semble pas présenter de problème à ce niveau ci.

Bonne pratique #38
Les champs obligatoires des formulaires sont indiqués

Rien de plus frustrant que de se faire dire par un site Web qu’on a omis de remplir certains champs d’un formulaire lorsque rien ne l’indiquait à l’étape précédente. C’est une situation probable sur le site du PQ dans la section Participez! > Convaincre un ami . Aucun champ n’est marqué comme obligatoire mais en réalité ils le sont tous… sauf les multiples cases de Courriel ami… bref ils le sont pas tous… autant indiquer lesquels le sont!

Hyperliens

Bonne pratique #45
Les URL des hyperliens pointant vers un répertoire et non vers une page en particulier se terminent par une barre oblique (« / »)

Seulement le site du PLQ ne respecte pas cette bonne pratique à cause du lien « Où voter » disponible dans la marge de gauche.

Bonne pratique #47
Les hyperliens sont visuellement différenciés du reste du contenu

Je déclare les 3 sites non conformes même si le site du PQ devrait passer le test. Ce que je reproche au site du PQ est que la couleur qu’ils ont utilisée pour les liens est un bleu difficile à différencier du noir du texte. On peut également remarquer une tendance : les partis politiques n’aiment pas les liens soulignés! Il s’agit pourtant de la meilleure façon de représenter un lien. Je peux comprendre pour des questions esthétiques que ne veule pas souligner un lien dans un menu. Cependant, trop souvent on souligne les adresses courriel mais on ne souligne pas les autres liens. Une autre chose que j’ai remarqué c’est l’utilisation du JavaScript dans les sections d’actualité des sites. Il s’agit donc de liens sans vraiment en être car si on clique sur un résumé d’une nouvelle, un script JavaScript va nous mener vers la version complète du texte.

Bonne pratique #48
Tous les hyperliens internes du site sont valides

Seul le site du PQ ne respecte pas cette bonne pratique. Il s’agit ici d’une erreur grave. Pour trouver les liens erronés sur le site du PQ il suffit de visiter la section Participez! – Survol . Cette page présente différents paragraphes d’information dont les titres sont des liens. Si vous cliquez sur un titre, vous aurez une erreur 404, page non trouvée.

MAJ 2007-03-08 : Le PQ a réglé ce problème… Bravo!

Bonne pratique #52
Les hyperliens texte visités et non visités sont différenciés

Les 3 sites affichent les liens de la même façon qu’ils aient été visités ou non. Il est pourtant pratique, même s’il s’agit d’une subtile nuance de couleur, de pouvoir différencier les pages qu’on a visitées et celles que nous n’avons pas visitées lorsqu’on navigue sur un site Web.

Bonne pratique #167
Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe

Il faut être prudent avec les liens du type : Voir la suite, lire la suite ou tout simplement suite! Ce genre de liens ne représentent pas bien l’information vers laquelle ils pointent. Il faut éviter le plus possible d’utiliser des liens dont le contexte donne plus d’information sur le lien que le lien lui-même. D’un point de vue du référencement, un lien du type « Lire la suite » n’ajoute rien à votre stratégie SEO (Search Engine Optimization).

Internationalisation

Bonne pratique #21
Les données financières sont exprimées dans une unité monétaire conforme à la norme internationale

Généralement classée sous la rubrique « Offre » par l’équipe d’Opquast, j’ai décidé de l’inscrire dans la section « Internationalisation » puisqu’il s’agit de la devise qui n’est pas présente sur aucun des 3 sites. Pour devenir membres d’un parti, vous devez cotiser. Les montants sont indiqués mais nul part c’est indiqué qu’il s’agit de dollars canadiens. C’est évident vous me direz… Je suis d’accord… mais si un brésilien voulait cotiser?

Bonne pratique #185
Le pays est précisé dans toutes les adresses postales

Qu’on soit séparatiste ou non, le pays est encore officiellement le Canada et aucun des 3 sites n’indique Canada dans les adresses postales. Il faut considérer que pour certaines personnes dans le monde, il est fort possible qu’ils ne sachent pas où c’est le Québec! En indiquant Canada dans les adresses qu’on publie sur nos sites Web, on met les chances de notre côté de mieux informer le visiteur mais également de réduire le nombre de demande par courriel qui ne sont pas justifiées à cause de la question de proximité géographique!

Bonne pratique #186
L’indicatif téléphonique du pays est précisé devant chaque numéro de téléphone

Une fois de plus, les 3 sites se font prendre à ne pas préciser le 1- devant les numéros de téléphones… À la défense des Webmestres, j’ai pu constater que le numéro 1-800 était toujours spécifié avec le 1-. D’un point de vue théorique, il faut spécifier le 1- pour chaque numéro de téléphone pour s’assurer que celui-ci soit le plus complet possible et ainsi en faciliter son utilisation.

Moteur de recherche

Bonne pratique #60
Si le site comporte plus de 15 pages de contenu textuel, un moteur de recherche interne est accessible depuis toutes les pages

Tous les sites comportent plus de 15 pages mais aucun ne présente de moteur de recherche. Dans le cas du PQ, je ne comprends pas pourquoi le moteur de recherche disponible avec Drupal n’est pas affiché sur le site. Celui-ci serait vraiment très pratique étant donné la quantité impressionnante d’information qu’on peut trouver sur ce site.

Multimédia et Plugins

Il est possible rapidement de voir une nouvelle mode sur l’Internet. La mode des vidéos! Les 3 sites présentent des vidéos de leur chef ou de ministres répondant à des questions du peuple etc.. La vidéo est un médium enrichi mais son utilisation apporte des considérations techniques supplémentaires au niveau de la conception du site Web.

Bonne pratique #76 et #77
#76 – Si la consultation ou l’utilisation de certains contenus nécessite un plug-in, la taille du fichier à télécharger est précisée

#77- Si la consultation ou l’utilisation de certains contenus nécessite un plug-in, un lien de téléchargement ou d’information sur ce dernier est proposé

Sur aucun des sites j’ai trouvé le lien pour télécharger la dernière version du « player » Flash. Je n’ai pas trouvé non plus le lien vers Acrobat Reader pour les fichiers PDF. Dans le cas du « player » Flash, dans le code il y a moyen d’indiquer l’URL vers la page de téléchargement du plug-in ce que les 3 sites font. Il est par contre mieux de présenter un paragraphe d’information qui explique quels plugins sont nécessaires pour consulter le site, pour quelles raisons les documents sont disponibles dans ces formats et sur quels sites peut-on trouver les outils nécessaires pour la consultation des documents.

Bonne pratique #79
Aucun objet multimédia de plus de 50 ko (image ou autre) n’est envoyé sans avertissement préalable, prévisualisation ou affichage progressif

Dans les 3 sites il est facile de trouver une image ou un fichier Flash qui est envoyé automatiquement au navigateur du visiteur sans avertissement préalable. Dans le cas du PLQ, il suffit d’aller dans la page Bien gérer votre argent où on y présente plusieurs graphiques en image de plus de 50K chaque.

Navigation

Bonne pratique #62
Les hyperliens internes ne pointent pas vers des pages en construction

Le site du PLQ est coupable… La page Plan du site indique Prochainement en ligne…

Bonne pratique #65
Les icônes de navigation sont accompagnées d’une légende explicite

Les sites de l’ADQ et du PQ ne respectent pas cette bonne pratique. Les 2 sites utilisent des images pour la présentation de leurs menus. Il est idéal d’utiliser l’attribut « title » de la balise A en plus de spécifier un texte alternatif sur l’image pour permettre aux gens qui ne voient pas, d’associer un texte au lien mais également un texte à l’image utilisée pour représenter le lien. Sur le site du PLQ, les menus sont textuels.

Bonne pratique #67
L’ordre de présentation des rubriques de navigation est identique sur toutes les pages

Je reproche au site du PLQ de ne pas respecter cette bonne pratique car dans la section « Notre programme », le site ne propose plus le menu principal qui est disponible sur l’ensemble des autres pages du site. La section « Notre programme » est donc considérée comme un micro-site à l’intérieur du site du parti mais je trouve que ça rend la navigation un peu plus difficile.

Bonne pratique #68
Si la totalité des pages du site n’est pas directement accessible depuis le menu de navigation, un plan du site est accessible depuis toutes les pages

Aucun des 3 sites ne propose de plan du site. Le site du PLQ semble sensible à l’idée d’en proposer un mais celui-ci est présentement en construction. Dans le cas du PQ, bien que les menus déroulant soient une mauvaise pratique pour l’accessibilité, ceux-ci donnent accès à l’ensemble du contenu du site ce qui veut dire que la mise en place d’un plan du site est moins nécessaire pour eux.

Bonne pratique #72
L’utilisateur est informé sur chaque page de la position de cette dernière dans la structure du site

Aucun des 3 sites ne présente de fil d’ariane… Oui oui, un fil d’ariane… Vous savez cette série de liens du style : Vous êtes ici : Accueil – Notre équipe – Mario Dumont . Seul le site du PQ présente une façon graphique de savoir où on se retrouve sur le site en ajoutant une petite flèche dans le menu du haut et en mettant en gras la section courante de le sous-menu de gauche. Pour les 2 autres, ne laissez surtout pas votre navigateur sur une page pendant que vous quittez pour aller prendre un café. À votre retour, rien ne vous indiquera où vous étiez rendu sur le site.

Bonne pratique #78
Sauf avertissement préalable, la quantité de données à télécharger pour afficher une page est inférieure à 150 Ko

Les pages types des sites Web de l’ADQ et du PQ dépasse de justesse le 150K prescrit par le guide Opquast.

• ADQ = 152K
• PLQ = 30K
• PQ = 160K

Bonne pratique #44
La quantité de données à télécharger pour afficher intégralement la page d’accueil est inférieure à 100 Ko

En cette période de campagne électorale, il est évident que la page d’accueil des sites des partis est sur utilisée! Aucun des 3 sites ne présente moins de 100K d’information.

• ADQ = 300K
• PLQ = 245K
• PQ = 400K

Bonne pratique #151 et #82
#151 – Le menu principal de navigation du site figure sur la page d’erreur 404 personnalisée

# 82 – Le serveur envoie une page d’erreur 404 personnalisée

Il s’agit pourtant d’une fonctionnalité intéressante et importante. Elle sera d’autant plus importante à la fin des élections lorsque les différents acteurs voudront effacer toute trace des promesses faites au courant de la campagne électorale (Joke plate de citoyen LOL!) puisque les liens provenant des résultats de recherche de Google tomberont sur des pages inexistantes! Vous comprendrez rapidement que le fait de ne pas respecter la bonne pratique #82 implique automatiquement le non-respect de la #151.

Pop-ups

AH les pop-ups… Invention sur utilisée, maintenant presque tout le monde a un dispositif pour les éviter! Pourquoi continuer des utiliser? Seul le site de l’ADQ a recours au Pop-ups.

Bonne pratique #155
Si le site impose des pop-ups, celles-ci n’apparaissent qu’une seule fois

Cette bonne pratique a pour objectif de sévir pour les sites qui utilisent des pop-ups et plus vous cliquez, plus ouvrez de nouvelles fenêtres… Pour les amateurs de la barre des tâches camouflées, il faut attendre que l’ordinateur devienne lent avant de se rendre compte qu’on a 200 pages ouvertes! Sur le site de l’ADQ, il y a 2 pages qui s’ouvrent en pop-ups et les 2 s’ouvrent dans une fenêtre différente : Partagez ce site et Envoyez un commentaire (dans la fiche d’un candidat).

Bonne pratique #156
Si le site impose des pop-ups, celles-ci contiennent un bouton fermer

Je crois que la bonne pratique est claire… Dans le cas de l’ADQ, le bouton ou le lien Fermer n’y ait pas.

Titres

Les titres sont très importants pour les questions de référencement. Une page avec un titre non pertinent sera moins intéressant dans une liste de résultat de Google. Dans une liste de résultats de recherche Google, si vous avez le lien suivant : Nouvelle Page 1 ou le lien suivant : Action démocratique du Québec – Contactez-nous , lequel des 2 résultats allez-vous choisir?

Bonne pratique #86
Chaque page comporte un titre significatif et représentatif du contenu du site

Dans le cas du site de l’ADQ, à un seul endroit j’ai pu voir une faiblesse… La page Contactez-nous a pour titre : adqaction.com .

URL

Bonne pratique #89
L’extension du nom de domaine (.com, .org, .net, etc.) est cohérente avec l’activité, la zone géographique couverte ou le statut de l’auteur

Dans le cas de l’ADQ, l’adresse www.adq.qc.ca qui est conforme à la bonne pratique #89 redirige vers www.adqaction.com . Même si le .com est considéré l’extension par défaut par M. et Mme. tout le monde, celui-ci ne correspond pas du tout pour un parti politique. Un .qc.ca représente le côté géographique du parti ce qui est bien à mon avis et le .org dénote le côté organisation. Toutes autres extensions autres ne seraient pas à propos dans le cas des 3 sites évalués à mon avis.

Conclusion

Je dois féliciter les 3 partis pour les efforts investis sur leur site Web. Le PQ semble être celui qui profite le plus du Web en incitant ses partisans à faire circuler la bonne parole sur les blogs, forum etc… De plus, le PQ utilise Drupal, un CMS Open Source très populaire pour la mise à jour de son site et WordPress, un outil de carnet Web également Open Source pour la mise à jour de son blogue. Les 3 partis tirent profit du vidéo sur le Web ce qui montre une ouverture au progrès. Les 3 sites utilisent les feuilles de styles pour la majorité des détails de mise en page. Les 3 partis se livrent une chaude lutte qui se terminera dans 20 jours!