Aller au Contenu Principal

Accessibilité

Notre but est d’offrir aux Canadiens une expérience inclusive. Des directives, outils et techniques existent pour créer et maintenir une expérience numérique accessible.


Normes d’accessibilité à Postes Canada

À Postes Canada, nous cherchons à atteindre la norme AA des Règles pour l’accessibilité des contenus Web (WCAG) 2.0. Pour ce faire, nous utilisons un ensemble d’outils, des techniques et une combinaison de tests automatisés et manuels durant toutes les phases de conception d’élaboration et d’entretien de nos produits numériques.

WCAG 2.0

Se familiariser avec les principes et les directives des WCAG 2.0 est la fondation de la création d’une expérience Web inclusive. Vous pouvez commencer en lisant les vues d’ensemble des WCAG.

Lors de la conception ou de l’élaboration, utilisez les outils de référence suivants sur les directives, les techniques et les solutions possibles en matière d’accessibilité.

Tests automatisés

Une fois que vous connaissez les directives des WCAG 2.0, vous pouvez utiliser les outils automatisés pour faire une vérification. Gardez à l’esprit qu’aucun outil ne sera en mesure de repérer tous les problèmes et que certains outils comportent des inexactitudes. Il est important d’utiliser une combinaison d’outils automatisés et de tests manuels pour vous aider à améliorer l’exactitude et le respect de la norme d’accessibilité.

Outils de vérification de l’accessibilité

Ces outils peuvent vous aider à effectuer une vérification globale de votre site Web en fonction des critères de réussite des directives sur l’accessibilité. Certains outils vous permettent de préciser les directives que vous tentez de respecter et offrent des recommandations sur la façon de régler les problèmes.


  • axe : Module d’extension Chrome, Firefox, GitHub et npm gratuit
  • WAVE : Modules d’extension Chrome et Firefox gratuits
  • AChecker : Outil en ligne gratuit
  • SortSite : Outil payant disponible sous forme d’application de bureau ou d’outil en ligne
  • Koa11y : Application de bureau gratuite
  • Siteimprove Accessibility Checker : Module d’extension Chrome gratuit

Outils de vérification des contrastes

Les outils de vérification des contrastes aident à déterminer si le contenu d’une page Web répond aux critères de contraste. Ceci est nécessaire pour améliorer la lisibilité pour les utilisateurs malvoyants ou daltoniens.


Simulateurs de vision

Les simulateurs de vision vous aident à reproduire l’expérience des utilisateurs malvoyants et daltoniens.


  • NoCoffee : Module d’extension Chrome gratuit
  • Colorblinding : Module d’extension Chrome gratuit
  • Enlevez vos lunettes ou reculez-vous

Outils de validation du balisage

Il est important de valider que le balisage d’une page Web est propre, sémantique et pleinement fonctionnel pour s’assurer que la technologie d’assistance peut interpréter efficacement le contenu. Grâce au service de validation du balisage de W3C, vous pouvez gérer votre code HTML en vérifiant la validité du balisage.

Tests manuels

Les tests manuels devraient être effectués parallèlement aux tests automatisés. Explorez les outils et les techniques que vous pouvez utiliser pour effectuer des tests manuels.

Lecteurs d’écran

Il est important de tester manuellement l’expérience d’un utilisateur avec des lecteurs d’écran. Il existe de nombreux lecteurs d’écran qui lisent le contenu et les composants de l’interface utilisateur différemment. Par exemple, certains lecteurs d’écran lisent chaque lettre dans les mots contenant uniquement des majuscules. Les lecteurs d’écran suivants sont recommandés pour les tests.


Navigation par la touche de tabulation

Le test de navigation par touche de tabulation est une technique simple utilisée pour évaluer l’opérabilité d’une page Web au moyen d’un clavier. À l’aide de votre curseur, sélectionnez le début d’une page Web et appuyez plusieurs fois sur la touche de tabulation pour vous déplacer dans les interactions. Posez-vous les questions suivantes :


  • Tandis que vous appuyez sur la touche de tabulation, pouvez-vous voir l’indicateur de mise au point par défaut du navigateur se déplacer parmi les différents éléments fonctionnels de la page?
  • Pouvez-vous accéder à tous les éléments fonctionnels avec la touche de tabulation, y compris les liens, les boutons et les commandes de formulaire?
  • Tandis que vous appuyez sur la touche de tabulation, votre curseur parcourt-il les éléments de gauche à droite et de haut en bas?
  • Pouvez-vous accéder aux caractéristiques qui comptent sur l’utilisation d’une souris au moyen d’un clavier? Par exemple, pouvez-vous ouvrir le menu à l’aide d’un clavier?

Test « Sélectionner tout »

Le test « Sélectionner tout » est un moyen rapide de vous aider à repérer les éléments qui sont possiblement inaccessibles avec un clavier. Il suffit d’utiliser la commande « Sélectionner tout » de votre ordinateur lors de l’examen d’une page Web et de vérifier les éléments qui ne sont pas sélectionnés.


  • Windows : Ctrl + A
  • macOS : Commande + A

Visualisation de pages Web sans JavaScript et sans feuilles de style en cascade (CSS)

