Améliorer l’accessibilité de votre carnet

L’accessibilité du web est la problématique de l’accès aux contenus et services web par les personnes handicapées (déficients visuels, sourds, malentendants, etc.) et plus généralement par tous les utilisateurs, quels que soient leurs dispositifs d’accès (mobile, tablette, etc.) ou leurs conditions d’environnement (niveau sonore, éclairement, etc.). Les pratiques d’accessibilité cherchent à réduire ou supprimer les obstacles qui empêchent les utilisateurs d’accéder à des contenus ou d’interagir avec des services.

Wikipédia

Hypothèses repose sur le logiciel WordPress. Rendre ce logiciel et, de fait, les carnets Hypothèses accessibles en lecture comme en écriture relève en grande partie des missions des équipes de WordPress et non du périmètre de l’équipe d’Hypothèses.

Lire les actualités du groupe de travail « Accessibilité » de WordPress (en anglais).

En tant qu’auteur·e de contenus sur Hypothèses, vous êtes libre d’écrire et de mettre en forme vos textes, ainsi que de structurer et personnaliser votre carnet comme vous le souhaitez (dans les limites des possibilités proposées sur Hypothèses). Si rendre accessible le logiciel WordPress relève de ses équipes de développement, certaines bonnes pratiques éditoriales, qui ne dépendent que de vous, permettent d’améliorer encore plus l’accessibilité de votre contenu.

Voici dix bonnes pratiques recensées pour améliorer l’accessibilité de votre carnet :

Sommaire

Mise en forme du texte

Ne pas justifier le texte

Justifier du texte n’est pas une bonne pratique sur Internet et entre en contradiction avec les recommandations du W3C (en anglais).
Si les logiciels de PAO tels que Scribus ou Adobe InDesign, ou dans une moindre mesure, les logiciels de traitement de texte tels que LibreOffice ou Microsoft Word, possèdent des options pour optimiser la justification de texte, il n’y en a pas de telles sur Internet, en langage HTML. La justification en HTML ne permet donc pas d’éviter les « lézardes » au milieu des paragraphes, ni de conserver un espace constant entre les lettres d’un mot.

Les espaces entre les mots peuvent ralentir la lecture, et les espaces inconstants entre les lettres risquent de compliquer la localisation des limites entre les mots. Un texte justifié sur Internet peut alors accentuer la fatigue visuelle des lecteurs et lectrices, et provoquer une désorientation cognitive, notamment chez les personnes dyslexiques. De plus, les lignes plus ou moins longues d’un texte aligné à gauche permettent à l’œil de s’y retrouver plus rapidement, lors du défilement d’un texte sur une page Internet.

À lire à ce sujet : Doit-on justifier le texte sur un site Internet ? (Fabrice Court)

Utiliser les niveaux de titre

Utiliser des blocs « Titre » pour structurer le contenu d’un billet, plutôt que signifier des niveaux de titres par du gras, de la couleur ou une taille de police plus importante dans des blocs « Paragraphe » permet de rendre accessible cette structure à l’ensemble du lectorat du billet, humain ou robot. La cohérence de la structuration permet une représentation mentale de la hiérarchie du contenu et par conséquent une navigation dans le contenu plus aisée, notamment pour les personnes utilisant des lecteurs d’écran ou une navigation au clavier, les niveaux de titre étant alors utilisés pour naviguer dans un contenu. Une page Internet bien structurée avec des niveaux de titre est également mieux référencée par les moteurs de recherche.

Le titre d’un billet a un niveau de titre 1. Les niveaux de titre utilisés dans le contenu du billet peuvent être de niveau 2, 3, etc.

Les blocs « Titre » et les niveaux de titre sont reconnus comme tels par les robots et par les lecteurs d’écran et permettent de rendre compte du « sommaire » du billet.

Il est ainsi conseillé de ne pas sauter de niveau de titre (par exemple, passer d’un niveau de titre 2 à un niveau de titre 4) pour des raisons esthétiques (taille, couleur, espacement), car cela rendrait moins lisible la structure du billet.

Préférez un test approfondi du thème graphique que vous envisagez d’utiliser, avec un billet de test comportant tous les niveaux de titre, pour vous assurer que tous vous conviennent. Si ce n’est pas le cas, préférez le choix d’un autre thème graphique qui vous conviendrait mieux.

