Réflexions sur la charte ergonomique 2.0

14 05 2009

Que penser de la charte ergonomique 2.0 de la DGME ?

Dans le précédent billet, j’introduisais la charte ergonomique en parlant du positionnement du formulaire de recherche. Je me suis penché un peu plus sur le contenu de cette fameuse charte.

Charte ergonomique ? Késako ?

Ce billet parle de la charte ergonomique, disponible sur le site de la DGME et plus particulièrement la version 2.0 du 19 décembre 2008

Le deuxième paragraphe de la page 7 nous dit :

La charte a […] pour objet de définir un ensemble de règles ergonomiques communes aux interfaces des sites Internet publics. Elle s’inscrit par ailleurs dans le respect des standards du Word Wide Web Consortium (W3C) et des principes d’interopérabilité, d’accessibilité et de sécurité des référentiels généraux (RGI, RGAA, RGS).

Ça résume plutôt bien ce qu’est la charte ergonomique de la DGME.

On va déjà commencer par traduire les termes compliqués :

  • RGI : Référentiel Général d’Interopérabilité, il indique les formats devant être utilisés pour le stockage et l’échange de données. Il n’est pas téléchargeable directement sur le site de la DGME car il est en reformulation en ce moment.
  • RGAA : Référentiel Général d’Accessibilité pour les Administrations, il définit les règles d’accessibilité devant être respectées par les sites Web des administrations.
  • RGS : Référentiel Général de Sécurité, c’est un cadre pour gérer la sécurité des systèmes d’information (il ne s’agit pas uniquement de solutions logiciels).
Charte ergonomique − RGI − RGAA − RGS

Les 4 documents : Charte ergonomique − RGI − RGAA − RGS

Les cordonniers n’étant pas les mieux chaussés, on remarquera que :

  • le guide d’auto-évaluation n’est disponible qu’au format XLS (Microsoft Excel) qui ne figure pas au RGI,
  • l’URL permettant de télécharger ce guide contient des majuscules, des accents et des caractères spéciaux (parenthèses). Voir 1.2.2.2 Adresse du site (URL), troisième point, p18,
  • la page Contacts du site www.modernisation.gouv.fr ne propose qu’une adresse email alors qu’un formulaire est préconisé. Voir 3.2.3 Page « Contact »,
  • il doit y en avoir probablement d’autres…

Ça, c’’était l’entrée ! Sans plus attendre, attaquons le plat de résistance.

Les points sujets à discussion

3.2.3 Page « Contact », p96

Utile − En cas de mise en place d’un formulaire [Contact], il est conseillé d’avoir recours à un « captcha »…

Cela entre en complète contradiction avec le RGAA car les captchas ne peuvent être considérés comme accessibles.

De plus, le captcha est avant tout une facilité pour l’administrateur du site et non un aspect ergonomique pour l’internaute. Plutôt anti-ergonomique même…

Enfin, les captchas sont rarement utiles dans le cas des formulaires de contact puisque le contenu de ceux-ci sont traités humainement et ne font pas l’objet de publications. Par exemple, le formulaire contact de rouen.fr n’a pas reçu un seul formulaire rempli par un robot en l’espace de 2 ans.

1.2.2.1 Fil d’Ariane (chemin de navigation), p17

Recommandé − Le niveau de navigation en cours doit être différencié des niveaux supérieurs (par exemple par l’adoption d’un code couleur différent)

La différenciation ne peut s’effectuer sur l’adoption d’un code couleur différent car cela entre en contradiction avec le RGAA (« Ne pas utiliser uniquement la couleur pour donner accès à l’information », p45 du RGAA v1.0).

Recommandé − Chaque élément du fil d’Ariane est un lien hypertexte accessible directement.

Il n’est pas logique de disposer sur une page d’un lien pointant sur elle-même, à l’exception des liens de navigations intra-page).

1.2.2.4 Pied de page, p20

[Le pied de page] constitue un point de repère […] et comprend généralement […] les éléments suivants : […] le plan du site […]

Ne fallait-il pas dire “lien vers le plan du site” ?

Sinon, cela pose problème pour les sites à fort contenu sur lesquels une telle règle n’est plus tenable en considérant le point 1.4.2.1 stipulant que l’ascenseur vertical est utilisé si nécessaire, jusqu’à trois fois la hauteur de l’écran.

1.3.1 Polices de caractères, p25

Recommandé − […] il faut utiliser au minimum un corps de 10 pixels (11 pixels conseillés) […] indiquées en taille relative […].

Si les polices sont indiquées en taille relative, comment peut-on leur attribuer un corps de 10 pixels qui est une taille fixe ?

De plus, le fonctionnement des navigateurs tend à promouvoir l’utilisation d’un zoom réel (Firefox, Opera, Internet Explorer… dans leurs dernières versions) rendant l’intérêt des tailles relatives plus ou moins limité (ce n’est que mon avis).

Utile − Il est conseillé d’avoir recours à 3 polices différentes.

Ce point est plutôt difficile à appliquer s’il est tenu compte du point recommandant d’employer une police sans serif.

J’ajoute que trouver trois polices différentes sans serif, transposables sur les 3 principales plate-formes (Windows, Mac, Linux) relève de la gageure.

Il vaudrait mieux parler de taille de police et de graisse.

1.3.3 Couleurs, p27

Recommandé − Un test pratique pour évaluer la qualité du contraste consiste à visualiser les pages sur un écran monochrome.

