Nous vivons dans un monde où nous sommes de plus en plus dépendant d’internet, pour tout ce que nous faisons. Pensez-y : où avez-vous trouvé votre dernier emploi ? Où avez-vous envoyé votre candidature pour cet emploi ? Comment consultez-vous l’état de vos comptes bancaires ? Où faites-vous vos courses ? Comment restez-vous en contact avec votre famille et vos amis ? Il est donc primordial que tout site web soit accessible.

illustration of a female doctor sitting at a desk with three screens above her head, each displaying a different app
Nous utilisons Internet pour presque tout nos besoins, et ce n’est pas prêt de changer. Design d’application réalisé par Spoon Lancer

Internet est peut-être une ressource constante et évidente pour la plupart des gens, mais pour ceux qui vivent avec un handicap, ce n’est pas toujours le cas. Il y a des programmes et des appareils qui permettent à tous d’accéder à l’intégralité de votre site web, par exemple des lecteurs d’écrans, mais ces outils-là ne répondent qu’à une partie des besoins seulement.

Il faut aussi que le design des sites web et des applications mobiles soit conçu pour rendre toutes les plateformes accessibles à tous, que ce soit par le biais d’outils ou simplement dans la conception elle-même.

Pourquoi est-il si important d’avoir un site web accessible

pie chart highlighting 15 percent of the whole
Voici le pourcentage des gens qui vivent avec un handicap, dans le monde. Via Wikimedia Commons

Selon une étude de 2012, presque un Américain sur cinq vit avec un handicap. Dans le monde, on compte approximativement un milliard d’individus, soit 15% de la population mondiale, qui vit avec un handicap.

Tous les handicaps n’empêchent pas de lire un écran d’ordinateur ou d’utiliser Internet, car ces chiffres comprennent par exemple des personnes en fauteuil roulant. Mais il existe bien d’autres handicaps (par exemple, l’autisme, la surdité, les problèmes de vue, de compétences motrices, etc.) qui posent de réelles difficultés pour se servir d’un smartphone ou même d’un ordinateur.

L’accessibilité dans le design de sites web : suggestions et obligations

Si vous êtes aux États-Unis, vous avez probablement déjà entendu parlé de la Loi pour les Américains vivant avec un handicap de 1990 (Americans with Disabilities Act, ADA), qui impose des standards à respecter sur le web. De nombreux autres pays ont mis en place des lois de ce type, comme l’Australia Disability Discrimination Act, la Loi sur l’Accessibilité au Brésil, et l’Europe Action Plan en Europe.

La plupart de ces directives proviennent du Web Content Accessibility Guidelines (WCAG), soit un ensemble de directives créé et entretenu par le World Wide Web Consortium (W3C) au travers du projet Web Accessibility Initiative (WAI). Ça fait beaucoup d’acronymes tout ça !

Tim Berners-Lee looking excitedly at a computer screen
Voici l’homme dernière l’initiative globale de rendre le web accessible à tous. Via Wikimedia Commons

W3C a été créé en 1994 par Tim Berners-Lee (oui, il s’agit bien du Tim Berners-Lee) dans le but de créer un ensemble de directives et de protocoles pour promouvoir le développement à long terme du World Wide Web. Aujourd’hui, l’association regroupe plus de 400 organisations, dont beaucoup participent également au WAI. La version la plus récente des directives est la WCAG 2.1, publiée en 2018.

Les WCAG 2.1 comprennent toutes les dernières directives, ainsi que les meilleures pratiques à l’intention des graphistes spécialisés dans le design de sites web, dans le but de les aider à rendre leurs designs accessibles. C’est un document long, dense, et rempli de termes techniques. Au lieu de passer les deux prochains mois à essayer de tout lire, créez votre site web avec les principes d’accessibilité mentionnés ci-dessous. Demandez ensuite à un développeur de passer votre code en revue pour faire en sorte qu’il soit entièrement conforme aux directives en vigueur.

Alternatives textuelles (alt tags)

Les “tags” sont de courtes descriptions des images qui sont enterrées dans le code html du site. La plupart des utilisateurs ne verront jamais ces descriptions, mais ceux qui utilisent un lecteur d’écran comptent sur ces petits tags pour savoir ce que vos images montrent. Un tag efficace est court et précis, et il décrit l’image à laquelle il est rattaché avec justesse.

realistic illustration of fish and bread loaves in a basket
Nous allons utiliser cette image pour décrire ce qui est et n’est pas un bon tag. Illustration réalisée par BATHI.

Regardez l’image à gauche ci-contre. Un bon tag pour cette image serait quelque chose comme : illustration réaliste de poissons et de miches de pain dans un panier.

Et voici un autre tag beaucoup moins bien : pain et poisson.

Vous voyez la différence?

Les tags ne servent pas uniquement à ceux qui utilisent un lecteur d’écran, ils vous aident également à améliorer votre référencement, ce qui signifie augmenter votre trafic, ce qui signifie à son tour accroître votre taux de conversion.

Rendez votre navigation prévisible

collection of icons for a mobile app
Les icônes que vous utilisez et la manière dont vous les utilisez sont toutes les deux importantes. Designs d’icônes réalisés par @alexanderk.

Le système de navigation dont se sert votre site web doit être identique sur toutes les pages. Cela comprend les icônes que vous utilisez et la manière dont les visiteurs voient les différentes pages à l’intérieur du site. Par exemple, si votre page d’accueil a un menu déroulant en haut de page, chacune des autres pages de votre site doit également avoir la même configuration.

