Accessibilité Web de la Laurentienne

L’accessibilité Web signifie que tout le monde a la possibilité de vivre pleinement l’expérience en ligne, quelles que soient ses capacités. Lorsque les sites Web sont bien conçus, développés et édités, tous les usagers ont un accès égal aux informations et aux fonctionnalités, sans discrimination.

En vertu de la Loi sur l’accessibilité pour les personnes handicapées de l’Ontario (LAPHO), le gouvernement stipule que les sites Web doivent répondre tous aux exigences du niveau comme l’indiquent les Règles pour l’accessibilité des contenus Web (WCAG) 2.1. Très attachée au fait que ces lignes directrices ont été élaborées pour s’attaquer aux obstacles que connaissent les personnes en situation de handicap (visuel, moteur, auditif et cognitif), l’Université Laurentienne entend les abolir offrant ainsi l’accès égal à l’information et au contenu afin de leur faire bénéficier en ligne d’une expérience à caractère inclusive.

Aux fins d’accessibilité, une vérification d’un nouveau site Web ne devrait pas être la dernière étape avant le lancement de celui-ci. Dans de tels cas, de nombreux problèmes d’accessibilité font souvent jour, ce qui entraîne une refonte coûteuse et retarde le lancement. Pour éviter ce scénario, l’accessibilité doit faire partie du processus de développement dès le début et non un point de contrôle s’ajoutant à la fin. 

Lorsque vous créez un nouveau site Web ou réaménagez un site en service, Technologie de l’information et Stratégies numériques de l’Université Laurentienne ont déterminé les éléments clés ci-dessous qu’il faut prendre en compte parmi les critères de réussite des WCAG.

Une liste complète des critères de réussite selon les WCAG figure sur le site de W3C. 

Écrire pour le Web

Lorsque vous rédigez des textes destinés au Web, vous devez le faire aussi clairement et aussi simplement que possible en évitant le jargon et les abréviations. Si vous utilisez des abréviations, il faut les expliquer dès le premier emploi sur chaque page ou point de référence. Soyez particulièrement attentifs aux redondances, puisque les informations peu claires ou répétitives peuvent frustrer les personnes qui utilisent un lecteur d’écran. 

Utilisation de couleurs

La couleur est un atout important dans la conception de sites Web, car elle améliore l’attrait esthétique, la facilité d’emploi et l’accessibilité. Toutefois, puisque la couleur est perçue différemment par les personnes, elle ne devrait jamais être le seul moyen de transmettre l’information. Prenons le cas des personnes qui se servent de lecteurs d’écrans et de navigateurs en mode texte uniquement, en couleur limitée ou monochrome. Il leur sera impossible d’accéder aux informations qui ne sont présentées qu’en couleur.

• Les graphiques et les tableaux devraient toujours être accompagnés de données (chiffres, texte) qui transmettent adéquatement ce que représente le contenu visuel.
• Il faut inclure des repères visuels supplémentaires à l’usage des liens ou des commandes lorsque la couleur seule est utilisée pour les identifier. Ces repères consistent notamment à souligner les hyperliens afin qu’on puisse les distinguer facilement du texte qui les entoure. 
   

Contraste de couleurs

Alors que la couleur est essentielle à la conception de sites Web, il est tout aussi important de s’assurer que toutes les couleurs choisies présentent, entre l’avant-plan et l’arrière-plan, un contraste suffisant pour que le texte soit bien visible.

Selon les normes d’accessibilité des WCAG 2.1, les combinaisons de couleurs doivent respecter les rapports de contraste suivants :

• Le niveau AA prescrit un rapport de contraste d’au moins 4,5:1 pour le texte normal et de 3:1 pour les textes de grande taille.
• Le niveau AA prescrit un rapport de contraste d’au moins 7:1 pour un texte normal et de 4,5:1 pour un texte de grande taille.
• Le texte de grande taille est défini comme étant de 19 pixels (1,2 em) et plus en gras, ou de 24 pixels (2 em) et plus.

Le site Contrast Checker de WebAIM (vérificateur de contrastes) est un excellent outil en ce qu’il permet de déterminer l’accessibilité des différentes combinaisons de couleurs d’avant-plan et d’arrière-plan. 

Hiérarchie des titres

Par le passé, les titres (H1, H2, etc.) servaient principalement à marquer une préférence stylistique. Ils ont toutefois évolué pour revêtir la valeur d’une fonction et sont avant tout un outil de structuration. Ils constituent des éléments particulièrement importants pour les utilisateurs de lecteurs d’écran.

En clair, la hiérarchisation logique doit être privilégiée :

• Le titre du document doit être le seul titre se référant à la rubrique vedette (H1).
• Tous les titres consécutifs sont censés suivre une relation parent/enfant normale.
• Le saut des rangs des titres est à éviter, sinon le contenu risque d’être déroutant en matière de navigation. Les différents niveaux de sous-titres doivent se trouver sous les vedettes principales, par exemple une H3 serait nichée sous une H2.

Une bonne structure de titres

H1 - Titre de page