À lire à ce sujet : Mettre en place une hiérarchie de titres (MDN Web Docs)

Proposer des intitulés de liens descriptifs

L’un des intérêts majeurs d’écrire sur Internet par rapport au papier est la possibilité de créer des liens entre des contenus, notamment sous la forme de liens hypertextes. Le lien est constitué d’une adresse Internet (URL) associée à un mot ou un morceau de phrase qui constitue son intitulé. Il est recommandé de choisir cet intitulé pour qu’il soit le plus descriptif possible du lien qui lui est associé, et qu’il soit compréhensible hors du contexte de la phrase ou du billet dans lequel il est inséré. En effet, les interfaces des lecteurs d’écrans renvoient une liste des liens proposés sur la page Internet sur laquelle leur utilisateur/trice se trouve (par exemple un billet). Il leur est donc difficile de s’y retrouver parmi une liste proposant, par exemple :

  • lien
  • télécharger
  • cliquer ici
  • ici

De la même manière, pour faire un lien vers une adresse Internet, il est préférable de faire un lien hypertexte sur du texte plutôt que sur l’URL entière, en proposant par exemple un lien vers le portail d’Hypothèses plutôt que vers https://hypotheses.org (lire ces deux liens à voix haute donnant une idée de la meilleure lisibilité du premier).

À lire à ce sujet :
Link Text and Appearance (en anglais) (WebAIM)
Rédiger des intitulés de liens explicites (AcceDe Web)

Donner des détails sur la destination des liens

La bonne pratique concernant les liens descriptifs s’applique notamment pour les liens menant vers des éléments à télécharger. Il est intéressant, pour ce type de liens, de préciser le format et le poids du fichier qui va être chargé à l’ouverture du lien. Ainsi, le lecteur ou la lectrice peut savoir d’emblée si télécharger ce fichier va épuiser son forfait Internet, si son terminal peut lire le format du fichier, ou s’il est préférable de s’abstenir de cliquer pour l’instant.

De même, lorsqu’un lien pointe vers une page Internet ou un document rédigé dans une langue différente de celle du billet d’origine, c’est une bonne pratique de noter au niveau du lien la langue de destination afin que le lecteur ou la lectrice puisse choisir de cliquer sur le lien en connaissance de cause.

Enfin, selon le W3C (en anglais), il n’est généralement pas recommandé de forcer l’ouverture des liens dans un nouvel onglet ou une nouvelle fenêtre du navigateur. En effet, le passage forcé à une nouvelle fenêtre ou un nouvel onglet peut désorienter les personnes dans l’espace numérique dans lequel elles se trouvent, notamment pour des personnes ayant des troubles visuels. Changer d’onglet ou de fenêtre brise notamment le fil d’Ariane dans le navigateur Internet, en empêchant de revenir à la page précédente.

Si l’ouverture dans un nouvel onglet ou une nouvelle fenêtre est néanmoins choisie, il est recommandé d’ajouter une mention le signalant au niveau du lien.

Conserver la taille par défaut des blocs de texte

Les thèmes graphiques disponibles sur Hypothèses respectent les recommandations d’accessibilité du W3C en terme d’accessibilité en ce qui concerne l’affichage des textes (16px à 18px sur un écran d’ordinateur), en proposant une taille de police de 16px par défaut. C’est en effet le code du thème graphique (sa feuille de style CSS) qui définit la taille par défaut de la police, les choix de polices et les éventuelles options de couleur.

Dans l’éditeur de texte, il est possible de modifier la taille du texte d’un bloc « Paragraphe » dans l’onglet « Bloc » de la colonne de réglages, soit en précisant un nombre de pixels, soit en choisissant parmi les tailles prédéfinies (de « petit » à « énorme »). Par défaut, la taille prédéfinie est « normal », qui correspond à 16px. Cette taille respectant les standards d’accessibilité, il est recommandé de n’en déroger que de façon marginale.

Dans le cas de copié-collé de texte depuis un document ou une page Internet, certaines balises de mise en forme d’origine peuvent être conservées. Il se peut donc que le texte n’adopte pas la taille par défaut définie par le thème graphique, en raison de la présence de ces balises. Il est donc recommandé de nettoyer la mise en forme originale de tout texte externe avant de le coller dans un billet, afin d’éliminer ces balises résiduelles.

