Écrire des contenus accessibles

Une écriture accessible est une bonne écriture. Elle rend votre contenu plus facile à exploiter pour tout le monde. Voici quelques conseils sur la façon d’écrire avec l’accessibilité à l’esprit.

Écrire clairement

La qualité de la documentation dépend de ce que les gens peuvent en tirer. Si l'écriture est trop compliquée, ils ne seront pas en mesure de l'utiliser. Un langage simple améliore l'accessibilité.

Gardez votre écriture simple et concise en suivant ces conseils :

Structure des titres

C'est essentiel. Ils permettent aux utilisateurs de lecteurs d'écran d'accéder directement à un contenu spécifique, ce qui peut leur faire gagner du temps.

Travaillez avec le système dans lequel vous écrivez. Tous les outils populaires, comme Microsoft Word, PowerPoint et Open Office proposent des options de style et de mise en forme pour vous aider à construire la structure appropriée dans vos documents. Utilisez les styles et les options de mise en forme fournis dans votre outil d'édition de contenu choisi.

Exemple : Titre 1 (

)

Les chiffres dans le style de titre créent un contexte structurel pour le lecteur d'écran et aident les utilisateurs non visuels à comprendre le contenu même quand ils ne peuvent pas visualiser les pauses visuelles dans le document.

Exemple :

Accessibilité dans l'éducation

Accessibilité à Blackboard

Plus de détails sur la conception de contenus accessibles

Mettre en valeur le contenu

Les lecteurs d'écran ne permettent pas d'identifier les styles de police, y compris ce qui suit :

  • Couleur
  • Gras
  • Italique
  • Souligné
  • Barré

Utilisez ces styles pour fournir des pauses visuelles. Ne les utilisez pas comme le seul moyen d'indiquer l'importance ou de véhiculer une information.

Exemple : Le texte en rouge ressemble à une alerte. Les utilisateurs de lecteurs d'écran ne sauront pas que le texte est rouge. Ils ratent l'indication et ne savent pas qu'il s'agit d'une alerte.

Lorsque vous mettez en évidence un élément visuellement, utilisez aussi une alternative accessible. Mettez un point d'exclamation à la fin de la phrase si elle est importante. Les lecteurs d'écran appliquent l'intonation appropriée lorsqu'ils rencontrent des points d'exclamation et d'interrogation. Cela signifie que l'outil ne lit pas « point d'interrogation », mais adopte un ton interrogateur comme s'il lisait une question à haute voix.

Exemple : Une fois encore, ne vous limitez pas aux styles de police pour marquer l'importance.

Images

Demandez-vous quel est le but de l'image. Est-ce pour donner à une page un attrait visuel ? Ou pour donner un à utilisateur ayant une vue normale une référence visuelle de ce qui l'attend ? Est-ce que l'image doit être exploitée par tous les utilisateurs pour qu'ils comprennent votre contenu ?

Si vous ne savez pas quoi répondre, n'utilisez pas cette image. Elle ne serait qu'encombrante et distrayante pour les personnes qui ont des troubles d'apprentissage.

Texte Alt

Si vous utilisez un SGA ou un site web pour transmettre des informations, vous rencontrerez un champ pour texte de remplacement, ou texte alt, lors du téléchargement d'une image. Pour les images décoratives, laissez le champ du texte de remplacement vide. Le lecteur d'écran va ignorer l'image dans ce cas. Une image est décorative quand elle ne vient pas compléter l'information sur la page.

Plus de détails sur les images décoratives sur le site de l'initiative pour l'accessibilité du Web

Exemple : Si vous avez une image montrant les outils dans une interface utilisateur (UI), décrivez comment y accéder et le contenu de la page. Visualisez un exemple de description d'une image sur la page.

Si vous ne voulez pas que le lecteur d'écran ignore l'image, incluez un texte de remplacement dans vos images. Vous n'êtes pas obligé de dire "Image de", car les outils d'assistance savent déjà que c'est une image. Soyez concis, clair et descriptif.

N'utilisez pas le même texte de remplacement pour toutes les images, par exemple "Image illustrant le texte associé". Cela n'ajoute aucun sens et augmente l'encombrement.

Pour des images complexes, gardez le texte de remplacement court (6 ou 7 caractères) et incluez une légende sous l'image qui est visible pour tout le monde et fournit une description claire.

Infographies

Les infographies exigent une alternative au texte. Il s'agit d'un récit narratif racontant l'histoire que les utilisateurs obtiennent à partir du visuel. L'alternative textuelle doit se trouver sur la page qui suit immédiatement l'infographie. Incluez un lien d'ancrage en haut de la page pour afficher le texte alternatif.

Voir un exemple d'une infographie avec une alternative textuelle.

Texte en images

Conformément aux directives WCAG, le texte ne doit pas être inclus dans le cadre d'une image. Expliquez plutôt l'image dans le texte sur la page.

