Améliorez l'accessibilité de vos contenus web
Étiquettes : accessibilité, check-lists, lisibilité
Parcourez et téléchargez la check-list accessibilité de contenus web. Un ensemble de bonnes pratiques à adopter pour que votre site soit accessible à tous.
Dans l’article précédent, nous avons mis en lumière les différents points à tester pour s’assurer de l’accessibilité de nos pages web. Maintenant que vous avez démasqué les dysfonctionnements de vos publications, découvrez comment gommer ces défauts rapidement en utilisant le check-list accessibilité de contenu web (pdf 150 Ko).
Proposez un article 100% lisible
- Evitez de justifier vos textes, cela complique la lecture. Mieux vaut les aligner à gauche ou à droite.
Renoncez aux sauts de ligne multiples, ils n’apportent aucune valeur ajoutée.
exemple de texte justifié sur le web. Issu du blog de Marcel Sel.
- Hiérarchisez vos informations, sur le fond et sur la forme. Le titre de votre page (et uniquement celui-là) doit être en « H1« . Vos sous-titres de premier niveau sont en H2, vos sous-titres de deuxième niveau sont en H3 et ainsi de suite.
- Rédigez vos liens avec un intitulé clair et explicite.
ex: « découvrez le premier article sur l’accessibilité numérique » plutôt que « cliquez ici pour voir l’article précédent ».
- Indiquez le format, le poids et, si c’est pertinent, la langue du document à télécharger.
- Annoncez à vos lecteurs lorsque les liens proposés renvoient sur une nouvelle fenêtre ou un nouvel onglet.
Décrivez vos contenus multimédia
- Donnez un nom cohérent et parlant au fichier image (ou vidéo) avant de le charger sur Internet.
ex: « chien-noir-et-blanc.jpeg » plutôt que « chien38.jpeg » ou pire « DCIM349504.jpeg ».
- Utilisez les tirets (-) plutôt que les underscore (_). Ces derniers ne sont pas considérés comme des espaces et rendre le nom illisible. ex: « chien-noir-et-blanc.jpeg » plutôt que « chien_noir_et_blanc.jpeg »
- Evitez les accents et autres caractères spéciaux, ainsi que les espaces.
ex: « au-coeur-de-l-ete.jpeg » plutôt que « au cœur de l’été.jpeg »
- Ajoutez un texte de remplacement (Alt-tag) à vos images et vos vidéos de moins de 70 caractères.
- Utilisez-le pour expliquer le contexte de l’image par rapport à l’article. Vous pouvez, par exemple, reprendre le titre de votre article.
- Si possible, proposez une légende exhaustive. Elle décrit l’image et son lien par rapport l’article.
Assurez la compréhension de votre message
- Employez un vocabulaire orienté vers tous les publics.
Evitez le jargon, les termes techniques et les noms de produits.
- Explicitez les abréviations si elles ne font pas partie du langage courant.
ex: inutile d’expliquer GSM, par contre, il est intéressant de traduire « E.P » = Établissement Public.
- Orientez vos utilisateurs en leur donnant des indications claires.
ex: « cliquez sur S’inscrire à la Newsletter » plutôt que « Cliquez sur le bouton rond en bas à droite ».
Maximisez la lisibilité de vos contenus
- Veillez à ce que les contrastes entre le texte et l’arrière plan soient optimaux.
Le cas échéant, proposez une version Noir & Blanc de votre site.
- Assurez-vous que l’information ne soit pas uniquement véhiculée par les codes couleurs.
Un exemple d’information uniquement véhiculée par la couleur: légende d’une carte géologique
- Vérifiez la possibilité de mettre sur pause tout contenu en mouvement. De manière générale, les petites animations en arrière-plan perturbent la lecture et demandent plus de concentration, évitez-les si elles ne sont pas indispensables.
Téléchargez la check-list accessibilité de contenu web
Pour garder ces bonnes pratiques en mémoire: téléchargez la check-list accessibilité de contenu (pdf 150 Ko). À utiliser sans modération. N’hésitez pas à la commenter, à proposer des améliorations, des ajustements.
Cette check-list a été élaborée à partir des recommandations préconisées par le W3C (World Wide Web Consortium, organisation non lucrative qui définit des recommandations pour les technologies du web).
Commentaires
Je suis ravi d’être montré ici en (mauvais) exemple. Toutefois, normalement, je ne justifie normalement jamais le texte, comme on peut le voir sur mon blog. Il se fait que je n’ai pas fait attention à un changement de défaut. Normalement, j’écris toujours en drapeau, mais les deux derniers (longs) textes se sont en effet mis en page d’office en mode justifié. Je veillerai à l’avenir à ne plus commettre cette erreur. Mais notez bien que la pire que je commette, et avec délice, c’est de publier les plus longs textes de blogs du monde, chère Hélène 🙂
Bonjour Marcel Sel,
il n’y avait rien de personnel dans le choix de cette « mauvaise pratique » évidemment 🙂 J’avais juste besoin d’un exemple concret pour que nos lecteurs puissent visualiser l’impact que cela a sur la lisibilité.
J’ai effectivement remarqué que vos billets n’étaient normalement pas justifiés. Petit conseil pour la longueur de vos textes: faites plusieurs « épisodes », plusieurs articles courts en les publiant de manière rapprochée: plus de trafic, plus de visibilité. Belle semaine à vous!
Chère Hélène, il n’y a pas de problème. Quant à la mise en épisode de mes articles, si j’avais le temps, je le ferais. Cela dit, j’ai fait ma spécialité des articles longs et cela m’amène quand même plus de 20.000 visiteurs uniques par mois. D’où une autre recommandation utile, peut-être : faites ce que vous êtes le ou la seul(e) à faire. L’unicité et l’originalité a aussi un rôle à jouer. Cela dit, je suis évidemment conscient qu’en jouant la longueur, je me coupe d’un certain nombre d’internautes. Mais décider, c’est choisir 🙂
Et normalement, je ne répète pas normalement le mot normalement dans une seule phrase. Il faut se relire !
des conseils à mettre en pratique !
Bonjour,
Je me permets de vous écrire pour vous signaler qu’un certain nombre de petites erreurs figurent dans votre billet.
Voici une petite liste des points qui, selon moi, sont à revoir :
Titres de section :
En matière d’accessibilité, il est tout à fait possible d’utiliser plusieurs dans une même page. Le tout est de proposer une hiérarchie de titres logique et exhaustive. Je vous invite à lire par exemple ce très bon billet qui parle de cela : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Format et poids des documents à télécharger :
Il est important que vous précisiez que le poids et le format (+ éventuellement la langue) des documents à télécharger soient inclus *dans* l’intitulé du lien. Vous pourriez d’ailleurs reprendre vos 2 liens qui pointent vers la checklist en y incluant « (pdf 150 Ko) » directement dans ces derniers.
Abréviations :
En terme d’accessibilité, la règle est en réalité quelque peu différente. Il s’agit de spécifier la signification des abréviations lorsqu’ils sont rencontrés pour la première fois dans la page (au minimum).
Concrètement, la signification de l’abréviation GSM que vous prenez en exemple devrait être donner, pour sa première occurrence, tel que par exemple : GSM (Global System for Mobile Communications).
Sinon, une alternative consiste à proposer un glossaire incluant toutes les significations des abréviations utilisés sur un site. En les centralisant cela permet notamment de ne plus les traiter au cas par cas.
Contrastes de couleurs :
Lorsque l’on n’est pas en mesure de proposer des contrastes de couleurs suffisants, il ne s’agit pas forcément de proposer une version « Noir & Blanc ». Une version où les contrastes sont simplement améliorés est suffisante (accentuation des couleurs de texte ou allègement des couleurs d’arrière plan par exemple).
Images :
Tout d’abord, le nom donné au fichier image n’a aucun impact sur l’accessibilité (en vérité potentiellement si ; mais cela serait un peu long à expliquer ici…). Toutefois, ce que vous préconisez à ce sujet peut-être pertinent, pour le référencement notamment ; mais pas spécifiquement pour l’accessibilité.
Autre remarque, désormais en matière d’accessibilité toujours, il n’est pas obligatoire de se limiter à 70 caractères pour spécifier le texte de remplacement d’une image (attribut alt). C’est une recommandation qui a disparu des différents référentiels d’accessibilité.
Aussi, on ne parle pas de alt pour les vidéos mais plutôt de transcription textuelle.
Enfin, votre article laisse entendre qu’il faut systématiquement renseigner un texte de remplacement pour chaque image, ce qui n’est pas le cas. Je vous invite à consulter cette page où l’ensemble des cas de figure sont présentés : http://wiki.accede-web.com/notices/contributeurs/utiliser-les-images-de-maniere-accessible
Si vous souhaitez davantage d’informations sur ces différents points et si vous ne la connaissez pas déjà, je vous propose de consulter cette notice d’accessibilité éditoriale : http://wiki.accede-web.com/notices/contributeurs
Bon après-midi.
Johan
Bonjour Johan,
merci pour vos précisions, cela dit, il ne s’agit pas d’erreurs commises dans l’article, mais plus d’une absence de détails à certains niveaux. La vocation de ce billet est de prévenir les professionnels et blogueurs de l’importance des normes d’accessibilité, sans nous positionner nous-mêmes comme experts. C’est d’ailleurs pour cela que nous renvoyons plusieurs fois vers LE site en la matière, W3C.
Cela dit, je ne comprends pas votre remarque concernant les titres, je fais justement état de l’importance d’une bonne hiérarchie à ce sujet: H1 pour le titre de la page (et de l’article) et H2 pour les sous-titres, H3 pour les sous-sous-titres, etc.
Concernant le poids et le format du document à télécharger, je précise justement le poids et le type du document de la check-list proposée, je ne comprends donc pas non plus votre remarque. Cela dit, il est nécessaire de justifier dans mon article que c’est à côté (dans) l’intitulé du lien qu’il faut le mettre, en effet.
Ensuite, pour les abréviations, pensons aussi à l’expérience utilisateur et pas seulement aux normes d’accessibilité « brutes ». Donc, GSM pourrait être explicité en fonction du contexte, mais pas systématiquement car cela risquerait d’alourdir inutilement le contenu.
Par rapport au contraste des couleurs, je préfère proposer à nos lecteurs une version N/B qu’une amélioration du contraste. Même si c’est une solution plus radicale, elle permet directement d’être sûr que le contenu est accessible. Les nuances sont souvent trop subjectives et pensons aux daltoniens 🙂
Pour le nom de l’image, il est en fait important en termes d’accessibilité en cas de téléchargement de l’image. Mieux vaut télécharger « petit-chien-blanc.jpeg » plutôt que « DCIM23405.jpeg », en dehors du contexte (dans le dossier images, par exemple), cela pourrait être utile également.
Merci pour vos précisions concernant l’alt-tag et la transcription textuelle, c’était pertinent. De même, merci pour vos liens afin d’aller plus loin. Je précise donc que notre but ici était d’offrir rapidement un ensemble de bonnes pratiques pour rendre les contenus accessibles. Rien n’est « faux » en soi, il est important de le préciser. Cela dit, les nuances que vous apportez sur certains points sont intéressantes.