Avec le thème graphique Hueman, il est possible d’ajuster la taille de la police du texte, qui est de 16px par défaut. Ici aussi, il est recommandé de ne pas s’éloigner de la fourchette de taille de 16px à 18px pour une lisibilité optimale.

Les navigateurs Internet actuels permettent d’augmenter la taille des caractères très simplement. Il est donc recommandé de conserver une taille de police “standard” et de laisser au lectorat la possibilité d’ajuster la taille des caractères selon ses besoins.

Les couleurs

Veiller à ce que le contraste entre le texte et son fond soit assez élevé

Les thèmes graphiques disponibles sur Hypothèses permettent souvent de personnaliser la couleur des fonds de page et, bien que moins fréquemment, celle de certains textes.

Dans l’éditeur de blocs, vous avez la possibilité de changer la couleur du texte d’un bloc paragraphe, ou la couleur de son fond.

Il est donc relativement aisé de créer des associations de couleurs de fond/texte peu contrastées. Or, il est important de s’assurer de la bonne lisibilité de vos contenus. Le service en ligne tanaguru contrast finder, par exemple, permet de vérifier et de corriger le contraste entre deux couleurs, en accord avec les standards d’accessibilité sur Internet.

Ne pas donner une information uniquement par la couleur

« Cliquez sur le bouton rouge », par exemple, n’est pas une information exécutable pour les personnes ne distinguant pas la couleur rouge. C’est notamment la raison pour laquelle, de manière standard, les liens sont signalés par un texte à la fois en couleur (souvent bleu) et souligné.

Ainsi, en écriture sur Internet, souligner du texte qui n’est pas un lien ne constitue pas une bonne pratique : le soulignement est trop assimilé aux liens, et souligner du texte n’en étant pas peut induire en erreur des lecteurs et lectrices.

Les médias

Ajouter du texte alternatif aux images

Ajouter du texte alternatif à une image permet de rendre accessible l’information normalement donnée par l’image lorsque celle-ci ne peut être chargée (connexion limitée) ou vue (utilisateurs/trices de lecteurs d’écran ou robots d’indexation). L’information à donner dans ce champ « Texte alternatif » diffère selon le type d’image :

  • l’image contient du texte qui a une fonction (ex : l’image est un bouton marqué « Télécharger ») : noter dans « Alt » la fonction exprimée par l’image ;
  • l’image contient du texte qui ne figure pas dans le texte entourant l’image : noter ce texte dans « Alt » ;
  • l’image ne contient pas de texte mais est nécessaire à la compréhension du billet ou de la page : décrire le sens de l’image dans « Alt » – si expliquer l’image devient long dans le champ alternatif, il peut être intéressant de l’expliquer dans le texte autour de l’image, car l’explication peut alors vraisemblablement aider d’autres personnes à la compréhension de cette image ;
  • l’image a une visée purement décorative et esthétique : ne rien noter dans « Alt » permet d’éviter du « bruit » inutile et permet de se concentrer sur le texte ;
  • l’image contient de l’information par ailleurs donnée dans le texte autour de l’image : dans « Alt » peut alors être noté la mention « Voir texte ».

Lorsqu’une image est cliquable et renvoie vers une page Internet ou un document à afficher ou télécharger, l’attribut « Alt » doit indiquer la destination du lien plutôt que décrire l’image en elle-même.

Pour en savoir plus sur l’attribut « Alt » :
Le texte alternatif, comment configurer le bon alt tag de vos images ? (Pauline Foulon, Écrire pour le web)
Utiliser les images de manière accessible (AcceDe Web)
An alt Decision Tree (en anglais) (arbre de décision sur le site de la Web Accessibility Initiative)

Offrir des alternatives à l’audio ou à la vidéo

Il est recommandé de présenter aux lecteurs et lectrices de votre carnet des alternatives textuelles à chaque contenu multimédia, lorsque celui-ci n’est pas purement décoratif et est nécessaire à la compréhension du billet ou de la page.

Pour les vidéos, l’accessibilité peut être améliorée sur le média lui-même, en proposant des sous-titres, une interprétation en langue des signes ou encore une audio-description. Ces éléments sont à intégrer directement à la vidéo, préalablement à son insertion sur le carnet.

