L'accessibilité et le gouvernement du Québec

L’accessibilité web est un sujet crucial que nous avons déjà exploré à travers divers articles, soulignant l’importance de rendre les sites internet accessibles à tous, y compris aux personnes ayant des handicaps. Ce concept se fonde sur la mise en œuvre de pratiques de conception et de développement qui permettent aux individus de percevoir, comprendre, naviguer et interagir avec le web, offrant ainsi une expérience utilisateur inclusive. Alors que notre société continue de progresser vers la digitalisation, garantir l’accessibilité web devient non seulement un impératif éthique mais aussi légal, assurant l’égalité d’accès à l’information et aux services en ligne pour tous les utilisateurs.

Au Québec, l’accessibilité web est priorisée avec des normes pour garantir l’accès en ligne pour tous, incluant les personnes handicapées. Les organismes gouvernementaux doivent respecter des standards d’accessibilité, affirmant l’engagement de la province pour l’inclusion numérique.

Le standard en accessibilité

En 2011, le Conseil du trésor du Québec adoptait trois standards énonçant des règles qui devraient permettre de rendre tout site web ou tout document numérique accessible à l’ensemble de la population québécoise:

• Le standard sur l’accessibilité d’un site Web (SGQRI 008-01);
• Le standard sur l’accessibilité d’un document téléchargeable (SGQRI 008-02);
• Le standard sur l’accessibilité du multimédia dans un site Web (SGQRI 008-03).

En juillet 2018, ces standards furent unifiés en un seul standard mis à jour, le SGQRI 008 2.0, dans le but de refléter les réalités du Web moderne et offrir plus de possibilités quant à l’application des principes d’accessibilité.

La loi et les organismes visés

Tel que stipulé par l’article 2 de la Loi sur la gouvernance et la gestion des ressources informationnelles des organismes publics et des entreprises du gouvernement, les organismes qui se doivent de suivre le standard SGQRI 008 2.0 sont les suivants:

• Les ministères;
• Les différentes commissions, conseils, régies, instituts, musées et sociétés prévus à la Loi sur l’administration financière;
• Les universités et cégeps du Québec;
• Les établissements publics liés à la santé et aux services sociaux, tels que les hôpitaux, le Centre de la protection de l’enfance et de la Jeunesse, les CHSLD, les centres de réadaptation, etc.

Depuis juillet 2022, le standard est applicable sur tout le contenu présent sur les sites Web de ces organismes

Les exigences et le WCAG 2.0

Pour assurer une accessibilité optimale à tous les utilisateurs, le standard du Conseil du trésor exige des organismes concernés qu’ils respectent les règles de niveau AA des recommandations du WCAG 2.0 (Web Content Accessibility Guidelines), à l’exception de deux critères:

• Le critère 1.2.4, concernant l’ajout de sous-titres pour tout contenu audio en temps réel;
• Le critère 1.2.5, concernant l’ajout de sous-titres pour tout contenu vidéo pré-enregistré.

En effet, le standard demande plutôt de suivre l’un de ces critères alternatifs pour ce qui touche le contenu audio:

• Le critère 1.2.2 (qui est de niveau A), qui demande plutôt d’ajouter des sous-titres pour tout contenu audio pré-enregistré;
• Le critère 1.2.6 (de niveau AAA), qui propose plutôt d’ajouter une vidéo en langue des signes pour accompagner l’audio. Selon le standard, la langue des signes québécoise devrait être utilisée.

Deux critères de niveau AAA doivent également être suivis:

• Le critère 2.3.2, stipulant qu’aucun élément sur les pages ne devrait clignoter plus de trois fois par seconde;
• Le critère 3.1.4, demandant que toutes les abréviations et les acronymes présents sur les pages soient aussi disponibles dans leur forme complète.

À noter que bien que les recommandations du WCAG ont été mises à jour en version 2.2 depuis l’adoption du standard du Conseil du trésor, celui-ci exige que les critères de la version 2.0 soient suivies.

Finalement, le site doit également contenir une page intitulée « Accessibilité », qui doit être accessible à partir de toutes les pages du site. Nous conseillons donc d’inclure un lien vers celle-ci dans le pied de page du site. Cette page doit contenir une liste des mesures qui ont été entreprises afin de rendre le site Web accessible conformément au standard. Plus précisément, elle devrait contenir:

• Une liste des technologies utilisées pour vérifier la conformité au standard, avec leur nom et leur version;
• Une légende des icônes présents sur le site

