Comment assurer l’accessibilité

Pour vous assurer que votre service est accessible et inclusif, il faut considérer l'accessibilité à toutes les étapes. Vous devrez donc faire participer divers utilisateurs, y compris des personnes handicapées, à chaque phase de votre cycle de conception et de développement.

Prévoyez de faire participer les services d'accessibilité lors de chaque phase. Vous pouvez aussi demander du soutien sur un plus long terme afin de suivre vos progrès et créer un modèle d'accessibilité durable.

Testez régulièrement votre code afin de relever tout problème lié au développement, à la conception et au contenu. Au SNC, nous avons inclus les tests automatisés dans notre processus d'intégration continue. Il est important de faire à la fois des tests automatisés et manuels : vous raterez beaucoup de problèmes si vous faites seulement les tests automatisés. Ces derniers ne couvrent actuellement que 40 % des problèmes liés à l'accessibilité.

Les sections suivantes fournissent des détails qui vous permettront d'orienter vos travaux d'accessibilité à chaque phase du développement :

• Découverte
• Alpha
• Bêta
• Mise en ligne

En phase découverte

Au commencement du projet, demandez-vous : « Comment fonctionnerait ce produit si je ne pouvais pas le voir? Et si je ne pouvais pas le toucher ou le déplacer? Qu'en est-il si je ne peux pas l'entendre, le goûter ou le sentir? » Ces questions vous aideront à réfléchir aux difficultés de certaines personnes et aux différents contextes d'utilisation possibles. Elles vous guideront dans la conception de votre service.

Les discussions avec des personnes handicapées permettent d'obtenir des rétroactions inattendues. Mener des recherches en conception auprès de ces personnes vous aide donc à mieux définir les problèmes et à comprendre les besoins des utilisateurs. En parlant avec des gens qui ont divers besoins, vous améliorez l'expérience humaine des services numériques.

Faites participer les services d'accessibilité dans la phase découverte pour pouvoir impliquer des personnes ayant des besoins utilisateurs divers. Dans votre recherche, incluez des utilisateurs qui ont différentes capacités. Tenez compte des handicaps visuels, auditifs, moteurs et cognitifs. Ce faisant, vous aidez également les personnes qui ont des incapacités situationnelles ou temporaires, comme avoir un membre blessé, être en public sans écouteurs ou tenir un bébé.

Intégrez les questions d'accessibilité dans vos artefacts de recherche (par exemple dans vos personas ou vos récits d'utilisateurs).

1. Reconnaissez les biais
2. Menez une recherche sur la conception
3. Adoptez des pratiques éthiques
4. Écoutez de façon active
5. Menez des tests auprès des utilisateurs
6. Tenez compte de besoins divers
7. Créez des personas inclusives
8. Faites réaliser des tâches cognitives
9. Offrez différents moyens de participer

En phase alpha

Dans la phase alpha, assurez-vous que votre service satisfait aux normes de notre liste de contrôle de priorité 1.

Contrôle de priorité 1 — Critique (WCAG 2.1 A, AA)

Vérifiez que votre service tient compte de tous les éléments suivants.

• À l’aide d’outils automatisés :

  • Toutes les entrées de formulaire sont clairement identifiées (page en anglais seulement).
  • Le contraste de couleur du texte est suffisant (page en anglais seulement) : tout le texte a un rapport de contraste de 4,5:1 avec l'arrière-plan.
  • Les instructions du formulaire sont associées aux entrées (page en anglais seulement).
  • La langue de la page est réglée (page en anglais seulement), et pour les sections de la page qui diffèrent de la langue du site, la langue est réglée.

• À l’aide de tests manuels :

  • Le site est accessible par clavier (page en anglais seulement) : toutes les interactions peuvent être faites par clavier.
  • Le site est exempt de pièges pour clavier (page en anglais seulement) : le focus du clavier n'est jamais piégé dans une boucle.
  • Toutes les images pertinentes utilisent une étiquette img (page en anglais seulement).
  • Toutes les images ont des attributs de remplacement (page en anglais seulement).
  • Le contenu multimédia est étiqueté (page en anglais seulement) : tous les éléments multimédias ont une légende appropriée et une description audio.
  • Le site ne perd jamais le focus (page en anglais seulement) : l'indicateur de focus est toujours visible lorsqu'il se déplace dans la page avec le clavier.
  • L'ordre des onglets est logique (page en anglais seulement).
  • Le site n'arrête pas de façon imprévue après un certain temps (page en anglais seulement) : déterminer quels sont les éléments assujettis à un « temps d'expiration » et vérifier que l'utilisateur peut demander plus de temps.
  • Les tableaux sont bien codés (page en anglais seulement) : les tableaux ont les bons attributs de titre et de colonnes.
  • Les titres sont bien imbriqués (page en anglais seulement) : les éléments de titre sont imbriqués de façon logique.
  • Le contenu audio et vidéo a des sous-titres appropriés, des transcriptions ou une vidéodescription au besoin.
  • Le contenu est identifié uniquement par sa forme ou son emplacement ou à l'aide de symboles graphiques uniques pour transmettre des informations.
  • Utilisation des couleurs : ne pas utiliser seulement les couleurs pour transmettre des informations significatives.
  • Les liens « saut de navigation » sont disponibles pour contourner des blocs de contenu répétés sur plusieurs pages Web (page en anglais seulement).

Favoriser les technologies d'adaptation

Dans la phase alpha, vous devrez aussi vous assurer que votre service fonctionne avec les technologies d'adaptation les plus communes.

