Standard et bonnes pratiques en accessibilité Web

L’accessibilité numérique est un enjeu crucial pour le gouvernement du Québec, garantissant que tous les citoyens, y compris ceux avec des limitations fonctionnelles, puissent accéder à l’information et aux services en ligne. Conformément au Standard sur l’accessibilité des sites Web du gouvernement du Québec (SGQRI 008 2.0), notre système de design intègre des pratiques qui respectent les critères d’accessibilité.

Une analyse de conformité au nouveau standard en vigueur est en cours.

L’accessibilité vise à rendre les services numériques utilisables par tous, indépendamment des capacités physiques ou cognitives. Elle offre des avantages significatifs pour tous les utilisateurs en améliorant l’expérience globale. L’intégration de l’accessibilité dès la phase de planification permet de prévenir des coûts de modifications ultérieures et d’assurer une conception inclusive dès le départ.

Accessibilité des contenus Web (WCAG)

Les directives WCAG, qui reposent sur quatre principes fondamentaux — Perceptible, Utilisable, Compréhensible et Robuste —, guident la conception d’un contenu Web accessible.

Le principe Perceptible assure que l’information est présentée de manière à ce que tous les utilisateurs, y compris ceux ayant des déficiences sensorielles, puissent la percevoir.

Le principe Utilisable garantit que l’interface est intuitive et accessible, notamment via le clavier et les technologies d’assistance.

Le principe Compréhensible veille à ce que l’information et les interactions soient claires, avec un langage simple et des interactions prévisibles.