Trucs et astuces

Afin de s’assurer que le site est bien conforme aux critères ci-haut, nous recommandons d’utiliser la liste suivante: https://www.w3.org/WAI/WCAG22/quickref/ (en anglais seulement), fournie par le W3C.

Sur le côté à gauche, on peut trouver le bouton « Filter », permettant de modifier les recommandations affichées. On peut alors changer la version des critères affichés pour le WCAG 2.0 afin d’être conforme au standard SGQRI 008 2.0. Il est aussi possible de cocher les niveaux de critères que l’on souhaite afficher (A, AA ou AAA) afin de faire une première tournée de vérifications.

À droite de chaque critère, il y a un bouton « Understanding (numéro du critère) » qui mène vers une page permettant d’en apprendre d’avantage sur ce critère.

Par contre, avant même d’ouvrir cette liste, il est possible de déjà se conformer à la plupart de ces recommandations en suivant simplement les principes d’accessibilité lors de la construction du site. En effet, le conseil suivant s’applique sur une grande partie des critères exigés: si un élément interactif ou important n’est représenté qu’avec une image ou un icône, cet élément devrait être accompagné d’une description textuelle. Cette description textuelle peut être présente visuellement à proximité de l’élément ou dissimulée dans un attribut approprié, tel que l’attribut « alt » sur les images ou l’attribut « aria-label » sur les autres types d’éléments.

Par la suite, des outils tels que l’extension de navigateur WAVE Evaluation Tool et PageSpeed Insights (dans sa section Accessibilité) peuvent être utilisés pour évaluer l’accessibilité d’une page Web.

Les critères WCAG 2.0 en détail

Voici chacune des recommandations de niveau AA et AAA du WCAG 2.0 exigées par le standard SGQRI 008 2.0, accompagnées de conseils pratiques pour garantir leur conformité. Les descriptions des critères ci-dessous sont disponibles en français à la page suivante: https://www.w3.org/Translations/WCAG20-fr/

1.2.2 Sous-titres (pré-enregistrés)

« Fournir des sous-titres pour tout contenu audio pré-enregistré dans un média synchronisé, excepté lorsque le média est un média de remplacement pour un texte et qu’il est clairement identifié comme tel. »

Si le site contient du contenu audio pré-enregistré, des sous-titres doivent être présents. Par « pré-enregistré », il est entendu que le contenu n’est pas diffusé en direct. À noter que cela inclut le contenu vidéo. Les vidéos avec des scripts parlés devraient contenir des sous-titres, ajoutés soit à même la vidéo, soit avec l’outil d’ajout de sous-titres fourni par la plateforme d’hébergement de la vidéo (Youtube, Vimeo, etc).

S’il s’agit d’un fichier purement audio contenant du texte parlé, un script du texte devrait être disponible à proximité.

Ou

1.2.6 Langue des signes (pré-enregistrée)

« Fournir une interprétation en langue des signes pour tout contenu audio pré-enregistré, sous forme de média synchronisé. »

Une vidéo en langue des signes québécoises devrait accompagner le contenu audio pré-enregistré. Également pour une vidéo, l’interprète LSQ peut être superposé dans un coin de la vidéo, de manière suffisamment visible. Tel que précisé plus haut, ce critère et le critère précédent sont exclusifs entre eux. Il n’est par nécessaire de suivre les deux critères simultanément pour être conforme au standard.

1.4.3 Contraste (minimum)

« La présentation visuelle du texte et du texte sous forme d’image a un rapport de contraste d’au moins 4,5:1, sauf dans les cas suivants :

• Texte agrandi : le texte agrandi et le texte agrandi sous forme d’image ont un rapport de contraste d’au moins 3:1;
• Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d’image qui fait partie d’un composant d’interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d’une image contenant un autre contenu significatif.
• Logotypes : aucune exigence de contraste pour le texte faisant partie d’un logo ou d’un nom de marque. »

Par « texte agrandi », on entend ici les textes d’en-tête tels que les titres ou les sous-titres, des textes d’une taille d’au moins 18px. Il est crucial de s’assurer que votre site web présente un contraste suffisant, car cela garantit son accessibilité aux personnes ayant une vision réduite, facilitant ainsi leur navigation et leur compréhension des contenus proposés. Afin de vérifier le contraste d’un texte par-dessus un arrière-plan de couleur, un outil tel que celui-ci par WebAIM peut être utilisé.

1.4.4 Redimensionnement du texte

