Meilleure accessibilité des sites Web
Lors de la création d’un site web, de nombreux facteurs sont à prendre en compte. Par exemple, il est particulièrement important de veiller à ce que votre site soit convivial pour tout le monde, de manière égale. C’est là que les pratiques d’accessibilité des sites Web entrent en action.
Qu’est-ce que l’accessibilité des sites Web ?
Il s’agit d’une pratique qui consiste à garantir que les sites soient également accessibles aux personnes handicapées. Cela signifie qu’elles auront un accès similaire aux biens et services fournis par ces sites. L’accessibilité des sites Web fait partie intégrante de la conception et du développement professionnels de sites Web.
Dans ce guide, nous allons couvrir 15 des pratiques les plus courantes qui améliorent l’accessibilité des sites Web.
Pourquoi s’intéresser à l’accessibilité ?
Il existe de nombreuses raisons pour lesquelles les développeurs, les concepteurs et leurs employeurs/clients doivent veiller à ce que l’accessibilité fasse partie intégrante du processus de développement Web dès le début :
Dans de nombreux pays, tels que les États-Unis, l’Union européenne, le Royaume-Uni, Israël et le Japon, il est obligatoire de ne pas discriminer les personnes en raison de leur handicap. Aux États-Unis, 2 235 nouvelles actions en justice concernant les sites web ADA ont été déposées devant les tribunaux fédéraux en 2019. C’est une par heure.
Les sites accessibles ont tendance à être mieux codés, plus robustes et bien classés sur les moteurs de recherche.
Les sites inaccessibles sont mauvais pour les affaires. En 2019, une enquête britannique a révélé que plus de 4 millions de personnes ont abandonné un site Web de vente au détail en raison des obstacles à l’accessibilité qu’elles ont trouvés.
C’est une mauvaise affaire que de refuser volontairement des clients potentiels.
Les normes communes et les problèmes
Heureusement, le W3C (l’organisme qui élabore la plupart des normes sur lesquelles repose le web) dispose d’une norme sur la manière de rendre les sites web accessibles. Il s’agit des directives d’accessibilité au contenu Web (WCAG). Il existe trois niveaux de conformité (A, AA, AAA), « A » étant le niveau d’accessibilité le plus bas. Il est préférable de viser le niveau AA.
Malheureusement, les WCAG sont une lecture longue, aride et très technique. Voyons donc ce que vous pouvez faire relativement facilement pour en avoir le plus possible pour votre argent.
Dans l’enquête Click-Away Pound, il a été demandé aux personnes handicapées interrogées quels étaient les principaux problèmes qu’elles rencontraient pour effectuer des achats. Voici les principaux obstacles (les réponses multiples étaient autorisées) :
- Pages encombrées avec trop de contenu – 66 %.
- Les tests reCAPTCHA – 59 %.
- Mauvaise lisibilité (contraste, disposition du texte) 56 %.
- La distraction des images et des graphiques en mouvement – 53 %.
- Mauvaise information sur les liens – 59% (77% pour les utilisateurs de lecteurs d’écran)
- Le remplissage des formulaires 56%
Comment améliorer l’accessibilité des sites Web (meilleures pratiques)
Il s’agit d’une liste de contrôle des erreurs les plus courantes qui, selon les personnes handicapées, constituent leurs principaux blocages, assortie de suggestions pratiques pour résoudre les problèmes.
Tout d’abord, notez qu’aucune des 5 premières erreurs n’est un problème technique – il s’agit d’erreurs de conception ou de rédaction.
Trop de contenu
Il est bien connu que plus le nombre de choix augmente, plus l’effort nécessaire pour collecter des informations et prendre de bonnes décisions augmente. C’est la même chose avec trop de contenu – il devient vite écrasant.
Le récent livre Writing Is Designing suggère Les gens veulent être en mesure de parcourir de longs blocs de texte, indépendamment de la vue ou de l’audio, il est donc extrêmement important de structurer votre écriture longue avec des en-têtes, des paragraphes courts, et d’autres meilleures pratiques de conception de contenu.
Utilisez un langage clair et simple
Le guide « Our tone of voice » de Monzo Bank explique l’importance du langage clair :
En 2010, l’avocat américain Sean Flammer a mené une expérience. Il a demandé à 800 juges de tribunaux de circuit de se ranger du côté d’un argument traditionnel en « jargon juridique » ou d’un argument en « anglais simple ».
Les juges ont massivement préféré la version en anglais simple (66 % contre 34 %), et cette préférence s’est maintenue quels que soient leur âge et leur origine.
Notes de Flammer (PDF) de la version en anglais simple :
Elle est plus courte de presque une page, ce qui permet d’éliminer les phrases et les mots inutiles. Ses phrases comptent en moyenne 17,8 mots, contre 25,2 mots.
Donc, en gros, si vous voulez plaire à votre lecteur, écrivez en anglais simple.
ReCAPTCHA
ReCAPTCHA est un service gratuit de Google qui aide à protéger les sites Web contre le spam. Il doit être facile à résoudre pour les humains mais difficile à comprendre pour les bots et autres logiciels malveillants.
Cependant, l’ancienne version du ReCAPTCHA posait des problèmes à de nombreux utilisateurs.
Heureusement, le style des lettres bancales de reCAPTCHA est maintenant déprécié.
Il est beaucoup plus courant de voir une incarnation plus récente appelée « No CAPTCHA reCAPTCHA » (également connue sous le nom de « I’m not a robot » Checkbox) qui demande à l’utilisateur de cocher une case confirmant qu’il n’est pas un robot. S’il réussit, aucune autre interaction n’est requise. En revanche, s’il échoue, un autre défi s’affiche.
La forme la plus accessible de reCAPTCHA est reCAPTCHA v3, qui ne nécessite aucune interaction avec l’utilisateur, mais vous demande plus de travail pour traiter les visites qui échouent au test :
Il s’agit d’une API JavaScript pure qui renvoie un score, vous donnant la possibilité de prendre des mesures dans le contexte de votre site. Par exemple, vous pouvez exiger des facteurs d’authentification supplémentaires, envoyer un message à la modération ou limiter les robots qui peuvent gratter le contenu.
Mauvaise lisibilité
Voici quelques-unes des meilleures façons de rendre votre texte lisible :
Assurez un contraste adéquat. L’un des blocages d’accès les plus courants sur le web est le faible contraste entre le texte et l’arrière-plan. Les directives du W3C exigent un rapport de contraste d’au moins 4,5:1, à l’exception du texte à grande échelle et des images de texte à grande échelle qui doivent avoir un rapport de contraste d’au moins 3:1 (les logos et le texte « accessoire » sont exemptés). Il existe de nombreux utilitaires qui peuvent mesurer les rapports de contraste pour vous ; par exemple, le widget de contraste d’Ada Rose Cannon.
N’utilisez pas de titres tout en majuscules. Il est prouvé qu’ils sont plus difficiles à lire car les lettres capitales sont toutes de la même hauteur, ce qui nous empêche de reconnaître la forme des mots courants. En outre, certains lecteurs d’écran épellent les groupes de lettres majuscules comme s’il s’agissait d’abréviations (BBC, DOJ, etc.). Si vous devez avoir des titres tout en majuscules, écrivez-les dans une casse normale dans votre HTML et transformez-les avec CSS text-transform : uppercase.
Alignez le texte à gauche. (Pour les pages dans les langues de droite à gauche comme l’arabe ou l’hébreu, alignez le texte à droite). Ne le justifiez pas, car cela rend la lecture plus difficile pour les personnes atteintes de dyslexie. Le guide de style de la British Dyslexia Association suggère également d’utiliser des polices sans empattement, comme Arial et Comic Sans, car les lettres semblent moins serrées. On peut aussi utiliser Verdana, Tahoma, Century Gothic, Trebuchet, Calibri ou Open Sans.
Images et graphiques gênants
Le niveau le plus élémentaire des WCAG exige que « pour toute information en mouvement, clignotante ou défilante qui (1) démarre automatiquement, (2) dure plus de cinq secondes, et (3) est présentée en parallèle avec d’autres contenus, il existe un mécanisme permettant à l’utilisateur de la mettre en pause, de l’arrêter ou de la masquer, à moins que le mouvement, le clignotement ou le défilement ne fasse partie d’une activité où il est essentiel ».
Les distractions sont gênantes – surtout pour les personnes souffrant de TDAH ou d’autres troubles cognitifs. Mais le mouvement et le clignotement peuvent également provoquer des crises d’épilepsie. Les directives WCAG exigent donc que le contenu ne clignote pas plus de trois fois par période d’une seconde.
Remplissage des formulaires
Étant donné l’importance vitale des formulaires pour les sites de commerce électronique, il est étonnant de constater le nombre de formulaires inaccessibles. Souvent, cela est dû au fait que les anciens navigateurs ne permettaient pas de styliser les éléments de formulaire, de sorte que les développeurs les falsifiaient avec d’autres éléments HTML. Les navigateurs modernes permettent d’utiliser des cases à cocher et des boutons radio attrayants, des composants de sélection et des combobox personnalisés, des contrôles de complétion automatique accessibles, etc.
Le remplissage automatique est votre ami
En permettant aux navigateurs de remplir automatiquement les formulaires, les visiteurs n’ont pas à en faire autant, ce qui les incite à remplir le formulaire et à s’inscrire ou à acheter votre produit. Autofill sur les navigateurs : A Deep Dive est un excellent article d’eBay à ce sujet (et ils devraient le savoir).
De plus, la complétion automatique est actuellement la seule technique suffisante pour atteindre la conformité AA avec le critère de réussite 1.3.5 : Identifier l’objectif de la saisie.
Faire en sorte que les champs de formulaire ressemblent à des champs de formulaire
Par défaut, les navigateurs affichent les champs de saisie des formulaires sous forme de cases. Par tous les moyens, donnez-leur un style avec des marges, un rembourrage et des bordures, mais gardez-les comme des boîtes. De nombreux concepteurs ont suivi le modèle Material Design de Google d’avant 2017, qui consistait à utiliser une seule ligne pour la saisie de texte par l’utilisateur.
Cependant, Google a constaté que la ligne sous les anciens champs de texte n’était pas claire pour certains utilisateurs, souvent confondue avec un séparateur, et a modifié le design. Lors d’un test d’utilisabilité réalisé auprès de 600 participants, ils ont découvert que les champs de texte fermés ayant la forme d’une boîte donnaient de meilleurs résultats que ceux ayant la forme d’une ligne.
Si vous envisagez d’adopter l’ensemble de la bibliothèque d’interface utilisateur Material Design de Google, lisez la section « Stop using Material Design text fields ! » pour voir si elle répond à vos besoins.