Le principe Robuste assure que le contenu reste interprétable par divers agents utilisateurs (navigateur Web, assistant vocal, lecteur d'écran, etc.), y compris les technologies d’assistance.

Accessibilité des contenus multimédias

Pour les contenus multimédias, il est crucial de fournir des solutions de rechange telles que le texte de remplacement pour les images et des sous-titres pour les vidéos :

• Le texte de remplacement permet aux lecteurs d’écran de transmettre les informations visuelles aux personnes aveugles ou malvoyantes. Il doit décrire l'image de façon claire et pertinente selon son rôle dans le contenu, sans répéter des informations déjà présentes ni utiliser des termes comme "photo de". Par exemple, pour l’image d’une personne en fauteuil roulant entrant dans un bâtiment accessible, le texte pourrait être "Personne en fauteuil roulant entrant dans un bâtiment avec une rampe d'accès."
• Les sous-titres et transcriptions permettent aux personnes malentendantes d'accéder pleinement aux contenus audio et vidéo en fournissant une version écrite des dialogues, des sons importants et des éléments sonores pertinents pour la compréhension.

De plus, il est nécessaire d’offrir aux utilisateurs le contrôle de la lecture des contenus multimédias et éviter les contenus automatiquement déclenchés. Par exemple, un lecteur vidéo ou une animation GIF doit permettre aux utilisateurs de choisir quand commencer la lecture, plutôt que de démarrer automatiquement.

Enfin, il est préférable de présenter l’information en HTML plutôt qu’en PDF, car les pages HTML sont plus adaptables et accessibles. Si un PDF est nécessaire, il doit être rendu aussi accessible que possible, ou une alternative accessible doit être fournie. En appliquant ces bonnes pratiques, les documents du gouvernement seront accessibles à tous.

Design universel

Le design universel vise à créer des interfaces accessibles et utiles pour tous, en tenant compte des capacités variées des utilisateurs. Il englobe des principes tels que l'usage équitable, la flexibilité, la simplicité, la perception de l'information, la tolérance aux erreurs, le faible effort physique et l'adaptation de l'espace. Ces principes assurent une expérience inclusive et sécuritaire. Pour plus de détails, un article de la Interaction Design Foundation (en anglais seulement) aborde le sujet de la conception de sites Web selon les principes du Design universel.

Amélioration progressive

Concevoir des solutions accessibles commence par établir une base solide en HTML, afin de garantir que les fonctionnalités essentielles sont accessibles à tous. Ensuite, il est possible d'ajouter des améliorations visuelles avec CSS, des médias enrichis (images, vidéos, audio, graphiques) en fournissant des équivalents textuels et des comportements dynamiques avec JavaScript pour enrichir l'expérience des utilisateurs disposant de technologies plus avancées.

Pour garantir l’accessibilité, il est essentiel d’intégrer cette dimension dès le début du projet. Chaque phase, de la conception au développement et à la gestion, joue un rôle clé dans la création d’une expérience numérique inclusive. Voici les aspects à considérer pour chaque étape.

Design

Lors de la conception, il est essentiel de prioriser l’accessibilité dès le début du projet. Voici quelques points clés à considérer :

• Couleurs et contrastes : Utiliser des contrastes suffisants pour que le texte soit lisible par tous, y compris par les personnes ayant des déficiences visuelles.
• Hiérarchie visuelle : Structurer l’information de manière logique avec des titres, sous-titres et paragraphes clairs. Cela aide non seulement la compréhension générale, mais permet aussi une meilleure navigation pour les utilisateurs utilisant des lecteurs d’écran.
• Interactivité : Assurer que tous les éléments interactifs, comme les boutons et les liens, sont clairement identifiables et accessibles via le clavier.
• Adaptation aux différentes tailles d’écran : Veiller à ce que le design soit réactif (responsive), c’est-à-dire qu’il s’adapte bien aux différentes tailles d’écran, y compris les appareils mobiles.

Développement

Du côté du développement, l’intégration de l’accessibilité doit se faire à chaque étape. Voici quelques aspects techniques à ne pas négliger :

• Balises HTML sémantiques : Utiliser des balises HTML appropriées pour structurer le contenu, ce qui améliore la compatibilité avec les technologies d’assistance.
• Texte de remplacement pour les images : Inclure des descriptions textuelles pour les images afin que les utilisateurs de lecteurs d’écran puissent comprendre le contenu visuel.
• Contrôles de formulaire accessibles : S’assurer que tous les champs de formulaire sont correctement étiquetés et accessibles, avec une navigation intuitive pour les utilisateurs au clavier.
• Compatibilité avec les technologies d’assistance : Tester le site avec différents lecteurs d’écran et autres outils d’assistance pour garantir que tout le contenu est accessible.

Gestion de projet

Les chefs de projet jouent un rôle clé dans la mise en œuvre de l’accessibilité. Dès le début du projet, l’accessibilité doit être intégrée dans la planification et le suivi. Voici quelques actions à entreprendre :

• Évaluation des besoins : Identifier les besoins en accessibilité dès la phase de planification, en collaboration avec les designers et les développeurs.
• Suivi des critères d’accessibilité : Veiller à ce que les critères d’accessibilité soient respectés à chaque étape du projet en utilisant des listes de tâches ou des outils de suivi.
• Tests utilisateurs inclusifs : Inclure des tests utilisateurs avec des personnes ayant des limitations fonctionnelles pour identifier les éventuelles barrières et ajuster le design et le développement en conséquence.
• Documentation et communication : S’assurer que toutes les parties prenantes sont informées des exigences en matière d’accessibilité et que la documentation reflète ces exigences.

Des informations sur l'accessibilité propres à chaque composant ou élément d'interface sont incluses dans les fiches correspondantes.

Le guide Outils et ressources pour vous aider à rendre vos documents accessibles, offert par l'Office des personnes handicapées du Québec, propose des ressources pour faciliter la création de documents accessibles, selon les bonnes pratiques recommandées.

Références 

Le cheminement vers des applications accessibles (en anglais seulement)

Apprenez à créer des sites Web accessibles avec les principes de la conception universelle (en anglais seulement)

Règles pour l’accessibilité des contenus Web (WCAG) 2 – Vue d’ensemble