Découvrez WCAG
L'un des principaux défis en matière de création de contenu accessible est qu'il peut être difficile d'envisager tous les moyens différents dont les utilisateurs peuvent être amenés à interagir avec les sites web. Afin d'aider les concepteurs à appréhender les éléments nécessaires pour rendre leurs sites plus accessibles, le World Wide Web Consortium (W3C) a élaboré les Règles pour l'accessibilité des contenus web (Web Content Accessibility Guidelines, ou WCAG). La première version reposait sur des critères et technologies spécifiques, raison pour laquelle le document a très vite perdu en pertinence, les changements étant extrêmement rapides sur le Web. Par conséquent, lorsque le document a été actualisé, il a été restructuré de manière vraiment intelligente. Au lieu de se concentrer sur des exigences hautement spécifiques, il a été organisé selon une structure hiérarchique, passant de manière graduelle de considérations de niveau supérieur à des considérations plus spécifiques.
Au niveau supérieur, on trouve les quatre principes de l'accessibilité :
Perceptible
Utilisable
Compréhensible
Robuste
Quelles que soient les évolutions technologiques, ces principes de base demeureront toujours applicables. Chaque principe comporte un certain nombre de règles. Ces règles sont plus spécifiques et souvent pertinentes pour certains types de contenus, tels que les images ou les formulaires. Elles sont utiles pour catégoriser les exigences, mais il s'agit tout de même de catégories générales.
Chaque règle comporte des critères de succès suffisamment spécifiques pour pouvoir être testés. Ces critères sont classés en trois niveaux : A, AA et AAA, qui reposent les uns sur les autres.
Le niveau A couvre les exigences d'accessibilité de base.
AA correspond à la meilleure pratique internationale et est généralement requis dans la législation.
AAA est considéré comme une conformité avancée et comprend parfois des exigences plus difficiles à mettre en œuvre.
Pour répondre à un niveau particulier, vous devez tout d'abord répondre au niveau qui le précède. Par conséquent, pour répondre au niveau AA, vous devez également répondre à tous les critères du niveau A.
Chaque critère de succès contenu dans le document comporte également une liste de techniques très spécifiques que les concepteurs peuvent utiliser pour répondre aux critères. Elle comprend aussi les raisons courantes d'échec. Cette liste est une composante dynamique du document. À mesure que les technologies évoluent, elle peut être mise à jour par le W3C pour suivre l'actualité sans remettre en question la structure globale.
L'idée reçue la plus courante concernant les règles WCAG est qu'elles pourraient être utilisées comme une sorte de checklist. Le document n'a jamais été conçu pour être utilisé de la sorte mais, sachant qu'une checklist semble être l'approche la plus simple et la plus rapide, il est souvent utilisé comme tel.
Le problème de cette approche est qu'elle promeut l'idée fausse selon laquelle un site serait « accessible à 100 % » ou soit « accessible », soit « inaccessible ». La réalité, c'est que l'accessibilité s'inscrit dans la continuité : même si un site ne répond à aucun critère WCAG, il sera accessible à certaines personnes, et même s'il répond à tous les critères, certaines personnes ne pourront pas y accéder malgré tout, car leurs besoins ne font pas partie du champ d'application limité du document.
S'il ne s'agit pas d'une checklist, de quoi s'agit-il, alors ?
Le contenu est-il perceptible ? Est-il utilisable ? Est-il compréhensible ? Ne vous méprenez pas pour autant : vous devez absolument vous familiariser avec les critères de succès et les techniques courantes permettant de les respecter. Ainsi, vous serez en mesure d'identifier rapidement les situations dans lesquelles votre contenu web n'est pas conforme aux attentes.
Mais, tout comme obéir aux lois ne garantit pas un comportement éthique, le respect des règles d'accessibilité web ne garantit pas un design inclusif. Il satisfait juste aux exigences minimales. L'avantage des règles pour l'accessibilité des contenus web est qu'elles vous ouvrent les yeux sur différents types de facteurs à prendre en compte. À partir de là, vous pouvez prendre des décisions plus avisées et faire en sorte d'inclure davantage d'utilisateurs.
Comparaison entre les règles WCAG 2.0 et 2.1
Les règles WCAG 2.0 sont plus efficaces que les règles WCAG 1.0 en termes de résistance à l'épreuve du temps. La première mise à jour des règles a eu lieu au bout de dix ans, en 2018. La version 2.1 étant totalement rétrocompatible, chaque exigence incluse dans la version précédente s'applique également à la nouvelle. Cela représente une véritable prouesse quand on sait à quel point le web a évolué !
L'une des principales différences dans la manière dont nous utilisons le Web est que nous interagissons bien plus avec lui sur des appareils mobiles qu'il y a dix ans de cela. C'est pourquoi l'un des principaux objectifs de la mise à jour a consisté à répondre aux enjeux en lien avec l'accessibilité mobile. Les autres objectifs incluaient l'extension des exigences aux utilisateurs aveugles ou malvoyants, et l'ajout de nouvelles exigences pour la prise en charge des utilisateurs atteints de déficiences cognitives.
En fonction de votre localisation géographique et de l'endroit où votre travail sera utilisé, vous pouvez être amené à vous conformer à des versions et niveaux différents de la norme. En Europe, la version actuelle des Exigences d'accessibilité pour les produits et services de technologies de l'information et des communications (EN 301 549) se réfère aux règles WCAG 2.1 Niveau AA. La plupart des autres législations, y compris la section 508 aux États-Unis, le Disability Discrimination Act en Australie et la législation de certaines provinces du Canada exigent de se conformer aux règles WCAG 2.0 AA.
Créez du contenu perceptible
Vous vous souvenez que nous avons abordé deux types de technologies d'assistance ? La première catégorie était la restitution alternative, ou affichage alternatif. Le principe de « perceptibilité » couvre des considérations importantes pour les utilisateurs qui peuvent percevoir votre contenu de manière différente. La clé, c'est l'adaptabilité !
Le texte est souvent le média le plus simple pour passer d'un mode à un autre. Le texte et les descriptions de supports visuels peuvent être perçus via l'ouïe (lecteur d'écran) ou le toucher (Braille) ; le son peut être perçu par la vue (sous-titres et transcriptions). Toutefois, il existe d'autres facteurs à prendre en compte. Pour cette raison, intéressons-nous de plus près aux règles.
Contenu non textuel
Le contenu non textuel fait référence aux supports visuels sur vos pages, tels que des illustrations, des liens vers des images, des icônes ou des tableaux. Pour pouvoir percevoir les informations contenues dans ces supports visuels, les personnes non voyantes ont besoin de descriptions textuelles alternatives.
Alternatives aux médias temporels
Le terme « média temporel » est une manière élaborée de désigner le contenu audio, visuel ou audiovisuel. Pour les utilisateurs non entendants, toutes les vidéos doivent être sous-titrées, et tous les contenus audio, tels que les podcasts ou les enregistrements de réunion, doivent proposer des transcriptions.
Pour rendre un contenu visuel ou audiovisuel accessible aux utilisateurs non voyants, vous devez fournir des descriptions. Les descriptions peuvent prendre la forme d'un texte ou d'une vidéo descriptive intégrant des descriptions des supports visuels dans la piste narrative.
Contenu adaptable
Avez-vous déjà agrandi ou mis en gras un passage d'un texte sur un éditeur de texte, puis admiré le magnifique titre que vous veniez de créer ? Je dois vous avouer quelque chose : ce titre (ou header) était une imposture. Certes, il ressemblait peut-être à un titre, mais aucune marque sémantique ne l'identifiait comme tel.
Si une personne ne peut pas percevoir de différence visuelle entre le titre et le reste du texte, elle pensera juste qu'il s'agit de texte ordinaire. Du coup, il est beaucoup plus difficile de comprendre la structure de la page et la manière dont le contenu est organisé. Lorsque les en-têtes sont identifiés dans le balisage, les utilisateurs de technologies d'assistance peuvent passer d'un en-tête à un autre. C'est un moyen bien plus efficace pour naviguer dans la page, en particulier lorsque vous ne pouvez pas le parcourir d'un seul regard.
En attribuant une signification sémantique ou « définie par programmation » à votre contenu, vous permettez son adaptation pour une représentation visuelle ou non visuelle sans perte de signification. Cela ne s'applique pas seulement aux titres. Vous devez procéder de la même manière pour tout contenu, afin que le rôle de ce contenu sur la page soit clair pour les utilisateurs non voyants.
Autre point à garder à l'esprit : contrairement à la présentation visuelle, les technologies d'assistance doivent linéariser le contenu car, pour le son et le Braille, une seule chose peut être communiquée à la fois. Lorsque le contenu est linéarisé, il doit toujours apparaître dans un ordre logique, afin que l'ordre du code corresponde à l'ordre visuel.
Enfin, vous ne devez jamais vous reposer sur un seul type d'indication sensorielle. Évitez les instructions du style « Appuyez sur le gros bouton bleu » ou « Vous entendrez un "bip" une fois le test terminé », car ces instructions peuvent être inutiles pour les personnes qui doivent les adapter afin d'utiliser un autre mode.
Distinguable
Les utilisateurs doivent être en mesure de distinguer le contenu de tout ce qui l'entoure. Veillez à ce que le contraste soit suffisamment élevé entre l'arrière-plan et les informations qui s'affichent sur ce dernier, telles que le texte et les éléments visuels importants. Vous devez également séparer le texte de l'arrière-plan au lieu de l'incorporer dans des images. Vous avez peut-être déjà rencontré des bannières publicitaires dans lesquelles le texte et les visuels constituent un seul bloc d'image. Cela empêche les utilisateurs de modifier la taille du texte, les polices et les couleurs quand cela est nécessaire.
Une exigence est également formulée concernant la lecture automatique du son. Si du son est diffusé lorsque la page se charge, notamment dans une vidéo ou une publicité, les utilisateurs doivent être mesure de le couper ou de régler le volume indépendamment du volume du système.
Pouvez-vous deviner pourquoi il est nécessaire de séparer le premier plan de l'arrière-plan ?
Si vous utilisez un lecteur d'écran, les informations lues constituent votre « premier plan ». Tout autre son sur la page fait partie de l'« arrière-plan » et peut interférer avec votre aptitude à percevoir le contenu de la page.
Veillez à ce que votre interface soit utilisable
Souvenez-vous de la deuxième catégorie d'équipements d'assistance. Tout comme la perceptibilité est importante pour les personnes qui ont besoin d'une restitution alternative, l'utilisabilité consiste à aider les utilisateurs qui ont besoin d'un système de saisie alternatif.
Accessibilité au clavier
Chaque élément interactif du site doit être utilisable au moyen d'un clavier. Cela n'est pas dû au fait que toute personne qui ne peut pas utiliser la souris ou les interactions tactiles sera un utilisateur du clavier. Toutefois, l'utilisation du clavier se transpose bien dans d'autres modes d'interaction alternatifs. De plus, les interactions avec les lecteurs d'écran étant souvent basées sur le clavier, si un élément n'est pas accessible au clavier, il ne sera pas accessible aux utilisateurs de lecteurs d'écran ou d'autres technologies d'assistance.
Accordez un délai suffisant aux utilisateurs
La durée nécessaire pour accomplir une tâche est très différente d'une personne à l'autre ! Si vous utilisez du contenu en mouvement ou se mettant automatiquement à jour, donnez aux utilisateurs la possibilité de l'arrêter ou de le masquer complètement. Cela peut être utile pour les utilisateurs qui ont besoin de temps supplémentaire et ceux qui peuvent être distraits par un mouvement sur la page.
Si la page peut expirer, qu'il s'agisse d'un formulaire interactif ou d'une session de connexion, informez les utilisateurs avant l'expiration de la page et offrez-leur la possibilité de prolonger la session. Cela est particulièrement important si les utilisateurs risquent de perdre leur travail en raison de l'expiration.
Ne provoquez pas de crises
Cette règle est simple : ne faites rien clignoter à une fréquence supérieure à 3 flashs par seconde. Le contenu qui clignote peut déclencher des crises d'épilepsie chez certaines personnes.
Prenez en charge la navigabilité
L'un des défis en matière de navigation au clavier est le fait que vous avez souvent besoin de naviguer entre plusieurs éléments avant d'atteindre celui qui vous intéresse. Si vous avez des blocs ou des liens qui se répètent sur chaque page, évitez aux utilisateurs d'avoir à les parcourir tous chaque fois qu'ils atteignent une nouvelle page en leur proposant un « lien d'accès direct au contenu ». Ces liens sont souvent masqués jusqu'à ce que quelqu'un les active. Par conséquent, à moins d'en avoir besoin, vous ne saurez même pas qu'ils existent.
Même si toutes les commandes interactives sont accessibles avec un clavier, les utilisateurs ne seront pas en mesure de naviguer dans le site s'ils ne peuvent pas savoir où ils se trouvent. Lorsque les utilisateurs de clavier interagissent avec le site, aucun curseur ne pointe vers leur emplacement sur la page. Par conséquent, vous devez disposer d'un indicateur de focus clair pour les éléments interactifs, tels que les boutons et les liens.
Vous devez également faciliter la recherche de contenu et aider les utilisateurs à repérer l'endroit où ils se situent dans le site. Attribuez à vos pages des titres uniques définis par programmation et fournissez plusieurs moyens de trouver des informations en ajoutant par exemple une fonction de recherche ou un plan du site. Les titres et libellés clairs sont un autre moyen d'aider les utilisateurs à s'orienter sur la page.
Les visiteurs de votre site doivent savoir non seulement où ils sont, mais aussi où ils vont. Évitez d'utiliser des liens ambigus tels que « Afficher la suite » ou « Cliquez ici » et associez au lien une description de sa destination.
Rendez votre site compréhensible
La compréhensibilité est vraiment une question d'utilisabilité. Ce principe a pour but d'aider les utilisateurs à comprendre non seulement le contenu proprement dit, mais aussi comment le site et ses éléments doivent se comporter.
Lisibilité
Les lecteurs d'écran doivent savoir quelle langue ils lisent afin de pouvoir la prononcer correctement. Imaginez-les en train d'essayer de lire un paragraphe en anglais en le prononçant comme s'il était écrit en français ! Cela aide également les navigateurs à afficher les bons caractères alphabétiques. Définissez la langue de votre contenu par programmation pour l'ensemble de la page HTML et, si vous avez des passages de texte dans une autre langue, de manière distincte pour ces passages.
Prévisibilité
La prévisibilité est une question de cohérence ! Veillez à la cohérence des éléments répétés d'une page à l'autre, tels que les éléments de navigation. Si des éléments ont une fonction similaire, leur libellé, leur apparence et leur comportement doivent être identiques.
Si des éléments ont des fonctions similaires, mais se comportent un peu différemment d'une page à l'autre, vous contraignez l'utilisateur à réapprendre à les utiliser à chaque fois. Cela peut être frustrant pour tous les utilisateurs, mais c'est particulièrement complexe pour les utilisateurs non voyants et les utilisateurs souffrant de troubles cognitifs, qui se fient à la cohérence.
Fournissez de l'aide pour les formulaires
Vous avez sans doute déjà renseigné un formulaire qui vous a été renvoyé avec de nombreux champs surlignés en rouge sans la moindre explication. Le renseignement de formulaires peut être une expérience vraiment frustrante si les instructions ou les erreurs ne sont pas claires. Essayez d'être aussi spécifique que possible concernant les informations que les utilisateurs doivent saisir. Si un format spécifique est requis, il peut être utile de fournir des exemples. Si le formulaire est renvoyé avec une erreur, indiquez très clairement l'endroit où l'erreur s'est produite et ce que la personne doit faire pour la résoudre.
L'un de mes exemples préférés est celui du formulaire de carte de crédit. Pouvez-vous deviner ce qui en fait un bon exemple ?
Ce formulaire n'a vraiment rien de spécial. Mais les instructions sont tellement claires que même une personne se réveillant d'un long coma sans avoir jamais vu de carte de crédit de sa vie serait probablement en mesure de le renseigner correctement.
Concevez du contenu web robuste
Bien qu'il suive le principe de compréhensibilité, le principe de robustesse est certainement le moins compréhensible de tous dans les règles WCAG. Pour faire bref, il a pour but de faciliter l'interopérabilité afin que les utilisateurs puissent accéder au contenu du site, quels que soient les technologies et les navigateurs utilisés.
Compatibilité avec différentes technologies
Tout d'abord, vous devez vous assurer de l'absence d'erreurs de validation dans votre balisage. Les erreurs de balisage telles que les ID en double ou les balises de début et de fin incomplètes peuvent empêcher les technologies d'assistance de communiquer correctement les informations. Par exemple, si un élément saisi comporte un ID en double, les technologies d'assistance risquent ne pas être en mesure de l'associer au libellé qui le décrit.
Ensuite, vous devez vous assurer que des rôles, des états et des propriétés ont été assignés à tous les éléments du site, en particulier si vous utilisez des composants personnalisés. Tout comme les titres et en-têtes que j'ai mentionnés à la section Contenu adaptable, la fonction de tous les éléments doivent être identifiée par programmation.
En résumé
Les Règles pour l'accessibilité des contenus web (Web Content Accessibility Guidelines, ou WCAG) ont été créées pour guider les personnes souhaitant rendre le Web accessible à un plus vaste public d'utilisateurs.
Les règles WCAG sont articulées autour de 4 grands principes :
un contenu perceptible peut être présenté dans différents modes : visuel, sonore et tactile ;
un contenu utilisable peut faire l'objet de différents types d'interactions et ne se limite pas à des interactions avec la souris ou des gestes spécifiques ;
un contenu compréhensible est prévisible, clair, et aide les utilisateurs lors des interactions ;
un contenu robuste prend en charge une vaste représentation sur différents agents utilisateurs, ainsi que différents types de technologies d'assistance.
Chaque principe est accompagné de différentes règles, et chaque règle contient des critères de succès spécifiques et testables.
Dans la partie suivante, nous allons nous intéresser plus en détail aux règles et évaluer chacun des critères de succès à l'aide de tests automatisés, manuels, et reposant sur les technologies d'assistance.
