Une introduction à l'accessibilité : Partie 1

L'accessibilité est un terme que vous entendez sans cesse, mais que vous ne comprenez peut-être pas entièrement. C'est en partie parce que le mot lui-même peut être un peu déroutant. Le mot racine, accès, donne l'impression que le concept est lié à des choses comme les mots de passe. Si les utilisateurs peuvent "accéder" à votre site, l'accessibilité est cochée. Si seulement c'était si simple.

L'accessibilité du Web concerne la capacité d'un utilisateur à accéder au contenu de votre site, indépendamment de toute déficience physique ou mentale. L'inventeur d'Internet, Sir Tim Berners-Lee, l'a parfaitement dit :

« La puissance du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, est un aspect essentiel.

Un site Web vraiment accessible inclut tous les utilisateurs potentiels. Il couvre les capacités différentielles de toutes formes, tailles et permanences. Les utilisateurs aveugles ont leurs propres besoins, tout comme les utilisateurs avec une main cassée. Il y a aussi des chevauchements entre les groupes d'accessibilité. Les utilisateurs présentant des symptômes de commotion cérébrale peuvent bénéficier de fonctionnalités conçues pour rendre un contenu plus accessible aux utilisateurs qui subissent des crises. L'accessibilité est un sujet à multiples facettes.

Exigences WCAG 2.0

Comme toutes les grandes choses, l'accessibilité est facile à apprendre mais difficile à maîtriser. Bien que les normes individuelles ne soient pas si compliquées, les directives pour l'accessibilité des contenus Web (WCAG) actuelles peuvent être accablantes. C'est pourquoi je vais les décomposer pour vous et traduire une partie du jargon juridique limite en quelque chose qui ressemble à l'anglais.

Il existe quatre principes principaux de l'accessibilité du Web. Votre site et son contenu doivent être perceptibles, utilisables, compréhensibles et robustes. Les normes WCAG sont organisées selon ces quatre principes.

Dans la première partie de notre série « Introduction à l'accessibilité », nous allons nous concentrer sur le premier principe : perceptible.

Perceptible

Pour qu'un site soit considéré comme perceptible, "les composants d'information et d'interface utilisateur doivent être présentables aux utilisateurs d'une manière qu'ils peuvent percevoir". La perception dans le contexte du Web peut prendre plusieurs formes. Pour la plupart des gens, la perception signifie être capable de voir et de lire un site Web. Mais que se passe-t-il si un utilisateur souffre de déficiences visuelles ? C'est là qu'interviennent les normes WCAG.

Les images représentent une partie importante de l'expérience Internet pour la plupart des utilisateurs. Certaines images sont décoratives. Certains sont complémentaires, fournissant un exemple plus facile à discerner. Mais souvent, les images sont des éléments de contenu vitaux, essentiels à la signification du segment de contenu. Dans ces cas, une alternative textuelle doit être fournie. C'est, mes amis, à quoi sert l'attribut "alt" sur vos images. "Alt" signifie "alternative", c'est-à-dire une description textuelle alternative. Cela ne signifie PAS "me bourrer de mots-clés SEO".

Cela signifie également que les images non essentielles doivent être balisées de manière à ce que les lecteurs d'écran puissent les ignorer complètement. Une façon de faire est de laisser l'attribut "alt" vide. Oui, vide. Cela semble contre-intuitif, mais avoir des images purement décoratives avec des attributs "alt" remplis peut en fait rendre votre site et son contenu plus difficiles à percevoir pour les utilisateurs non voyants.

Qu'en est-il des utilisateurs qui peuvent voir, mais ne peuvent pas entendre ? WCAG fournit quelques normes différentes. Selon que votre contenu est préenregistré, comme une vidéo YouTube intégrée, ou en direct, comme le flux en direct d'une conférence, la norme diffère. Les vidéos préenregistrées doivent être sous-titrées. Alternativement, vous pouvez fournir une transcription de la vidéo en dessous. Au minimum, un résumé du contenu vidéo doit être fourni. Des normes plus élevées, comme la norme AAA 1.2.6, exigent des interprétations en langue des signes de votre contenu vidéo. Les normes AAA ne sont pas exigées par la loi, mais si vous avez la bande passante financière pour fournir un tel service, cela peut très bien différencier votre entreprise.

Le principe perceptible couvre également la façon dont votre contenu est organisé. Dans un contexte de développement, cela fait référence à la façon dont un site ou un élément de contenu est balisé en HTML. Votre contenu doit être balisé d'une manière qui a un sens sémantique. L'utilisateur ne doit pas rencontrer de contenu dont les éléments sont hors service lorsqu'il est expérimenté en dehors du navigateur typique. Chaque paragraphe doit s'écouler l'un après l'autre, sans l'interruption d'une barre latérale ou d'un autre élément non lié au contenu.