Nous sommes en 2009, la production et la disponibilité d’écrans monochromes est extrêmement limitée.

Un test peut être réalisé en faisant une copie d’écran d’une page et en la désaturant au moyen d’un logiciel de retouche photo.

Mieux, il existe un plug-in pour The Gimp qui permet de simuler la vision d’un daltonien. Il est généralement installé par défaut et est accessible en allant dans le menu Affichage → Filtre d’affichage, choisir le filtre “Vision des couleurs déficiente”.

Recommandé − Par ailleurs, il est conseillé de toujours vérifier le résultat de l’impression d’une page avant d’arrêter les choix de couleur.

Cela rentre en contradiction avec le point 3.2.1.2 Longueur du texte, p94 :

Utile − […] il est conseillé de soigner la mise en page de l’article en ayant recours à une feuille de style CSS dédiée à l’impression.

1.3.5.3 Faciliter la compréhension de l’information présentée, p33

Utile − Les contractions, acronymes, abréviations, ainsi que les césures sont à proscrire, dans un mot ou dans une phrase.

Le standard HTML dispose de balises permettant l’utilisation d’abréviations tout en fournissant à l’utilisateur la possibilité d’obtenir rapidement leur signification.

Et une abréviation bien introduite facilite la compréhension lorsque son utilisation est fréquente (exemple : RGAA).

Enfin, certaines abréviations sont plus connues du public que leur équivalent complet (exemple : SNCF, Assédic, CCAS etc.).

1.4.3.1 Langages, p39

Recommandé − Les normes de développement préconisées sont : le HTML 4.01 […] sachant que le XHTML 1.0 […] doit être privilégié pour les nouveaux sites […]

La préconisation de XHTML 1.0 par rapport à HTML 4.01 laisse supposer que le premier est l’évolution logique de ce dernier, ce qui n’est pas le cas.

HTML et XHTML continuent d’évoluer de façon indépendante (HTML 4.01 → HTML 5, XHTML 1.0 → XHTML 2.0).

1.4.3.1 Langages, p40

Recommandé − […] CSS 1 […] sachant que le CSS 2 doit être privilégié pour les nouveaux sites.

Cela rentre en complète contradiction avec le point 1.4.1.1 Compatibilité des navigateurs, p34 qui impose la compatibilité avec Internet Explorer 6.

IE6 et d’autres navigateurs d’ailleurs ne permet pas une utilisation décente de CSS 2 (notamment les sélecteurs).

1.4.3.2 Normes de développement, p40

Recommandé − […] il faut recourir aux feuilles de styles CSS 1.

Point en contradiction avec le 1.4.3.1 Langages, p40.

Utile − Une moyenne de 100 Ko par page (hors page d’accueil) constitue actuellement une norme […].

100 Ko ne représentent nullement une norme en la matière. On retrouve ce chiffre un peu partout quand on parle d’accessibilité. La moyenne actuelle est plus élevée.

Et pourquoi la page d’accueil doit-elle faire exception ? C’est plutôt elle qui devrait faire l’objet de cette mesure !

De plus, parle-t-on de 100 Ko ou de 100 Kio ? Voir la page Octet de Wikipedia.

2.1.2 présentation des liens, p52

Recommandé − L’ouverture de liens externes doit se faire dans une nouvelle fenêtre ou onglet du navigateur.

Le consensus général est plutôt de laisser l’utilisateur décider par lui-même.

Les liens externes, par contre, doivent être indiqués clairement (par une icône ou un autre moyen, à l’image de ce que fait Wikipedia).

Il existe une exception à ce principe : les liens permettant d’afficher de l’aide dans les formulaires car un changement de page annulerait les champs déjà saisis.

2.3.1 Présentation et structuration des formulaires, p57

Recommandé − […] les informations de guidage sont situées à droite des champs de saisie.

Il peut être plus judicieux de placer les informations de guidage juste en dessous du champ de saisie.

L’œil navigue plus facilement de haut en bas que de gauche à droite. Si le champ de saisie est long, l’œil doit faire un aller-retour pour obtenir l’information de guidage et, la taille des champs variant, l’information ne se trouve jamais au même endroit.

Plus, cette règle ne fait aucun cas des écrans de faible largeur.

2.7.2 Présentation des images, p71

Recommandé − Pour les images n’apportant pas de plus-value informationnelle (bordure de tableau, puce, illustration) la balise ALT doit rester vide, afin de ne pas surcharger inutilement la tâche des lecteurs alternatifs d’accessibilité

Si le site respecte le RGAA, les images utilisées pour les bordures de tableau et les puces ne sont de toute façon pas concerné par ALT.

Ajoutons que ALT n’est pas une balise mais un attribut de balise et que les recommandations sont de le écrire en minuscules.

Conclusion

Avec tout ce que je viens de déballer, on pourrait croire que je ne veux pas de cette charte. Ce n’est pas le cas. Je suis très demandeur de ce type de référentiel car ils sont souvent issus d’un ensemble de bonnes pratiques.

Ils permettent également une sécurité supplémentaire : quand vous dites à votre supérieur qu’on ne peut pas faire ce qu’il demande, cela a moins de poids que si vous lui dites qu’un référentiel impose de ne pas le faire.

Concernant tous les points soulevés, ils ont été soumis à la DGME par le biais de la fameuse page Contact. Je n’ai à ce jour reçu aucune réponse, pas même un accusé de réception.


Actions

Information

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s




%d blogueurs aiment cette page :