« À l’exception des sous-titres et du texte sous forme d’image, le texte peut être redimensionné jusqu’à 200 pour cent sans l’aide d’une technologie d’assistance et sans perte de contenu ou de fonctionnalité. »

Sur un navigateur d’ordinateur de bureau, il est possible d’agrandir le texte sur une page soit avec une combinaison de touches au clavier ou en utilisation une option de configuration. Si cette fonctionnalité est utilisée pour agrandir le texte à 200% de sa taille originale, la page devrait rester navigable sans que ses fonctionnalités soient brisées. Les techniques de mise en page « responsive » ainsi que l’utilisation d’unités relatives sur les textes sont capitales dans ce cas-ci.

1.4.5 Texte sous forme d’image

« Si les technologies utilisées peuvent réaliser la présentation visuelle, du texte est utilisé pour véhiculer l’information plutôt que du texte sous forme d’image sauf dans les cas suivants : (Niveau AA)

• Personnalisable : le texte sous forme d’image peut être personnalisé visuellement selon les exigences de l’utilisateur;
• Essentielle : une présentation spécifique du texte est essentielle à l’information véhiculée.

Note : les logotypes sont considérés comme essentiels (le texte qui fait partie d’un logo ou d’un nom de marque). »

Une image de texte ne devrait en général pas être utilisée pour remplacer du texte, surtout si c’est uniquement pour des raisons d’esthétisme. Il est question par exemple d’une image contenant un titre en en-tête d’une section avec un effet de calque appliqué sur le texte. Si l’effet peut être reproduit en CSS, le CSS doit être privilégié. Cela ne s’applique pas, par contre, à une image contenant du texte mais également d’autres contenus visuels importants tels que des captures d’écran, des graphiques ou des diagrammes. Une telle image peut alors plutôt être accompagnée d’un attribut « alt » ou d’une légende la décrivant.

2.3.2 Trois clignotements

« Une page Web doit être exempte de tout élément qui clignote plus de trois fois dans n’importe quel intervalle d’une seconde. »

Ce critère est l’un des deux critères de niveau AAA qui doivent être suivis pour que le site soit conforme au standard gouvernemental. Il est aussi très explicite; il faut s’assurer qu’aucun élément ne clignote ou « flashe » rapidement dans un intervalle d’une seconde. À noter que cela peut inclure les contenus vidéos.

2.4.5 Accès multiples

« Une page Web peut être située par plus d’un moyen dans un ensemble de pages Web sauf si cette page est le résultat ou une étape d’un processus. »

Par « résultat ou étape d’un processus », on entend par exemple une page affichant un message de remerciement suite à l’envoi d’un formulaire ou une page de résultats de recherche. Toutes les pages informatives du site devraient être accessibles d’au moins deux façons. Plusieurs méthodes sont disponibles:

• La navigation principales;
• Un outil de recherche propre au site;
• Un fil d’ariane;
• Une sous-navigation placée sur le côté des pages;
• etc.

2.4.6 En-têtes et étiquettes

« Les en-têtes et les étiquettes décrivent le sujet ou le but. »

Ce critère est assez explicite et facile à suivre. Si des en-têtes de section sont présentes (telles que des sous-titres), celles-ci doivent décrire clairement le sujet de la section. Ce critère ne s’applique pas si la page ne contient pas de telles en-têtes.

2.4.7 Visibilité du focus

« Toute interface utilisable au clavier comporte un mode de fonctionnement où le focus est visible. »

Il est possible de naviguer une page Web à l’aide du clavier, par exemple avec la touche Tab. Lorsque ce type de navigation est utilisé, il devrait en tout temps y avoir une indication visuelle indiquant quel élément est actuellement en « focus ». Par défaut, les navigateurs ajouteront une bordure semi-transparente à l’élément en focus. Cette indication peut être modifiée en CSS. Il faut donc éviter de rendre cette indication complètement invisible.

3.1.2 Langue d’un passage

« La langue de chaque passage ou expression du contenu peut être déterminée par un programme informatique sauf pour un nom propre, pour un terme technique, pour un mot dont la langue est indéterminée ou pour un mot ou une expression faisant partie du langage courant de la langue utilisée dans le contexte immédiat. »

Dans une situation où un bout de texte est dans une langue différente du reste de la page, dans une citation par exemple, ce changement de langue devrait être indiqué. L’attribut « lang » peut être ajouté au conteneur de ce texte avec comme valeur le code ISO de la langue.

