Qu’est-ce que l’on attend d’un site défini par la qualité web ?

Nous l’avons vu dans notre article précédent, la qualité web s’attache à répondre aux attentes de l’utilisateur. Elie Sloïm, le cocréateur du référentiel de qualité web Opquast dont nous avons déjà parlé dans ce blog (Mesurez & améliorez la qualité de votre site web avec OPQUAST) propose, en s’inspirant de la norme iso 8402, la définition suivante : « la qualité web représente l’aptitude d’un service en ligne à satisfaire des exigences explicites ou implicites ».

Il nous faut donc savoir ce que notre utilisateur s’attend à trouver lorsqu’il se rend sur notre site et tout aussi important, comment il va y accéder.

La qualité web nous aide à atteindre cet objectif en nous guidant pour construire un dispositif rendant l’expérience utilisateur fluide, agréable et efficace.

Opquast propose un modèle pour la qualité web qui synthétise les exigences de l’utilisateur. On y trouve ce que l’on est en droit d’attendre d’un site défini par la qualité web.

Ce modèle porte le doux nom de VPTCS :

• V : Visibilité
• P : Perception
• T : Technique
• C : Contenus
• S : Services

On distingue ici l’idée d’attentes transversales qui touchent l’ensemble des métiers du web. On s’intéresse à l’expérience de l’utilisateur de l’avant, au pendant et à l’après de sa visite. Et pour cela, nous allons lui proposer un site (ou tout autre dispositif en ligne) qui :

• Est facile à trouver
• Est agréable à utiliser
• Est techniquement solide
• Possède un contenu adéquat et de qualité
• Propose des services adaptés

Le modèle VPTCS est résumé par ce schéma :

Opquast traduit très concrètement ce modèle théorique par une liste de règles à respecter. On passe ici du subjectif à des exigences précises.

Ces règles ont été établies au sein d’ateliers regroupant des professionnels des domaines couverts par le modèle VPTCS. Pour être retenues dans le référentiel final, les règles proposées doivent respecter les conditions suivantes :

• Être vérifiables en ligne
• Être une valeur ajoutée démontrable pour les utilisateurs
• Être réalistes sur les sites web où services en ligne
• Être valables au niveau international
• Ne pas comporter de référence à une valeur numérique
• Avoir un libellé qui ne fait pas référence à une solution technique
• Avoir un libellé qui ne fait pas référence à une norme ou un standard regroupant des exigences multiples

D’autres exigences sont également prises en compte :

• Les règles doivent faire consensus
• Les règles ne sont pas là pour faire la promotion d’une technologie innovante même si celle-ci est d’ores et déjà perçue comme une bonne pratique
• Les règles doivent être faites pour durer

Vous trouverez la liste des règles de la version 4 d’Opquast à cette adresse : https://checklists.opquast.com/fr/assurance-qualite-web/

Les règles sont regroupées par catégories. Celles-ci ne sont pas obligatoirement liées aux silos du VPTCS :

• Contenus
• Données personnelles
• E-Commerce
• Formulaires
• Identification et contact
• Images et médias
• Internationalisation
• Liens
• Navigation
• Newsletter
• Présentation
• Sécurité
• Serveur et performances
• Structure et code

Dans chacune des ces catégories se trouvent des règles qui vont nous permettre de répondre aux exigences implicites et explicites de l’utilisateur. Un bon exemple pour illustrer ce propos est celui du formulaire. Vous pourriez formuler votre besoin simplement comme ceci : « j’ai besoin que vous mettiez à disposition des utilisateurs, un formulaire qui leur permette de prendre contact avec nous ». C’est effectivement la description d’un besoin explicite mais pour proposer à l’utilisateur une bonne expérience, il faut aller plus loin. Voyons quelques-unes des règles qu’Opquast nous propose pour ce cas de figure :

Règle 67 – Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre.

Pour chaque règle Opquast précise sa raison d’être, le moyen de la mettre en œuvre et comment contrôler son implémentation.

Pour notre règle 67, voici ce que cela donne :

Objectif

Faciliter la compréhension des données attendues dans les formulaires.

Permettre aux aides techniques d’accessibilité de restituer les champs de formulaires en les associant systématiquement à une étiquette indiquant leur rôle et la nature de la saisie attendue.

Faciliter la saisie en permettant de sélectionner le champ via un clic sur son étiquette aussi bien que sur le champ lui-même (particulièrement en cas de case à cocher ou de case radio).

Améliorer l’accessibilité des contenus aux personnes handicapées

Mise en œuvre

Donner à chaque champ de formulaire une étiquette qui lui soit explicitement associée :

• si l’étiquette est visible, sous la forme d’un élément label doté d’un attribut for reprenant la valeur de l’attribut id affecté au champ, par exemple :
  • <label for= »nom1″>Nom de famille :</label>
  • <input id= »nom1″ type= »text » name= »nom »>
• si l’affichage de l’étiquette n’est pas souhaitée (placeholder), sous la forme d’un attribut aria-label ou aria-labelledby.

Le recours à une étiquette <label for= »… »> masquée via les styles CSS est déconseillé au profit de l’attribut aria-label ou aria-labelledby.

Contrôle

Pour chaque champ de formulaire :

Vérifier, en regardant le code source ou à l’aide de Firebug, que l’attribut for, propre à l’élément label, ainsi que l’attribut id du champ ont exactement le même contenu. Si les valeurs de ces deux attributs sont effectivement identiques, l’étiquette (label) est bien associée au champ (input).

Dans le cas où aucune étiquette n’est visible dans le site (placeholder), vérifier que chaque champ de formulaire est doté d’un attribut aria-label ou aria-labelledby.

Dans les deux cas, vérifier enfin que l’étiquette décrit effectivement le rôle du champ ou la nature de l’information qui doit y être saisie. Cette bonne pratique ne peut donc être automatisée mais nécessite un examen manuel de chaque formulaire

Il y a en tout 27 règles concernant les formulaires. Pour en citer d’autres :

Règle n°69 : L’étiquette de chaque champ de formulaire indique si la saisie est obligatoire.

Règle n°72 : L’étiquette de chaque champ de formulaire qui le nécessite indique les limites de nombre de caractères

Règle n°74 : Les caractères saisis dans un champ de mot de passe peuvent être affichés en clair.

Règle n°81 : Lors de la saisie d’un formulaire réparti sur plusieurs pages, un récapitulatif global est affiché avant l’envoi définitif.

On comprend bien là comment, par le respect attentif de ces règles, il va être possible de consciencieusement mettre en place un dispositif qui permette à votre utilisateur d’accéder à l’information et au service souhaité dans les meilleures conditions.

Nous préconisons donc l’utilisation de ce référentiel pour la réalisation d’un dispositif respectueux de la qualité web. Il est proposé sous licence ouverte, vous pouvez donc l’utiliser gratuitement. Cependant, nous vous recommandons, afin de bien vous l’approprier, de passer la certification.

Si vous voulez en savoir plus rendez vous sur le site d’Opquast, ou contactez-nous, nous aurons plaisir d’échanger avec vous sur la qualité web !

Vous êtes intéressé par la qualité web ? Contactez-nous et bénéficiez de 30 min de conseil par un expert.