H2 - En-tête de section
H3 - En-tête de sous-section 1
H3 - En-tête de sous-section 2

H2 - En-tête de section
H3 - En-tête de sous-section
H4 - En-tête de sous-alinéa

Une mauvaise structure de titres

H1 - Titre de page

H3 - En-tête de section 1 (H2 a été omis)
H4 - En-tête de sous-section

H1 - En-tête de section (H1 est utilisé 2 fois) 

Contournement de blocs ou sauts de liens de navigation

Il est important de savoir que, chaque fois qu’une personne en situation de handicap navigue vers une nouvelle page de votre site Web, elle doit parcourir tous les liens de navigation et autres contenus annexes avant d’arriver à la zone de contenu principale de la page. Pour que cette expérience soit moins frustrante, il est bon d’ajouter un bouton « Passer au contenu principal ». Il y a plusieurs façons de le faire. Pour en savoir plus sur la création de sauts de navigation et d’exemples de codes, consultez les liens « Skip Navigation » de WebAIM. 

Liens de page auto-descriptifs

Assurez-vous que les hyperliens sont autodescriptifs, c’est-à-dire qu’ils ont un sens hors contexte. Bien que pratique courante, les liens comme « Cliquez ici » ou « En savoir plus » ne fournissent à une personne utilisant un lecteur d’écran aucune information utile. Selon la meilleure pratique, les hyperliens doivent être descriptifs et renvoyer à des substantifs spécifiques au contexte.

Bons liens

S’inscrire au séminaire Santé et sécurité

En apprendre plus sur le Bureau de l’équité, de la diversité et des droits de la personne

En savoir plus sur la Communauté du Grand Sudbury

Mauvais liens

Cliquez ici pour vous inscrire

En apprendre plus sur le Bureau de l’équité, de la diversité et des droits de la personne

En savoir plus 

Texte substitut aux images

Il est impératif de fournir du texte substitut pour tout contenu non textuel, c’est-à-dire que toutes les images doivent avoir un texte qui décrit l’information ou la fonction qu’elles représentent. 

• Le texte substitut doit être concis et pertinent.
• Il doit être limité à 80 caractères ou moins.
• Il doit obéir aux règles de la ponctuation et de la structure de phrases.
• Il convient de ne pas commencer les descriptions par « image de... » ou « graphique de... ». 
• Il doit être contextuellement pertinent au vu de l’information environnante.
   

Pour en savoir plus sur le bon usage des concepts qui sous-tendent le texte substitut, veuillez consulter le site Images Tutorial de W3C. Pour une liste complète des critères de réussite propres aux différents types de contenu non textuel, veuillez consulter le document intitulé « Non-text Content: Understanding Success Criterion 1.1.1 » sur le site Web de W3C.

Images de texte

Les images de texte servent souvent de garantie d’un style particulier de conception. Toutefois, si l’auteur peut obtenir le même effet visuel en se servant de texte (HTML, CSS), il doit présenter l’information sous forme de texte plutôt que par une image. Lorsque des feuilles de style CSS sont utilisées à bon escient, elles peuvent servir, à elles seules, à contrôler la présentation visuelle du texte en conservant un style de conception, tout en étant accessibles à tous.

Pour mieux en comprendre le bon usage et les exceptions, consultez le document intitulé « Images of Text Tutorial » sur le site Web de W3C. 

Formulaires et étiquettes

Sur un site Web, les formulaires servent à différentes fonctions, notamment la recherche, la connexion, l’inscription, les commentaires et les achats.

• Dans ce contexte, il convient de donner des instructions permettant aux personnes de savoir quoi faire alors qu’elles remplissent le formulaire et manient les commandes individuelles du formulaire.
• Il faut utiliser l’étiquette et dans des cas précis, d’autres mécanismes (p. ex., WAI-ARIA, attribut titre, etc.), pour identifier chaque commande de formulaire.
• L’ordre des éléments sélectionnés au clavier doit correspondre à l’ordre visuel du formulaire.
• Il faut informer les utilisateurs de la bonne exécution des tâches et des erreurs, et leur donner des instructions pour les aider à corriger les erreurs.

Pour une vue d’ensemble complète de la création de formulaires accessibles, veuillez consulter le document intitulé « Form Concepts Tutorial » sur le site Web de W3C. 

Tableaux

Les tableaux de données servent à organiser les données en fonction d’une relation logique dans des grilles. Les tableaux accessibles exigent un balisage HTML qui indique les cellules d’en-tête et de données et définit leur relation. Les technologies d’assistance s’appuient sur ces deux ordres d’information pour mettre les utilisateurs en contexte. Les tableaux ne doivent servir que pour les données tabulaires, et non la mise en page.

• Utilisez les en-têtes de tableau pour baliser tous les en-têtes de colonne ou de ligne et les cellules de données à des fins de contenu.
• Définissez la portée de chaque en-tête en indiquant s’il s’agit d’un en-tête de colonne ou de ligne, la valeur de l’attribut de portée pouvant être « col » ou « row ».
• Dans la mesure du possible, évitez les cellules fusionnées et les en-têtes de tableau vides.

