Système de design GCAccessibilité au sein de Système de design GC
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Outils de tests d’accessibilité

Tests modernes pour des composants modernes

Les outils et pratiques de test plus anciens peuvent ne pas fonctionner correctement avec les composants modernes. Voici comment vous assurer que votre produit numérique est accessible :
  1. Utilisez nos composants Web modernes que nous avons testés.
  2. Suivez les conseils en matière d’accessibilité sur nos pages de composants.
  3. Testez votre produit numérique dans votre contexte pour vous assurer qu’il est clair et qu’il fonctionne pour les personnes utilisant des technologies d’assistance.

Outils de test

Si vous voulez faire vos propres tests, voici quelques outils et processus que vous pouvez utiliser pour obtenir une meilleure couverture pour votre site Web ou votre application. Ces outils ne sont pas fournis ni approuvés par le gouvernement du Canada. Référencez nos Conditions d’utilisation lorsque vous consultez des sites Web qui n’appartiennent pas au gouvernement du Canada.

Tests automatisés

Utilisez des outils automatisés pour détecter les problèmes d’accessibilité courants.

Code

  • Axe DevTools
  • Google Lighthouse
  • Pa11y CLI
  • Firefox Accessibility Inspector

  • Axe-core seul ou avec des cadres d’automatisation de navigateurs comme:

    • Playwright
    • Puppeteer

Figma

  • Stark contrast and accessibility checker

Code

  • Axe DevTools Pro
  • Siteimprove
  • Level Access

Arborescence d’accessibilité

Utilisez l’arborescence d’accessibilité pour le débogage des problèmes d’accessibilité Web. Elle affiche une version simplifiée des points d’arrêt DOM que les lecteurs d’écran et les technologies d’assistance utilisent pour interpréter le contenu. Voici comment accéder à l’aborescence d’accessibilité dans différents navigateurs :
  1. Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
  2. Sélectionnez l’onglet éléments.
  3. Sélectionnez le panneau Accessibilité.
    • Si vous ne le voyez pas, sélectionnez (») puis Accessibilité.
  1. Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
  2. Sélectionnez l’onglet Inspecteur.
  3. Sélectionnez un élément dans la structure HTML.
  4. Sélectionnez l’onglet Accessibilité dans la barre horizontale.
    • Si vous ne voyez pas l’onglet Accessibilité, sélectionnez le menu à trois points (…) dans la barre des outils de développement, puis Paramètres.
    • Sous la rubrique Outils de développement par défaut, activez l’onglet Accessibilité.
  1. Ouvrez les outils de développement en appuyant sur ctrl+maj+i sur PC ou cmd+option+i sur Mac.
  2. Sélectionnez l’onglet Elements.
  3. Sélectionnez le panneau Accessibility.
  1. Activez le menu développeur.
    • Dans la barre de menu MacOS, sélectionnez Safari, puis Paramètres, puis Avancés.
    • Cochez la case Afficher les fonctionnalités de développement Web.
  2. Ouvrez l’inspecteur Web en appuyant sur option+cmd+i.
  3. Sélectionnez l’onglet Éléments.
  4. Sélectionnez un élément, puis accédez à la section Noeud dans le menu de droite et faites défiler jusqu’au bas pour trouver la section Accessibilité.

Évaluations et tests d’utilisabilité

Il est important d’effectuer des tests auprès de personnes handicapées pour s’assurer que votre produit numérique est accessible. Vous pouvez le faire en utilisant un service gouvernemental pour évaluer votre produit, en recrutant vous-même des personnes handicapées pour la recherche ou en utilisant des services payants qui le feront pour vous.
  • Boîte à outils de l’accessibilité numérique
  • Tests d’utilisabilité auprès de personnes utilisant des technologies d’assistance.

Contactez-nous

Si vous avez des questions ou rencontrez des obstacles lors de tests d’accessibilité supplémentaires visant Système de design GC, contactez-nous. 2026-09-18