• Faites des tests par vous-même avec les technologies d'adaptation (vous pouvez demander au responsable de la communauté de pratique sur l'accessibilité ou communiquer avec le Programme d'accessibilité, d'adaptation et de technologie informatique adaptée AATIA à Services partagés Canada pour en apprendre plus sur les technologies d'adaptation).
• Communiquez avec le responsable de la communauté de recherche en conception afin de trouver des participants qui utilisent des technologies d'adaptation pour vos recherches auprès des utilisateurs.
• Demander que des tests de technologie d'adaptation soient inclus dans votre audit de l'accessibilité.

Voici des exemples d'outils que vous pouvez utiliser :

• VoiceOver
• NVDA
• ZoomText
• Contraste élevé (système d'exploitation ou mode sombre)

En phase bêta

Vous devez effectuer un contrôle de l'accessibilité — et corriger tout problème — avant que votre service passe à la phase bêta publique.

Par ailleurs, assurez-vous que votre service bêta répond aux normes de notre liste de contrôle de priorité 2.

Contrôle de priorité 2 — Moins critique, mais essentiel (WCAG 2.1, A, AA)

• Les cadres sont nommés (page en anglais seulement) et ont un élément de nom.
• Les éléments clignotants sont conformes (page en anglais seulement) : les éléments qui clignotent à l'écran le font à un rythme inférieur à 3 Hz.
• Le CSS n'est pas requis pour utiliser la page (page en anglais seulement) : la page est logique avec ou sans CSS.
• Les liens sont uniques et contextuels (page en anglais seulement) : tous les liens peuvent être compris individuellement.
• Les titres de pages sont descriptifs (page en anglais seulement).
• Les plugiciels requis sont liés dans la page (page en anglais seulement).
• L'orientation du contenu Web n'est pas restreinte ou verrouillée (page en anglais seulement).
  • Utilisez le CSS pour établir l'orientation afin de permettre à la fois le format paysage et portrait.
  • Utilisez des commandes Afficher/Masquer afin de permettre l'accès au contenu dans différentes orientations.
• Les champs de saisie servent à un but défini qui établit la signification attendue des données de saisie dans un formulaire (page en anglais seulement).
• Le contenu peut être présenté sans perte d'information ou de fonctions, et sans avoir à faire défiler la page (page en anglais seulement).
  • Le contenu de défilement vertical a une largeur équivalente à 320 pixels CSS (page en anglais seulement).
  • Le contenu de défilement vertical a une hauteur équivalente à 256 pixels CSS (page en anglais seulement).
• Les composants actifs (c'est-à-dire les commandes) de l'interface utilisateur et les graphiques significatifs peuvent être distingués par les personnes à vision modérément faible à l'aide d'un contraste non textuel (page en anglais seulement).
  • Voici des moyens pour tester le contraste non textuel (page en anglais seulement).
• Les personnes peuvent modifier l'espacement du texte pour améliorer leur expérience de lecture en utilisant l'espacement de texte (page en anglais seulement).
  • Détails supplémentaires sur les tests d'espacement de texte (page en anglais seulement).
• Le contenu révélé par un survol du pointeur ou par un indicateur de focus (page en anglais seulement) ne devrait pas masquer d'autre contenu et devrait pouvoir être rejeté si souhaité.
  • Détails supplémentaires sur les événements liés au survol ou au focus (page en anglais seulement).
• Si un raccourci clavier est mis en œuvre pour les contenus utilisant uniquement des lettres, veuillez consulter les touches de raccourci de caractères (page en anglais seulement).
  • Détails supplémentaires sur les touches de raccourci de caractères (page en anglais seulement).
• Le contenu peut être exploité à l'aide d'entrées simples sur un large éventail de dispositifs pointeurs à l'aide de techniques gestuelles de pointage (page en anglais seulement).
  • Détails supplémentaires sur les gestes de pointage (page en anglais seulement).
• Les fonctions qui imitent la pression sur une touche de clavier ou de pavé numérique sont considérées comme essentielles et utilisent les techniques d'annulation du pointeur (page en anglais seulement).
  • Détails supplémentaires sur l'annulation du pointeur (page en anglais seulement).
• Les mots qui étiquettent visuellement un composant sont aussi les mots associés au composant par programmation à l'aide des techniques d'étiquetage dans le nom (page en anglais seulement).
  • Détails supplémentaires sur l'étiquetage dans le nom (page en anglais seulement).
• Les fonctions qui sont activées par le mouvement d'un appareil ou par un geste dirigé vers l'appareil peuvent aussi être commandées par des composants d'interface utilisateur plus conventionnels, à moins que le mouvement ne soit essentiel pour la fonction ou que l'absence de mouvement ou de geste invalide l'activité, à l'aide des techniques d'activation de mouvement (page en anglais seulement).
  • Détails supplémentaires sur l'activation de mouvement (page en anglais seulement).
• Les utilisateurs sont informés, d'une façon qui n'interrompt pas leur travail, de modifications importantes apportées à du contenu qui n'est pas ciblé par le focus à l'aide de techniques de message sur le statut (page en anglais seulement).
  • Détails supplémentaires sur les messages de statut (page en anglais seulement).

Mise en ligne — Maintenir l'accessibilité de votre travail

Tandis que vous vous préparez à mettre votre service en ligne, et après son lancement, assurez-vous que votre service respecte les normes de notre liste de contrôle de priorité 3.

Contrôle de priorité 3 — Idéal (WCAG 2.1 AAA)

• Dans le contenu mis en œuvre au moyen de langage de balisage, le but de l'interface utilisateur, des icônes et des régions peut être déterminé par programmation (site en anglais seulement).
• Temps d'expiration
• Animations d'interactions
• Modalités de saisie concurrentes
• Langue des signes