3.1.4 Abréviations

« Un mécanisme est disponible pour identifier la forme complète ou la signification d’une abréviation. »

Ce critère est le deuxième critère de niveau AAA qui doit être suivi selon le standard du gouvernement du Québec. Plusieurs moyens sont disponibles pour être conforme à ce critère:

• Ajouter la signification complète d’un acronyme à côté de sa première utilisation dans un texte, entre parenthèses. Il ne sera donc pas nécessaire de répéter la forme complète à côté des occurrences subséquentes de cet acronyme dans le contenu de la page.
• L’ajout d’un « tooltip » sur les acronymes et les abréviations. Au clic ou au survol de ces abréviations, la forme complète apparaitra au-dessus de ceux-ci.
• Un dictionnaire des abréviations et acronymes utilisés sur le site et accessible en tout temps.

3.2.3 Navigation cohérente

« Dans un ensemble de pages, les mécanismes de navigation qui se répètent sur plusieurs pages Web se présentent dans le même ordre relatif chaque fois qu’ils sont répétés, à moins qu’un changement soit initié par l’utilisateur. »

Une navigation prédictible est clé pour une expérience utilisateur sans confusion, permettant de trouver facilement les infos nécessaires et améliorant l’accessibilité pour tous. Pour être conforme à ce critère, les éléments de navigation tels que la navigation d’en-tête et de pied de page ou l’outil de recherche doivent rester aux mêmes emplacements et dans le même ordre de page en page.

3.2.4 Identification cohérente

« Dans un ensemble de pages Web les composants qui ont la même fonctionnalité sont identifiés de la même façon. »

Simplement dit, les mêmes icônes devraient être utilisés pour indiquer une même fonctionnalité, de page en page. Inversement, si un même icône est utilisé pour des fonctionnalités similaires mais différentes, cette différence devrait être indiqué textuellement avec une étiquette ou un « tooltip ».

3.3.3 Error Suggestion

« Si une erreur de saisie est automatiquement détectée et que des suggestions de corrections sont connues, ces suggestions sont alors proposées à l’utilisateur à moins que cela puisse compromettre la sécurité ou la finalité du contenu. »

Par exemple dans un champ de formulaire, si le champ contient une erreur, une erreur devrait être affiché à proximité du champ et celle-ci devrait être descriptive et précise. Si possible, elle devrait contenir des exemples de contenus valides. Si une description d’erreur trop précise présente une faille potentielle de sécurité, il serait alors acceptable d’en utiliser une moins précise tant qu’elle reste suffisamment descriptive pour permettre à l’utilisateur de régler l’erreur.

3.3.4 Prévention des erreurs (juridiques, financières, de données)

« Pour les pages Web qui entraînent des engagements juridiques ou des transactions financières de la part de l’utilisateur, qui modifient ou effacent des données contrôlables par l’utilisateur dans des systèmes de stockages de données, qui enregistrent les réponses de l’utilisateur à un test ou un examen, au moins l’une des conditions suivantes est vraie :

• Réversible : les actions d’envoi sont réversibles.
• Vérifiée : les données saisies par l’utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l’utilisateur de les corriger.
• Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale. »

Par exemple, sur une boutique en ligne, il devrait y avoir une étape de confirmation des détails de l’achat (nombre d’items, coûts, coordonnées, etc) avant l’envoi de celui-ci. De plus, il pourrait être possible pour l’utilisateur d’annuler sa commande suite à l’envoi de celle-ci à l’aide d’un formulaire ou en envoyant un courriel à une adresse courriel spécifiée clairement dans la page de confirmation de la commande.

Également, si l’utilisateur s’apprête à supprimer ou modifier des données importantes sur son dossier personnel, il pourrait y avoir un « popup » de confirmation précisant l’action qui s’apprête à se produire.

En conclusion

L’adoption et le respect du standard SGQRI 008 2.0 pour les sites Web d’organismes gouvernementaux québécois ne sont pas seulement une question de conformité légale, mais un engagement envers l’accessibilité, la transparence et l’efficacité de la communication avec le public.

L’accessibilité d’un site Web gouvernemental est cruciale pour garantir que tous les citoyens, quelles que soient leurs capacités, puissent avoir un accès équitable et égal à l’information et aux services en ligne, renforçant ainsi la confiance du public et améliorant l’expérience utilisateur. La conformité à ce standard est donc une étape essentielle vers la création d’un espace numérique inclusif et respectueux des droits de chaque individu.