Ceci est essentiel pour les utilisateurs de lecteurs d'écran. Ils font l'expérience d'un site Web de manière linéaire. Alors que des fonctionnalités telles que les liens de saut facilitent la navigation, le concept de base d'un lecteur d'écran est de lire littéralement l'écran de gauche à droite (ou de droite à gauche dans certaines langues). Lorsque votre contenu est divisé par d'autres éléments en raison d'un mauvais balisage, l'utilisateur est confus lorsque le lecteur saute de section en section. Comme ils ne peuvent probablement pas voir, ils n'ont pas d'alternative pour les aider à mieux comprendre pourquoi le saut se produit.

Le dernier aspect du principe perceptible, la distinction, est sans doute le plus important. Les décisions prises ici peuvent affecter l'intégralité de votre marque, ce qui explique également pourquoi il s'agit de l'un des aspects les plus négligés de l'accessibilité Web. Distinguabilité est un long mot pour un sujet simple : l'utilisateur peut-il faire la différence entre le contenu de premier plan et d'arrière-plan. Ce n'est pas qu'une discussion. La distinction couvre également les éléments audio et vidéo.

La distinction prend plusieurs formes même en ce qui concerne la couleur. La première consiste à s'assurer que la couleur n'est pas le seul moyen de distinguer un élément comme étant différent. Le cas d'utilisation clair ici utilise le vert pour le texte de réussite et le rouge pour le texte d'échec. Il est important d'ajouter un indicateur supplémentaire dans ce scénario afin que les utilisateurs daltoniens, dont le daltonisme rouge/vert est le plus courant, puissent faire la différence entre les deux états.

L'utilisation de la couleur comme seul indicateur est un énorme problème sur le Web. Pensez à tous les sites que vous avez visités qui accordent clairement une grande importance au design. Leur look est peaufiné dans les moindres détails. Tout au long du contenu, vous remarquerez peut-être quelque chose : Rien n'est souligné. C'est parce que la conception exigeait que les liens soient d'une couleur différente de celle du texte. C'est ainsi qu'ils se démarquent. C'est incroyablement commun, et c'est incroyablement inaccessible.

Le soulignement existe pour une raison, mais les designers le détestent parce que c'est moche. Il existe des moyens d'améliorer l'apparence du soulignement et de le rendre plus accessible. Une méthode consiste à utiliser des dégradés pour le soulignement. Une autre consiste à utiliser des bordures. Quelle que soit la manière dont vous le modifiez, assurez-vous que le soulignement reste.

Un autre aspect clé de la distinction est le contraste des couleurs. Au minimum, le rapport de contraste entre la couleur de votre contenu et sa couleur d'arrière-plan doit être de 4,5. Ce ratio descend légèrement à 3,0 pour un texte plus grand. Pour calculer votre rapport de contraste, utilisez l'un des nombreux calculateurs de contraste disponibles en ligne. Le problème du contraste des couleurs est celui qui entraîne souvent des problèmes avec l'équipe de conception de votre site. Les couleurs de la marque ont tendance à prévaloir dans ces discussions, c'est pourquoi l'accessibilité doit être prise en compte lors du choix des couleurs de la marque. Heureusement, il existe également la solution de repli standard : texte noir sur fond blanc.

D'autres aspects moins connus de la distinction incluent la lecture automatique de l'audio et de la vidéo en arrière-plan, ainsi que le redimensionnement des polices. Le redimensionnement des polices est un autre problème d'accessibilité important qui est souvent négligé. Vous ne devez jamais utiliser de valeurs de pixel pour vos tailles de police. Cela empêche les utilisateurs de redimensionner le texte à l'aide des paramètres de leur navigateur. Utilisez plutôt des unités relatives comme ems ou rems. Vous pouvez conserver vos valeurs de pixel comme solution de rechange pour les anciens navigateurs, mais il est important d'être avant-gardiste en matière d'accessibilité.

La perceptibilité vient en premier dans les principes d'accessibilité pour une raison. Bon nombre de ses normes sont des aspects vitaux d'un site Web accessible. Si un utilisateur ne peut pas percevoir un site, il ne peut pas interagir avec lui. Tout au long de cette série d'articles de synthèse, j'aborderai les autres principes, mais n'oubliez jamais ce premier point. Vous devez fournir à tous les utilisateurs un moyen de percevoir votre site Web et son contenu. Si vous ne le faites pas, vous perdrez des clients et des clients, souvent pour de bon.