Liens

Il est essentiel que vos liens soient descriptifs. Chaque lien doit décrire ce que l'utilisateur trouvera en cliquant dessus. Cela est essentiel pour l'outil Liste de liens que certains lecteurs d'écran fournissent. Cet outil répertorie uniquement les liens sur une page, rien d'autre. Il n'y a pas de contexte supplémentaire pour le lien.

Exemple : Sur cette page, l'outil Liste de liens lirait ce qui suit : "Visualisez un exemple de description d'une image sur la page", "exemple d'une infographie avec une alternative textuelle", etc. Chaque lien décrit ce que vous pouvez vous attendre à trouver lorsque vous le sélectionnez.

  • Évitez d'utiliser des expressions génériques telles que "cliquez ici" ou "voir plus". Les outils Liste de liens liront le texte du lien exactement comme saisi. Lorsque le même lien est répété (imaginez que vous entendez "cliquez ici, cliquez ici, cliquez ici" à plusieurs reprises), il crée le chaos et la confusion pour les utilisateurs. Ils ont besoin de comprendre où le lien va et pourquoi ils doivent cliquer ici. Les liens descriptifs fournissent ce contexte.
  • Les adresses Web ou URL ne sont pas considérées comme informatives et ne doivent pas être utilisées. Le lecteur d'écran lit chaque lettre individuellement. Au lieu de rendre le texte descriptif.
  • L'ouverture de liens dans une nouvelle fenêtre peut désorienter l'utilisateur. Limitez-la au maximum. Faites savoir à vos utilisateurs lorsque vous utilisez une nouvelle fenêtre.

Liste et tableaux

Laissez les outils dans lesquels vous créez du contenu faire le travail. Utilisez les puces, listes numérotées et outils tabulaires dans l'éditeur de contenu. Ou affichez la source et utilisez les balises HTML correctes.

Listes

Des listes à puces correctement créées (

    ) indiquent aux utilisateurs du lecteur d'écran le nombre d'éléments présents dans la liste à puces.

    Des listes numérotées correctement créées (

      ) indiquent à l'utilisateur du lecteur d'écran le nombre d'éléments présents dans la liste numérotée et lisent le numéro de chaque article.

      Tableaux

      Préférez les listes aux tableaux autant que possible ! Vous pouvez rendre des tableaux accessibles, mais les utilisateurs de lecteurs d'écran doivent connaître des commandes clavier avancées pour y naviguer et les comprendre.

      Utilisez des en-têtes de colonnes (). Le lecteur d'écran indique alors le nom de la colonne pour chaque cellule dans laquelle l'utilisateur se positionne. Cela permet de mettre le contenu de la cellule en contexte. Tenez compte de la façon dont chaque cellule sera lue lorsque vous nommez les colonnes et ajoutez des informations à la cellule.

      N'utilisez jamais des tableaux pour créer une présentation visuelle du contenu.

      Exemple de tableau accessible

      Commandes clavier

      Il existe des normes mondiales pour les commandes clavier dans le contenu Web. Par exemple, vous pouvez appuyer sur Tab pour mettre l'accent de votre ordinateur sur le bouton suivant. Vous n'avez pas besoin de décrire ceux-ci. Pour une liste des commandes globales, consultez ce Guide de référence rapide des commandes clavier de JAWS.

      Parfois, les développeurs ont besoin de créer des commandes clavier originales pour leur produit. Par exemple, Blackboard Collaborate contient des commandes clavier originales pour activer et désactiver le micro. Documentez ces commandes clavier originales dans vos rubriques.

      Les instructions relatives aux commandes à l'aide du clavier et à l'aide de la souris représentent deux approches distinctes et ne doivent pas figurer dans le même paragraphe. Si les commandes Mac sont différentes de celles des commandes de PC, utilisez deux phrases dans le paragraphe sur la frappe.

      Exemple 1

      Par défaut, le son et l'image sont désactivés lorsque vous procédez à l'installation. Cliquez sur les icônes du micro et de la caméra pour participer pleinement à la réunion.

      À l'aide du clavier, appuyez sur Alt+M pour activer et désactiver votre micro. Appuyez sur Alt+C pour activer et désactiver votre caméra.

      Exemple 2

      Des boutons de navigation apparaissent lorsque vous partagez une présentation, ce qui vous permet de passer d'une diapositive à une autre.

      Avec votre clavier, appuyez sur Alt+Page précédente pour passer à la diapositive suivante. Appuyez sur Alt + Page suivante pour revenir en arrière. Sur Mac, appuyez sur Alt+Fn+Flèche vers le haut et Alt+Fn+Flèche vers le bas.

      Vidéo

      Les vidéos doivent être sous-titrées. Pour en savoir plus, consultez la rubrique sur le sous-titrage des vidéos.