Écrire des contenus accessibles

Sur cette page

    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 :

    • Faites des phrases courtes. Elles doivent contenir environ 20-25 mots au plus.
    • Utilisez des mots simples. Utilisez des mots (ou des combinaisons de mots) avec 1-2 syllabes lorsque cela est possible. Par exemple, utilisez « pour » au lieu de « dans le but de ».  Consultez des sites tels que les suivants pour trouver des mots simples à utiliser :
    • Utilisez la contraction.
    • Utilisez des outils comme Hemmingway Editor pour mesurer la lisibilité de votre texte. Pour répondre aux normes WCAG, visez un niveau de lisibilité de 8 et moins.

    Structure des intitulés

    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 (<h1>)

    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 :

    <h1>Accessibilité dans l'éducation</h1>

    <h2>Accessibilité chez Blackboard</h2>

    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 avez besoin de mette en évidence un élément visuel, utilisez 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 aux points d'exclamation et d'interrogation. Cela signifie que l'outil ne lit pas "point d'interrogation" mais donne 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 de 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'a 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 l'alternative textuelle.

    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 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 (<ul>) 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 (<ol>) 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.

    Insérez des en-têtes de colonne (<th>). 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 microphone. 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 terminez 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 microphone. 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.