De la même manière, les icônes que vous utilisez sur votre site doivent toutes être partout pareil. Ne faites pas l’erreur de mettre un combiné de téléphone sur la page contact, puis l’icône d’un smartphone dans la page à propos. Ça porte à confusion, et ce peut être très difficile à gérer pour les programmes d’accessibilité. Évitez aussi les gadgets de navigation et de lecture audio/vidéo automatique.

Pourquoi ? Non seulement parce qu’ils sont extrêmement contraignants, mais aussi parce qu’il n’est pas facile pour ceux qui utilisent un lecteur d’écran, de comprendre où cliquer pour les arrêter. Et lorsqu’un diaporama ou un manège défile à toute allure, les utilisateurs se sentent confus, voire frustrés.

Éviter les éléments qui peuvent provoquer des réactions physiques

Cartoon bumblebee wearing safety gear with the text “Simon Says: The Safety is Always First”
Assurez-vous que votre site est sécurisé pour tous les visiteurs, quels qu’ils soient. Design réalisé par Jose Requena

Vous vous souvenez de l’épisode de Pokémon qui avait provoqué une crise épileptique chez près de 700 enfants ? C’est la raison pour laquelle vos consoles de jeux vidéos sont désormais accompagnées de mise en garde. Certaines personnes sont plus sensibles à ce type de crise lorsqu’elles sont exposées à des lumières scintillantes ou des motifs en mouvements.Évitez de mettre ce genre d’animation sur votre site pour qu’il soit sûr pour tous les utilisateurs.

Mettez votre texte en gros et en gras

text serifs vs. sans serifs
Les polices sans empattements sont plus faciles à lire que les autres. Via Design Hack

Mettez votre texte en grosses lettres pour que même les personnes ayant des problèmes de vue puissent facilement le lire. En gros, faites comme si vous imprimiez un gros livre : 16px est généralement une bonne taille pour le texte, et il faut encore plus gros pour les titres.

Mettre le texte en gros est un bon début, mais pensez également à utiliser une police qui soit bien lisible, notamment pour ceux atteints de dyslexie. Le Département de la Santé et des services sociaux aux États-Unis recommande d’utiliser Times New Roman, Arial, Helvetica, Tahoma, Calibri ou Verdana. Optez pour l’une de ces options, ou trouvez-en une autre qui fonctionnera aussi bien pour tous les publics que pour votre marque. Les polices les plus lisibles sont :

  • Les polices sans empattements
  • Les polices qui ont une largeur fixe entre les lettres
  • Les polices avec des lettres grasses
coffee cup with a palm tree coming out of it with the text “Belt Road. Grown Here. Not Flown Here”
Choisir une palette de couleurs fortement contrastantes est une manière simple de faciliter la tâche à de nombreux utilisateurs. Design réalisé par Frisheid

Votre texte doit également être organisé de manière logique et lisible. Découpez votre contenu en petits paragraphes, avec titres et sous-titres. Cela donnera non seulement l’impression que votre texte est plus soigné, mais cela aidera également les utilisateurs à mieux déchiffrer les mots.

Enfin, votre texte doit créer un fort contraste avec la couleur de fond. Si la couleur de votre texte et la couleur du fond sont trop proches l’une de l’autre, les utilisateurs auront du mal à lire votre site, surtout les daltoniens. Vous pouvez vous aider d’un outil en ligne comme Contrast Checker pour tester vos polices et vos couleurs.

Faites fonctionner le site uniquement avec un clavier (et même sans)

man using a head-movement direct access system to play a game on a laptop
Et pour ceux qui ne peuvent pas utiliser un clavier, il existe d’autres manières de surfer le net. Via Instructables.

Certains utilisateurs n’arrivent pas à manipuler une souris ou à garder leurs mains suffisamment stables pour utiliser un trackpad. Ces utilisateurs-là comptent sur leur clavier pour naviguer le web. Facilitez-leur donc la tâche en concevant votre site web avec cela à l’esprit.

Il existe aussi des utilisateurs qui ne peuvent pas utiliser de clavier non plus, et ont alors recours à des programmes de reconnaissance vocale ou à une souris contrôlée avec la tête. Votre site web doit être compatible avec ces programmes-là, parce que sans eux, ceux qui ne peuvent pas compter sur leurs mains n’auront pas accès à votre contenu.

Testez votre code

Ne lancez pas votre site web officiellement avant que votre code n’ait été revu par un développeur compétent et familier avec les dernières exigences en matière d’accessibilité. Alternativement, vous pouvez utiliser un outil comme WAVE de Google Chrome pour repérer les endroits de votre code où certaines mesures d’accessibilité ont été omises. Cela dit, il est toujours bon de demander à un développeur en chair et en os de vérifier votre code.

Faites en sorte que tout le monde puisse utiliser votre site web

line drawing of a large group of different-colored people in silhouette
Si votre site web est accessible, tout le monde pourra l’utiliser de la même manière. Via Arts People.

N’oubliez pas que c’est vous choisissez de supprimer par le design de votre site web toutes les barrières qui séparent certains utilisateurs des autres. Certes, vous voulez aussi respecter la loi et éviter d’être poursuivi pour discrimination, mais n’oubliez cependant pas que la raison principale de ce choix est avant tout de permettre à tout le monde d’accéder à vos produits et services.

Vous voulez en savoir plus sur le design de site web ?
Jetez un œil à notre guide ultime pour créer un site web !