De nombreux utilisateurs choisissent de désactiver JavaScript, car leurs lecteurs d’écran ne sont pas compatibles avec celui-ci. Essayez d’afficher les pages Web sans JavaScript pour reproduire leur expérience.


De plus, l’affichage des pages Web sans CSS vous permet de voir le contenu de la même façon que de nombreux utilisateurs de lecteurs d’écran. Chrome et d’autres navigateurs vous donnent la possibilité de désactiver JavaScript et CSS.

Lisibilité

Rédigez le contenu pour qu’il soit simple et clair. Évitez le jargon ou tout langage qui n’est pas facilement compris par tous les Canadiens. À Postes Canada, nous visons un niveau de lecture équivalant à celui d’un élève de 8e année.

Divisez le contenu; chaque paragraphe doit aborder un seul sujet. Essayez de rédiger des phrases d’environ 60 à 70 caractères. Privilégiez toujours la voix active, car la voix passive peut confondre le lecteur et nuire à sa lisibilité.

Texte de remplacement

Ajoutez un texte de remplacement (texte de substitution) pour chaque image afin de permettre aux utilisateurs de comprendre le contenu d’une page. Le texte de remplacement doit décrire l’image. Les utilisateurs qui ne peuvent voir les images pourront donc savoir ce que celles-ci représentent. Le texte de remplacement doit être bref et concis.

S’il s’agit d’une image purement superficielle, un texte de remplacement n’est pas nécessaire.

Attributs ARIA (aria-label et aria-labelledby)

Certains éléments Web sont plus faciles à comprendre lorsqu’ils sont associés à un attribut ou lors de la consultation de la page entière. Les attributs peuvent convenir aux utilisateurs qui n’ont pas de problème de vision, mais ne permettent pas toujours à ceux qui ont un handicap visuel de comprendre l’objectif des éléments Web.

C’est pourquoi il vaut mieux utiliser l’attribut aria-label pour indiquer à quoi servent les éléments Web que certains utilisateurs ne peuvent voir. Par exemple, un menu latéral peut simplement inclure un attribut aria-label pour indiquer qu’il s’agit d’un menu.

Utilisez ces attributs pour fournir le contexte et plus de détails. Vérifiez que les attributs sont clairs et concis, et qu’ils indiquent seulement des informations pertinentes aux actions des utilisateurs.

Points de repère ARIA

Les points de repère ARIA peuvent aider les utilisateurs de technologies d’assistance à naviguer rapidement dans une interface Web et à sauter des blocs de contenu.

  • En-tête : role = "banner"
    C’est la section de la page qui est axée sur le site et qui désigne habituellement l’en-tête principal.
  • Navigation : role = "navigation"
    Ce point de repère contient les liens vers les différentes pages d’un site Web, les écrans d’une application ou les sections d’un document.
  • Contenu principal : role = "main"
    Ce point de repère structure la zone du contenu principal et ne doit être utilisé qu’une seule fois dans le document.
  • Article : role = "article"
    Un article désigne une partie indépendante du contenu. Il peut y avoir plusieurs articles dans un même document. Ils ne sont pas considérés comme des points de repère, mais les logiciels de lecture d’écran peuvent quand même les repérer lorsqu’ils parcourent un document par section ou par point de repère.
  • Secondaire : role = "complementary"
    Il s’agit d’une section secondaire du contenu principal, même s’ils sont séparés.
  • Pied de page : role = "contentinfo"
    Il contient des informations sur le document, dont les métadonnées, les droits d’auteur et les renseignements sur l’entreprise.
  • Formulaire : role = "search"
    Ajoutez un role "search" pour votre moteur de recherche.

Structure du document

  • Utilisez une structure et des en-têtes sémantiques.
  • Lorsque vous emboîtez des en-têtes (<h1> à <h6>), <h1> doit être l’en-tête principal. Les en-têtes subséquents doivent être en ordre (<h2> à <h6>) pour que les logiciels de lecture d’écran puissent créer une table des matières pour vos pages.

Formulaires

  • L’ordre des onglets d’un formulaire doit suivre un modèle logique.
  • Ajoutez un attribut pour chaque action à faire avec le formulaire (par exemple, saisie, sélection) : <label for = "name">
  • Nom : </label><input id = "name" type = "text">
  • Regroupez les éléments de même nature du formulaire avec une balise « fieldset » et utilisez une légende pour décrire ce groupe : }} Important for {{input type = "radio" and input type = "checkbox"

Navigation avec le clavier

  • Vérifiez qu’il est possible de naviguer le site Web au moyen du clavier.
  • Utilisez la touche de tabulation pour naviguer.
  • Utilisez la touche Entrée pour activer un élément.

Attribut de la langue

  • Indiquer la langue d’un contenu HTML permet aux logiciels de lecture d’écran de lire le texte à voix haute avec la bonne prononciation.
  • Attribut de la langue : html lang = "fr"

Liens

  • Vérifiez que les liens peuvent avoir l’état « focus » (liens mis en évidence par la navigation).
  • Vérifiez que les liens sont soulignés et faciles à reconnaître.
  • Ajoutez un lien aux images et un texte de remplacement pertinent.