Accessibilité du contenu

Les Règles pour l’accessibilité des contenus Web (WCAG) 2.1 sont des recommandations pour définir l’accessibilité du contenu sur le Web. Ce guide résume les règles clés pour satisfaire au niveau de conformité AA (niveau recommandé). Les règles mentionnées sont fondées sur quatre principes : le contenu Web doit être perceptible, utilisable, compréhensible et robuste.

Les règles clés

Texte alternatif et images

Le texte alternatif (alt text) décrit une image (ex : photos, icônes, boutons, graphiques).

Pourquoi l’appliquer?

  • Permet aux lecteurs d’écran de décrire l’image aux utilisateurs·rices.
  • Le texte figurera sur la page, si l’image ne télécharge pas.

Comment l’appliquer?

  • Saisir entre 80 à 125 caractères (max.).
  • Pour le contenu non textuel purement décoratif (lien en anglais), le texte alternatif pourrait être laissé vide (alt="").
  • Pour des images contenant du texte, inclure ce texte dans le texte alternatif (ex. : le mot « Bonjour » figurant sur une affiche.).
  • Pour des diagrammes complexes ou des graphiques pédagogiques, une description plus longue (différente du texte alternatif) doit être affichée, soit sur la même page ou liée à une page séparée.
  • Inclure un point à la fin du texte pour signaler au lecteur d’écran de prendre une pause avant de reprendre la lecture.

Titres et listes (structure du contenu)

Pourquoi l’appliquer?

  • Permet aux utilisateurs·rices de naviguer la page de façon efficace (avec ou sans l’aide des technologies d’assistance).
  • Les titres (headings) sont importants pour séparer le contenu et structurer une page.
  • Les listes aident à diviser le contenu sur une page, ce qui rend le tout plus facile à balayer que des blocs de texte.

Comment l’appliquer?

  • La structure de la page devrait être facile à suivre et à balayer (les gros blocs de texte peuvent être structurés à l’aide de titres, de sous-titres, d’images, de listes, etc.).
  • Les titres devraient être formatés comme éléments H1, H2, H3 (et non en gras, etc.).
  • Il ne devrait jamais avoir plus qu’un titre H1 (le titre de la page).
  • Les titres et sous-titres devraient suivre un ordre hiérarchique (ne pas sauter de H1 à H3).
  • Les titres devraient être uniques sur chaque page.
  • Les listes devraient être formatées comme des listes (<ul>, <ol>).

Couleur et contraste

Pourquoi l’appliquer?

  • Permet aux utilisateurs·rices de percevoir l’information (p. ex. les personnes malvoyantes ou daltoniennes).

Comment l’appliquer?

  • Le contraste des couleurs entre le contenu (texte) et son arrière-plan devrait être à un rapport de contraste d’au moins 4,5:1 pour être lisible ou 3:1 pour le contenu ou le texte plus large (exception : logos, éléments décoratifs). Outil Contrast Checker par WebAIM
  • La couleur ne devrait pas être la seule façon de distinguer un élément visuel (les liens peuvent être soulignés, les champs obligatoires peuvent inclure *, etc.).
  • Les couleurs ne devraient pas distraire du contenu (limiter la palette de couleurs – trop, c’est trop).
  • Les couleurs facilitent la navigation de votre page (ex. : les liens sont bleus pour les repérer plus facilement).

Liens

Les liens (ou hyperliens) pointent vers des pages, des sites ou documents ultérieurs.
Pourquoi l’appliquer?

  • Les liens (en modération) facilitent la navigation (surtout pour les personnes qui naviguent uniquement à l’aide du clavier).

Comment l’appliquer?

  • Les liens devraient être descriptifs (n’utilisez pas « cliquez ici » ou l’URL comme lien).
    • Ex. : « Consultez les normes d’accessibilités » au lieu de « Pour consulter les normes d’accessibilité, cliquez ici. »
  • Les liens devraient être uniques et compréhensibles hors contexte.
  • Les liens devraient être le seul texte souligné sur une page.
  • Une image qui est un lien devrait décrire dans le texte alternatif la page vers laquelle pointe le lien (évitez les liens vides).
  • Le nombre de liens sur une page devrait être limité, surtout les liens externes.
  • Les liens ouvrant dans une nouvelle fenêtre devaient être signalés à l’utilisateur·rice.
  • Les liens devraient ressembler à des liens et non à des boutons (pour éviter toute confusion).
    • Les liens pointent vers de nouvelles pages, des sites externes ou des documents (navigation).
    • Les boutons appellent une action (ex. : soumettre un formulaire).

Tableaux

Pourquoi l’appliquer?

  • Les tableaux (lien en anglais) sont utilisés pour présenter des données.
  • Évitez les tableaux dans la mesure du possible. Ils peuvent être complexes et difficiles à comprendre par les technologies d’assistance.

Comment l’appliquer?

  • Les tableaux ne devraient jamais être utilisés pour la mise en page.
  • Les tableaux devraient être bien formatés en HTML avec des rangées et des colonnes organisées.
  • Les tableaux devraient être simples et utiliser des entêtes (th) pour les rendre plus accessibles.
  • Rappel : Les lecteurs d’écran lisent le contenu de gauche à droite, de haut en bas.

