Votre site web résiste-t-il à ces tests d’accessibilité basiques ?

L'outil gratuit pour évaluer les performances de son site web
Charlene Jolly
Charlene Jolly

Mis à jour :

Publié :

En tant que marketeur inbound, vous devez garder à l'esprit que votre objectif principal est d'attirer du trafic et des leads ciblés vers votre site web.

Téléchargement  >> L'outil gratuit pour évaluer les performances de son site web

Quelle que soit votre approche (améliorer votre contenu à des fins de référencement, reformuler vos annonces Adwords pour obtenir plus de clics, ou tester différents types de messages sur les réseaux sociaux), toute augmentation marginale du trafic ou du nombre de leads a son importance.

C'est pourquoi vous devez absolument vous assurer que votre site web répond aux critères d'accessibilité abordés dans cet article. En optimisant l'accessibilité, vous garantissez non seulement que votre site web s'adresse à la plus large audience possible, mais aussi que chaque visiteur bénéficie d'une expérience utilisateur de qualité.

Si votre attention est focalisée sur vos résultats inbound marketing, évaluer l'accessibilité de votre site web peut vous sembler compliqué, voire superflu.

Comment réaliser un audit du SEO technique ?

Téléchargez ce guide gratuit et définissez une stratégie de SEO technique efficace pour optimiser les performances de votre site.

La règlementation locale en matière d'accessibilité peut être une source de complexité supplémentaire, chaque pays appliquant ses propres normes en la matière. Néanmoins, en vous concentrant sur quatre domaines clés (le contraste du texte, la structure des formulaires, les tags d'images et le balisage de la navigation), vous améliorerez l'accessibilité globale de votre site web, tout en adhérant aux meilleures pratiques de conception et d'inbound marketing.

Dans cet article, nous allons nous pencher sur chacun de ces domaines clés. Nous vous donnerons des astuces pour optimiser l'accessibilité de votre site web. Nous vous fournirons aussi un ensemble d'outils pratiques pour vous aider à concevoir un site web ambitieux en matière d'accessibilité.

Avant de commencer, attardons-nous un instant sur les dernières études, tendances et opportunités de l'année dans le secteur de l'inbound marketing. 

 

Règles d'accessibilité à suivre en marketing  

Passons maintenant aux quatre tests basiques d'accessibilité des sites web que chaque marketeur devrait connaître.

 

1 - Contraste

Vous passez beaucoup de temps et d'énergie à rédiger des textes de qualité, donc pourquoi empêcher certains visiteurs de les lire pour des raisons d'accessibilité ? Vérifier le contraste du texte peut suffire à garantir la lisibilité de vos contenus rédactionnels et à améliorer l'accessibilité globale de votre site Web, voire de vous aider à réduire votre taux de rebond.

Vous pouvez jouer sur le contraste pour attirer l'attention sur un call-to-action. De la même manière, le contraste entre le texte et l'arrière-plan peut favoriser la lisibilité d'un texte. En règle générale, le contraste doit être conforme aux critères suivants :

  • Petit texte (inférieur à 18 points, ou à 14 points pour du texte en gras) : contraste minimum de 4.5:1
  • Grand texte (minimum 18 points, ou 14 points pour du texte en gras) : contraste minimum de 3:1

Ces critères sont tirés d'un ensemble de directives intitulé Règles pour l'accessibilité des contenus Web 2.0 (WCAG 2.0), et sont similaires aux normes ISO et ANSI.

low-contrast.jpg
L'exemple ci-dessus est légèrement exagéré, mais il montre clairement comment un contraste trop faible peut affecter la lisibilité du contenu. En vous assurant que le contraste entre le texte et l'arrière-plan réponde à ces critères minimaux, vous améliorez l'expérience utilisateur offerte par votre site web, en particulier pour les visiteurs rencontrant des problèmes de vue.

Il existe de nombreux outils semi-automatiques de vérification du contraste, mais tous ne sont pas performants. Je vous conseille donc de procéder à une vérification manuelle à l'aide d'un outil comme Colour Contrast Analyzer.

Notez que votre analyse ne doit pas se limiter au texte principal d'une page. Pour garantir la meilleure expérience utilisateur possible, vérifiez également les appels à l'action, les menus, les info-bulles et les formulaires.

 

