Voici un fait que vous ignorez peut-être : à tout moment, environ 20 % des Américains souffrent d’un handicap temporaire ou permanent qui peut les empêcher de profiter d’un site web de la même manière que le reste de la population. Ce handicap peut aller d’une baisse de la vue due au vieillissement ou à une fracture du bras à des situations plus graves, telles qu’une cécité définitive ou une pathologie grave nécessitant l’utilisation d’un fauteuil roulant à vie.
Il est essentiel de garder à l'esprit ces 20 % – que le handicap concerné soit temporaire ou permanent – lorsque vous intégrez l'accessibilité dans votre projet de conception. L'accessibilité est l'une des caractéristiques phares d'une conception intuitive centrée sur l'utilisateur et peut, au final, profiter tous les utilisateurs. Mais tout commence par les principes généraux de l’ergonomie.
Voici quelques questions que vous devriez vous poser lorsque vous concevez un site en tenant compte de l'accessibilité : l'architecture de l'information de votre site est-elle cohérente ? Les messages d'erreur que vous avez prévus aident-ils vos utilisateurs à corriger leurs erreurs ? Avez-vous veillé à la cohérence de votre conception ? Les réponses à ces questions vous aideront grandement à rendre votre site accessible.
Cela dit, il existe certains aspects spécifiques à l'accessibilité dont vous devriez tenir compte lors de la conception de votre site. Dans cet article, j'ai répertorié 5 principes de conception simples à garder à l'esprit, que vous pouvez intégrer à vos créations afin de rendre votre site web plus convivial et plus accessible.
#1 Définissez les niveaux de titres dans vos maquettes fonctionnelles et vos guides de style
Les titres font exactement ce que leur nom indique : ils marquent le début (ou l'en-tête) d'une section de contenu. Ce sont des balises attribuées à des segments de texte afin de déterminer à la fois le style et la signification de ce texte. Les titres jouent également un rôle plus important dans la définition de la hiérarchie du contenu d'une page. Si vous avez déjà utilisé un peu de HTML, vous avez sans doute déjà rencontré les balises de titre : H1, H2, H3, etc.
Tous les utilisateurs qui visitent un site web se basent sur le texte le plus grand pour comprendre l'objet de la page. Le texte le plus grand (par exemple, le titre de cet article) doit indiquer aux utilisateurs le sujet de la page et doit être balisé avec une balise H1. Les sections plus courtes peuvent également comporter des titres (ou sous-titres) : la section de l'article que vous êtes en train de lire s'intitule « Spécifier les niveaux de titres dans vos maquettes fonctionnelles et vos guides de style », et ce titre est balisé en H2.
Ainsi, si le fait de voir les titres de section en gros caractères aide un utilisateur à mieux comprendre le contenu, qu’en est-il si cet utilisateur est aveugle ? Les lecteurs d’écran exploitent également les balises d’en-tête : un utilisateur de lecteur d’écran peut ainsi se faire rapidement une idée générale de la page en parcourant chaque en-tête l’un après l’autre.
Il est important non seulement de définir des styles visuels cohérents pour les titres, mais aussi d'utiliser les balises de titre définies par le langage HTML afin que les utilisateurs malvoyants ou aveugles puissent eux aussi en bénéficier. Lors de la conception d'une page, vous pouvez aider vos développeurs à choisir le niveau de titre approprié en indiquant clairement, dans vos maquettes fonctionnelles, quels doivent être ces niveaux.
#2 Rédiger un texte alternatif pour les images
Une autre chose simple que vous pouvez ajouter à vos maquettes fonctionnelles est un texte alternatif (texte « alt ») pour toutes les images que vous utilisez. Le texte alternatif n’apparaît pas sur la page elle-même : son objectif principal est de décrire le contenu de l’image aux lecteurs d’écran. Certaines images n’ont pas besoin de texte alternatif : par exemple, s’il s’agit d’une image d’arrière-plan qui ne transmet aucune information supplémentaire à l’utilisateur, indiquez un texte alternatif vide (alt=""). Le fait d’inclure la balise alt sans texte permettra au lecteur d’écran d’ignorer complètement l’image, afin que l’utilisateur ne perde pas de temps à écouter la description d’une image qui n’apporte aucun contenu significatif.
Si, toutefois, votre image contient du texte, celui-ci doit être inclus dans une balise « alt », sans quoi les utilisateurs de lecteurs d'écran ne pourront pas en prendre connaissance. Ceci est particulièrement important pour les éléments de contrôle qui se présentent sous forme d'images, comme les boutons ou les éléments de menu. La balise « alt » doit inclure TOUT le texte important présent dans l'image, faute de quoi celle-ci ne sera pas considérée comme pleinement accessible.
Images complexes
Si vous avez une image complexe, comme un graphique à barres ou une infographie, le texte alternatif peut ne pas suffire. La balise de texte alternatif est destinée à être utilisée pour de courts extraits de texte, de la taille d’un tweet. Pour décrire un élément tel qu’un graphique à barres comportant de nombreux points de données, vous aurez peut-être besoin d’un support plus complet, comme une description longue (longdesc) ou une légende de figure (figcaption), afin de le décrire de manière exhaustive. L’Initiative pour l’accessibilité du Web du W3C propose un bon article sur la création de descriptions pour les images complexes.
#3 Conception des liens de saut
Par défaut, les lecteurs d’écran (et les claviers !) sont conçus pour parcourir le code d’une page web de haut en bas. Si vous utilisez une souris, vous êtes libre de cliquer sur tout ce qui vous fait envie. Mais les personnes aveugles ou en situation de handicap physique n'ont souvent pas ce luxe. Beaucoup d'entre elles ne disposent que de leur clavier. Cela signifie qu'elles doivent souvent parcourir à l'aide de la touche Tab une multitude d'éléments dans l'en-tête et le menu principal avant même d'atteindre un lien ou un bouton dans le contenu.
Prenons l’exemple de la page d’accueil de Best Buy. Comme le sous-menu « Produits » s’affiche automatiquement au chargement de la page, une personne utilisant un clavier et souhaitant accéder à la première partie du contenu – le bouton « Acheter des ordinateurs » – devrait parcourir 31 liens et boutons différents à l’aide de la touche Tab avant de pouvoir y parvenir. Heureusement, le site web de Best Buy propose un lien de saut, qui apparaît dès la première pression sur la touche Tab lors du chargement de la page. Si vous activez ce lien en appuyant sur Entrée ou Retour, vous accédez directement au bouton « Acheter des ordinateurs ».
La mise en place de liens de saut ne doit pas nécessairement être une corvée. Ces liens ne doivent pas forcément être visibles en permanence ; ils peuvent rester hors de l’écran jusqu’à ce qu’un utilisateur utilise la touche Tab pour commencer à parcourir la page. Vous pouvez concevoir des liens de saut dans un style qui s’harmonise avec le site web, et même y inclure des effets, comme des animations. WebAIM, l’une des principales ressources en matière d’accessibilité du web, utilise des animations pour attirer l’attention de l’utilisateur sur ses liens de saut. D'ailleurs, ils proposent également un article complet sur l'intégration de liens de saut sur les sites web.
Une dernière remarque concernant les liens de saut : lors de la conception, vous pourriez vous demander : « Mon site comporte-t-il de longues listes de liens en dehors du menu principal, ou d’autres informations importantes auxquelles il devrait être facile d’accéder ? » Par exemple, un utilisateur du clavier pourrait souhaiter passer directement une longue liste de filtres de produits afin d’accéder aux produits présentés sur la page. Un utilisateur peut également souhaiter passer directement au pied de page pour accéder facilement à des informations telles que les coordonnées. Si votre site comporte de nombreux liens et boutons à parcourir, vous pouvez améliorer l’expérience utilisateur en créant un menu de liens de saut contenant plusieurs liens.
#4 Choisissez judicieusement vos polices
En d’autres termes, n’utilisez pas de polices trop fantaisistes, trop fines ou trop épaisses. Cela devrait aller de soi, mais il est parfois tentant d’enrichir le style d’un site en modifiant également l’apparence des polices. Il est important de garder à l’esprit que bon nombre de vos utilisateurs souffrent d’un handicap visuel quelconque. Même un trouble aussi courant qu’une légère hypermétropie peut avoir un impact sur la capacité d’un utilisateur à lire le texte de votre site.
En effet, un texte clair et facile à lire profite tout le monde , qu’il s’agisse de personnes âgées, comme votre mère ou votre grand-mère, ou de personnes souffrant d’un handicap visuel léger à modéré. Un texte clair peut même être utile à l’utilisateur lambda ayant une vision parfaite. J’ai moi-même une vision presque parfaite, et il m’arrive parfois de devoir plisser les yeux pour lire le texte sur certaines pages web. Si j’ai moi-même des difficultés avec ces pages, imaginez à quel point elles seraient encore plus difficiles à lire pour une personne souffrant d’une perte partielle de la vision !
Par exemple, imaginons que j'aie choisi une police de caractères agréable, fine et élégante pour mon site :
Sympa, non ? Bon, je l'ai montré à ma grand-mère, qui souffre de cataracte. Voici ce qu'elle voit :
Si j'avais utilisé une police un peu plus épaisse et moins stylisée, comme Arial ou Open Sans, ma grand-mère aurait sans doute pu la lire plus facilement.
Envie de le tester par vous-même ? Un extension pour Google Chrome appelée NoCoffee peut vous aider à visualiser comment les personnes malvoyantes perçoivent les polices et les couleurs de votre site.
#5 Vérifiez le contraste des couleurs
De quelle couleur est le texte normal de votre site ? De quelle couleur sont les liens ? De quelle couleur sont vos boutons, et de quelle couleur sont les libellés de ces boutons ? Le contraste entre les couleurs que vous utilisez pour le texte et celles de l’arrière-plan peut considérablement influencer la lisibilité de celui-ci. Un bon contraste des couleurs est utile non seulement pour les personnes souffrant d’un handicap visuel modéré, mais aussi pour celles qui présentent une forme quelconque de daltonisme. Le daltonisme peut aller de l'incapacité à distinguer le rouge du vert à un daltonisme total, ce qui signifie concrètement que la personne voit tout en niveaux de gris.
À proprement parler, les Directives pour l’accessibilité des contenus Web (WCAG) exigent que le contraste entre la couleur du texte et celle de l'arrière-plan atteigne un certain seuil : le texte de taille normale (jusqu'à 14 pt) doit présenter un rapport d'au moins 4,5 pour 1 par rapport à la couleur de l'arrière-plan. Les polices de 18 pt et plus (généralement celles utilisées pour les titres) doivent présenter un rapport de contraste de 3 pour 1.
Pour vérifier rapidement le contraste des couleurs à la volée, il suffit de convertir de temps en temps vos créations en niveaux de gris. Cette opération s'effectue assez facilement dans Photoshop, Illustrator et Sketch. Si vous avez du mal à distinguer les détails de votre création lorsque vous zoomez à 100 % en niveaux de gris, il y a de fortes chances que certains de vos utilisateurs rencontrent eux aussi des difficultés.
Une méthode plus fiable pour vérifier le contraste consiste à utiliser un outil de vérification du contraste des couleurs, de préférence dès que vous commencez à choisir vos couleurs. Une excellente option est le Tanaguru Contrast-Finder : il suffit d’y saisir les codes hexadécimaux de la couleur de votre texte (premier plan) et de votre arrière-plan, et l’outil évaluera le rapport de contraste en fonction des exigences d’accessibilité. Si votre combinaison de couleurs ne répond pas aux spécifications, Tanaguru vous proposera plusieurs alternatives conformes. Cet outil peut s’avérer très utile pour définir une palette de couleurs accessible. Si vous visez un rapport de 4,5 ou plus, vous pouvez être raisonnablement assuré que vos choix de couleurs n’empêcheront personne d’utiliser votre site.
Un dernier mot sur la conception accessible
Il y a beaucoup à apprendre en matière d'accessibilité. Si vous débutez, ne vous sentez pas obligé d'apprendre tout d'un coup. Même un petit geste, comme choisir une police facile à lire, peut faire une grande différence pour de nombreuses personnes. Au fur et à mesure que vous en apprendrez davantage sur l'accessibilité, vous pourrez intégrer davantage de principes dans votre travail de conception.
Il est également important de garder à l’esprit que l’accessibilité ne se limite pas au concepteur : les autres personnes impliquées dans le processus de création d’un produit doivent elles aussi être tenues responsables. Une grande partie du travail visant à rendre un site web accessible consiste à baliser le code HTML et JavaScript de manière à ce que chaque page gère correctement les commandes au clavier et les lecteurs d’écran. À moins que le développement front-end ne fasse partie de vos attributions, il est difficile de comprendre les tenants et aboutissants des rôles ARIA incombera probablement aux développeurs travaillant sur le site.
Cela dit, comme la conception marque généralement le début du processus de développement, ce sont souvent les concepteurs qui peuvent avoir le plus d'influence sur l'accessibilité – et sur la facilité d'utilisation en général. Si vous avez à cœur de créer un produit que tout le monde puisse utiliser efficacement, vous devriez également vous intéresser de près à l'accessibilité.
Caitlin Geier est designer UX au sein de l'équipe produit d'Deque. En tant que designer UX, Caitlin s'est épanouie dans le domaine de la conception accessible dès son arrivée chez Deque. Elle s'attache à comprendre les utilisateurs pour lesquels elle conçoit ses produits et s'efforce sans cesse d'intégrer des éléments d'accessibilité dans son travail afin de garantir que tous les utilisateurs puissent bénéficier d'une conception inclusive.