Vidéo, audio et transcriptions

Pourquoi l’appliquer?

  • Permet aux utilisateurs·rices de percevoir l’information de différentes façons.
  • Le contenu multimédia (tel que la vidéo et l’audio) contribue à faciliter l’apprentissage et à enrichir l’expérience de l’utilisateur·rice.
  • Les transcriptions donnent un équivalent textuel à l’information.

Comment l’appliquer?

  • Une description courte devrait présenter le contenu multimédia.
  • Des alternatifs textuels devrait être disponibles :
    • les transcriptions;
    • le sous-titrage codé (captions).
  • Autres médias substituts pourraient inclure : narration, descriptions sonores, langue de signes, marqueurs de chapitre, etc.
  • Les lecteurs vidéo et audio (contrôle de la lecture, pause, volume, etc.) devraient être disponibles et utilisables par les technologies d’assistance.

Texte et contenu général

Pourquoi l’appliquer?

  • Le texte et le contenu conçu pour le Web :
    • facilite la lecture et la compréhensibilité;
    • permet aux utilisateurs·rices de naviguer ou de balayer la page de façon efficace (avec ou sans l’aide des technologies d’assistance).
    • Réduit les distractions ou réactions photosensibles.

Comment l’appliquer?

  • Le texte devrait être aligné à gauche (left-align) et non justifié.
  • Les polices accessibles devraient être utilisées pour le corps du texte (faciles à lire). Les polices sans empattement sont considérées comme plus accessibles.
    • Exemples : Arial, Verdana, Calibri, Tahoma, Helvetica.
  • Le contenu textuel devrait être simple et concis. Les paragraphes devraient être courts (environ cinq lignes maximum).
  • La langue devrait être définie pour les lecteurs d’écran (quand elle est différente de la langue du texte général). (lang="en"; lang="fr").
    • Ex : consulter <span lang="en">Web Accessibility In Mind</span> pour en savoir plus.
  • Le gras (strong) devrait être utilisé pour mettre du texte en évidence.
    • Exemple : Le gras est à utiliser avec modération.
    • Les blocs de texte ne devraient pas être mis en gras.
    • Le surlignage, les majuscules (plus difficiles à lire) et le soulignage (réservé aux liens) sont à éviter. L’utilisation de l’italique (<em>) devrait être limitée.
  • Les abréviations, les sigles et les acronymes devraient être décrits (à la première mention) et l’emploi devrait être réduit au minimum.
  • Il faut laisser suffisamment d’espace blanc autour du contenu (et entre les éléments) afin d’équilibrer la page pour que l’utilisateur·rice puisse bien interagir avec les éléments (limiter les distractions).
  • Le contenu qui clignote, défile ou se déplace (ex : GIF animés, transitions) devrait être évité (ou ne pas durer plus de cinq secondes).
    • Si ce genre de contenu est utilisé, inclure une façon de l’arrêter, de le mettre en pause ou de le masquer.
  • Les documents devraient être accessibles : Word, PDF, etc. Songez à utiliser des pages HTML à certaines fins.

Vérifications importantes

  • L’information n’est pas perdue quand on agrandit la page en utilisant CTRL + (PC) ou Option et Command + (Mac).
  • Le lecteur d’écran est capable de lire et d’interagir avec le contenu.
    • Exemples de lecteurs d’écran : Narrateur, VoiceOver, NVDA, JAWS
  • La navigation par clavier (sans souris) est fonctionnelle.
  • Le contenu se présente bien dans les différents fureteurs (Safari, Firefox, Edge, Chrome) et sur les différents appareils (ordinateur de bureau, portable, tablette, mobile).
  • Le HTML est bien structuré et balisé (titres, paragraphes, liens, listes, tableaux, etc.)
    • Enlever les balises non nécessaires et limiter le CSS directement intégré (ex. : <span> copié de Word).
  • Utiliser les éléments justes (ex. : <strong>, <em> et non <b>, <i>)
  • Pour Moodle : Vérification auprès de l’outil Accessibilité (Brickfield) et les blocs Accessibilité et Read Speaker.
  • Pour sites Web (suggestion) : l’extension WAVE, axe DevTools (liens en anglais) ou d’autres extensions d’accessibilité peuvent être utilisées.

Sources

Pour de plus amples renseignements, veuillez consulter les ressources suivantes :

Accessibilté du contenu (Version PDF)

◄ Ressources sur l’accessibilité du contenu

Une personne qui a des limitations liées à une déficience peut recevoir un appui dès réception d’une preuve de son incapacité.

Université de Saint-Boniface

200, av.de la Cathédrale • Winnipeg (Manitoba) • R2H 0H7
Tél: 204-237-1818 • Sans frais: 1 888-233-5112

Icône Twitter Icône Facebook Icône Youtube Icone Instagram

© 2013-2024 Université de Saint-Boniface