2 - Images

Comme le texte, les images de votre site web renferment une importante quantité d'information. Il est donc essentiel que vos contenus graphiques soient accessibles à tous.

Les visiteurs rencontrant des problèmes de vue recourent parfois à des technologies d'assistance comme les lecteurs d'écran, qui interprètent les contenus visuels à l'aide de descriptifs et d'indications audio. Une image insérée « telle quelle » ne sera pas prise en compte par ces technologies, et l'expérience utilisateur des visiteurs concernés en pâtira.

Comment éviter cet écueil ? Les tags de type ALT text associés aux images de votre site web permettent aux technologies d'assistance de décoder les images d'une page donnée. Ces tags garantissent ainsi que l'audience la plus large possible accède à l'intégralité de vos contenus.

                      pomme jaune arbrePomme verte posée sur une surface en bois, avec un arrière-plan sombre

Examinez les deux images ci-dessus. Bien que toutes deux représentent une pomme, elles ne sont pas exactement identiques. Si vous regardez le code associé à chaque image, vous remarquerez que celle de droite contient un descriptif au format ALT text. Cette simple mention fait toute la différence pour les utilisateurs de lecteur d'écran :

                       apple-2.2.jpgpommes et alt text

Veuillez garder deux autres éléments à l'esprit pour évaluer le contenu de vos images :

  • Évitez d'utiliser des images contenant du texte, par exemple l'image d'un mot. Même si les mentions ALT text peuvent améliorer l'accessibilité de ce type de contenu, mieux vaut insérer directement du texte.
  • Si une image donnée est strictement décorative, laissez l'attribut ALT text vide pour que le lecteur d'écran ignore l'image.

Pour identifier facilement les attributs ALT text manquants ou de mauvaise qualité sur votre site web, vous pouvez utiliser la barre d'outils Wave Toolbar.

Les tags ALT text bien rédigés n'améliorent pas seulement l'accessibilité de votre site web. Les moteurs de recherche s'appuient sur des outils automatisés appelés robots d'indexation pour indexer le contenu de votre site web. Ces outils décodent les images présentes sur votre site web pour s'assurer de prendre en compte l'intégralité du contenu à des fins de référencement.

 

3 - Formulaires

Les formulaires sont souvent intégrés à un site web à des fins marketing. Idéalement, les données collectées par ce biais doivent être exactes et exhaustives. On peut penser que garantir l'accessibilité des formulaires compliquerait le processus, mais ce n'est pas le cas.

En fait, les recommandations en matière d'accessibilité, quand elles sont appliquées, améliorent la qualité des données collectées, et peuvent encourager les visiteurs à compléter les formulaires.

Voici donc trois manières d'améliorer l'accessibilité des formulaires : 

 

Étiquettes

Chaque formulaire de votre site web devrait contenir un élément de type étiquette pour informer a priori les visiteurs utilisant des technologies d'assistance de l'objet du formulaire. Sans élément d'étiquette, la fonction du formulaire risque d'échapper à tout un pan de votre trafic. L'étiquette peut même contenir un exemple des données à indiquer dans le champ concerné.

 

Instructions

Les instructions relatives au formulaire peuvent être présentées sous différents formats, en plus de l'étiquette. Associer un tag à un texte d'exemple, ou insérer des instructions directement sur la page, sont deux méthodes fréquemment utilisées.

Les instructions peuvent porter sur les champs individuels du formulaire, ou sur un groupe d'éléments, selon le type d'informations demandé.

 

Correction des erreurs

Même si tous les types de formulaire ne s'y prêtent pas, la validation ou la correction des erreurs peut éviter aux visiteurs d'envoyer des données erronées ou incomplètes.

Par exemple, un champ d'adresse e-mail peut être validé par un ensemble de critères basiques (par exemple, l'adresse saisie par le visiteur contient-elle bien le caractère « @ » ?). Concernant les adresses e-mail, de nombreuses API gratuites peuvent appliquer automatiquement un vaste ensemble de règles de validation, pour vérifier par exemple les erreurs de frappe dans les noms des domaines e-mail les plus répandus.

De manière générale, si un champ obligatoire n'a pas été renseigné correctement, il faut attirer l'attention de l'utilisateur. Le surlignement et les alertes évitent que les visiteurs abandonnent un formulaire avant de le soumettre.