Sur le carnet lui-même, une bonne pratique peut-être de proposer une transcription textuelle affichable ou téléchargeable, ou tout autre fichier ou lien donnant accès à une alternative au média audio ou vidéo.

Désactiver la lecture automatique des médias

Ouvrir une page Internet, se voir infliger le son d’un fichier audio ou vidéo instantanément et sans l’avoir souhaité, devoir chercher quel onglet du navigateur émet ce son, puis dans la page Internet quel bouton permet de l’arrêter, est une situation malheureusement encore trop fréquente ! Les images en mouvement, le son, et la situation de surprise provoquée par leur lancement automatique peuvent être source de frustration pour tout le monde, et de stress pour les personnes ayant des troubles cognitifs ou souffrant par exemple d’épilepsie. Une vidéo ou un fichier audio lancé automatiquement peut rendre la page Internet entièrement non-navigable pour une personne utilisant un lecteur d’écran, puisque le son du média couvre la voix du lecteur d’écran.

Dans le cas de vidéos ou de lecteurs audio insérés comme contenus embarqués depuis des services externes, les réglages pour empêcher la lecture automatique se trouvent généralement sur le site d’origine et dans la configuration du code d’intégration.

Dans le cas d’une vidéo ou d’un fichier audio hébergés sur le carnet, les réglages de lecture automatique se trouvent dans l’onglet « Bloc » de la colonne de réglages. Dans le respect des recommandations d’accessibilité sur Internet, la lecture automatique est désactivée par défaut. Pour des raisons similaires, la barre de contrôle (lecture, pause, volume) est visible sur les vidéos par défaut et, bien qu’il soit possible de la cacher dans l’onglet « Bloc », il est déconseillé de le faire.


Billet rédigé dans le cadre d’un travail autour de l’accessibilité mené par OpenEdition, avec l’aide de Valérie Mansard, Éditrice et référente accessibilité numérique pour les publics empêchés de lire chez ENS Editions.

Voilà, c’est fait, vous avez maintenant terminé la formation Hypothèses en ligne ! Vous avez désormais toutes les clefs pour prendre en main votre carnet de recherche Hypothèses. Si vous avez déjà assisté à l’une de nos formations en présentiel, nous espérons que ce parcours virtuel vous aura permis de réviser certaines bonnes pratiques, voire d’en découvrir de nouvelles !
Nous avons conçu ce parcours de formation pour que vous puissiez revenir à votre guise sur tel ou tel billet, afin de revoir un point de la formation en particulier. N’hésitez pas à explorer également le reste des billets de la Maison des carnets, en cliquant sur le titre du blog pour revenir à la page d’accueil, ou en utilisant les menus de navigation et les widgets à votre disposition !

À très bientôt sur Hypothèses !

L’équipe d’Hypothèses

Vous vous trouvez ici dans un espace de formation à la prise en main d’un blog WordPress sur la plateforme Hypothèses.

Vous pouvez naviguer dans les modules de formation via les boutons ci-dessous, ou via le menu de navigation en colonne latérale. Pour explorer le reste du blog d’accompagnement technique et éditorial d’Hypothèses, cliquez sur les éléments du menu de navigation horizontal en haut du blog, ou sur l’en-tête du blog pour revenir à l’accueil de celui-ci.


Image mise en avant et image de fin : Open par Kasper Jensen sous licence Creative Commons BY-NC-SA

Citer ce billet : “Améliorer l’accessibilité de votre carnet”, par Marion Wesely. Publié sur La Maison des carnets le 1 janvier 2020. Lien : https://maisondescarnets.hypotheses.org/4553.

Marion Wesely

Anciennement Chargée de l'accompagnement des communautés et de la valorisation des contenus d'Hypothèses / Community manager & communication officer for the Hypotheses platform (OpenEdition)

1 réponse

  1. 22 juin 2020

    […] Artikel ist eine Übersetzung des Artikels „Améliorer l’accessibilité de votre carnet“ von Marion Wesely. Der Artikel entstand als Teil eines Projekts über Barrierefreiheit, das von […]

Rechercher dans OpenEdition Search

Vous allez être redirigé vers OpenEdition Search