Les tableaux sans balisage structurel peuvent engendrer des obstacles à l’accessibilité. Pour tout complément d’information, suivez le tutoriel « Table Concepts Tutorial » sur le site Web de W3C. 

Fichiers PDF

Selon les WCAG 2.1, les fichiers PDF sont assimilés à du contenu Web et constituent une extension de votre site Web. Si le fichier PDF est un formulaire, vous pouvez vous servir de Google Forms ou communiquez avec le Service de la TI pour faire créer un substitut accessible. Si le fichier PDF est un document, envisagez plutôt de le convertir en une page Web. Voici quelques références utiles à caractère tutoriel :

Il existe divers outils gratuits permettant de vérifier à fond l’accessibilité globale d’un site Web.

Test manuel

L’accessibilité n’est pas purement technique vu qu’elle est avant tout une question d’expérience humaine. De ce fait, le test manuel constitue une première étape importante pour déterminer l’efficacité globale d’un site Web du point de vue de sa mise en page et de sa conception, et un moyen facile de trouver les premiers points de frustration.

À ce propos, essayez de naviguer un site Web à l’aide du clavier, en vous servant d’une combinaison des touches de tabulation (Tab) et Entrée, et en gardant à l’esprit les questions suivantes :

• Vous est-il possible d’accéder à tous les liens, boutons, menus ou composants interactifs comme les panneaux accordéon, les menus contextuels de navigation ou les carrousels?
• Pouvez-vous faire pause sur un carrousel d’images?
• Pouvez-vous voir où se situe votre curseur sur la page?
• Le curseur suit-il un sens logique, de haut en bas, de gauche à droite ou saute-t-il un peu partout? 
   

Test par lecteur d’écran

Pour les personnes en situation de handicap, un lecteur d’écran est un moyen d’accès courant à des contenus en ligne. Bien comprendre comment les lecteurs d’écran considèrent votre site Web et son contenu peut apporter des informations précieuses, de quoi faire en sorte que toutes les personnes bénéficient de la même expérience. Il est également plus probable qu’elles vous amènent à relever des contenus redondants ou mal conçus lorsque vous êtes obligés d’écouter le lecteur d’écran, plutôt qu’en parcourant le site visuellement.

Essayez de naviguer sur un site Web à l’aide d’un lecteur d’écran, votre moniteur éteint. Si vous disposez d’un ordinateur Apple, vous pouvez essayer VoiceOver, utilitaire de lecture d’écran intégré à partir des paramètres d’accessibilité. Sous Windows, téléchargez un lecteur d’écran gratuit comme NVDA.

Un autre outil, ChromeVox, une extension par excellence de Chrome de Google, est à la disposition de tous les éditeurs et les développeurs de contenus.

Lorsque vous utilisez un lecteur d’écran, voici quelques points ou questions dont vous devriez tenir compte :

• Lorsque vous annoncez le lien vers la page d’accueil (assimilée en général au logo du site), vous est-il possible de savoir où le lien vous amène de ce qui est dit? Qu’en est-il des autres liens? Est-ce que ce que l’on vous lit donne un contexte indiquant où cela vous mènera?
• S’il y a plusieurs menus, pouvez-vous dire dans quel menu vous êtes et quel lien vous y donne accès?
• Pour tous les formulaires, êtes-vous en mesure de savoir quelles informations vous sont demandées lorsque vous êtes invités à saisir du texte (c’est-à-dire, entendez-vous quelque chose comme « entrez des termes de recherche »)?
• Vous a-t-on lu le contenu intégral de la page?
• Le texte substitut d’une image vous donne-t-il un contexte suffisant pour comprendre le sujet de l’image et sa pertinence pour l’ensemble de l’action? 

Tests automatisés

Pour vérifier le degré d’accessibilité d’un site Web, il existe de nombreux outils, modules d’extension, signets d’applet (bookmarklets) et applications, tous gratuits. Bien que très utiles pour cerner les problèmes de conformité et les erreurs du point de vue du contenu ou du développement, les outils automatisés ne devraient jamais être les seuls moyens mis en œuvre pour valider la conformité aux lignes directrices sur l’accessibilité.

Voici les outils de contrôle automatiques que recommande l’Université Laurentienne :

• Sa11y Accessibility Quality Assurance Assistant de l’Université Ryerson, est un signet d’applet permettant la visualisation en matière d’accessibilité.
   
• WAVE Web Accessibility Evaluation Tool (outil d’évaluation de l’accessibilité Web) est offert sur le site Web de la société et comme une extension de navigateur pour Chrome et FireFox.
   
• SiteImprove Accessibility Checker (vérificateur d’accessibilité) est une extension de navigateur pour Chrome de Google.
   
• Color Contrast Accessibility Validator (validateur d’accessibilité au contraste des couleurs), d’a11y, est un outil efficace, mais ne vérifie que les rapports de contraste des couleurs. De la même manière, le Contrast Checker de WebAIM (vérificateur de contrastes) est un excellent outil en ce qu’il permet de déterminer l’accessibilité des diverses combinaisons de couleurs à mesure que vous développez un nouveau site Web.