Là encore, la barre d'outils Wave Toolbar s'avère très utile pour analyser l'accessibilité des formulaires sur votre site web.

Souvenez-vous qu'il n'est pas nécessaire d'appliquer toutes ces méthodes à chaque formulaire : un excès de zèle en matière d'accessibilité pourrait compromettre l'utilisabilité globale du site. Une application abusive ou mal orientée de ces stratégies peut même engendrer des problèmes d'accessibilité, par exemple, si vous insérez des étiquettes de formulaires trop nombreuses ou redondantes.

Les fonctionnalités les plus importantes d'un site web dépendent souvent des données récoltées à l'aide de formulaires, et ces stratégies d'accessibilité basiques permettent à tous les visiteurs de renseigner ces derniers facilement.

 

4 - Navigation

Intégrer des indications de navigation et de position bien pensées à votre site web est une des stratégies d'accessibilité les plus efficaces. La bonne exécution de ces éléments peut également favoriser le référencement, l'utilisabilité globale et l'adhésion aux meilleures pratiques en matière d'accessibilité. Une navigation confuse peut nuire à un contenu de qualité.

Dans ce domaine aussi, nous vous proposons trois approches faciles à mettre en œuvre, pour un impact significatif en matière de navigation :

 

Différentes manières de naviguer

On ignore souvent que plusieurs parcours doivent permettre d'accéder à une page donnée. Partout où c'est possible, intégrez un outil de recherche afin de vous assurer que les pages de tous les niveaux de votre site web soient accessibles en un minimum d'actions utilisateur.

Pour encore plus de facilité, présentez l'architecture simplifiée de votre site web dans un plan du site. 


breadcrumbs.jpg
Le fil d'Ariane constitue un moyen supplémentaire d'accéder au contenu, tout en informant l'utilisateur de sa position au sein de la structure d'un site web.

 

Toujours connaître sa position

Éviter à un utilisateur de se perdre en parcourant votre site repose en grande partie sur la qualité de votre conception web. Comme nous l'avons dit, le fil d'Ariane est une solution courante, qui permet de répondre à de nombreuses exigences d'accessibilité au prix d'un effort minimal.

Vous pouvez également fournir des indications de navigation supplémentaires en mettant en surbrillance les éléments de menu existants (page et sous-section), en fonction de la position de l'utilisateur sur le site web.

Maintenant que vous avez investi du temps dans la conception d'un menu, d'une fonction de recherche et d'un fil d'Ariane efficaces, vous devez vous assurer que la cohérence de ces éléments est préservée d'une page à l'autre.

 

Une navigation cohérente

Mettez-vous dans la peau d'un utilisateur visitant votre site web pour la première fois à la recherche d'une information, en commençant par la page d'accueil. Vous commencez par passer brièvement en revue les menus disponibles pour déterminer où se trouve l'information recherchée. Si vous n'identifiez pas le menu correspondant, ou si vous avez besoin de plus d'informations, que faites-vous ?

Idéalement, vous aimeriez revenir aux étapes antérieures sans avoir à retourner sur la page d'accueil. Dans cette situation, et de manière générale en matière de conception accessible, la position et le comportement des éléments de navigation du site web doivent impérativement être prévisibles d'une page à l'autre.

En plus de rapprocher l'utilisateur du contenu de votre site web, les éléments de navigation comme le plan du site, le fil d'Ariane et la fonction recherche sont autant de points d'accès supplémentaires permettant aux moteurs de recherche de trouver et d'indexer les sous-pages de votre site.

En vous attardant sur ces questions d'accessibilité, souvent ignorées, vous pouvez facilement créer un site web totalement accessible. Vous améliorerez ainsi l'expérience utilisateur de l'ensemble des visiteurs de votre site web et obtiendrez plus de trafic, plus de leads, et surtout, plus de clients. En plus de ces critères, il est important d'évaluer la performance de votre site web afin de déceler d'autres axes d'amélioration.

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil website grader ; ou découvrez les modèles de site web gratuits de HubSpot.

website grader

Sujets : Performance web

Articles recommandés

Évaluez votre site web en quelques secondes, puis apprenez à l'améliorer.

TÉLÉCHARGER GRATUITEMENT

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO