Comment concevoir un site web accessible pour tous ?

Quand on conçoit un site web, on veut qu’il soit accessible au plus grand nombre d’internautes possibles. Si l’on veut pouvoir joindre tout le monde, il est important de prendre en compte les besoins spécifiques que peuvent avoir certains utilisateurs. C’est pourquoi il faut faire des efforts afin de s’assurer que l’ensemble du site web soit accessible pour tous les internautes.

On peut notamment penser au plus d’un milliard de personnes vivant avec un handicap. Ces individus ont parfois besoin de certains outils adaptés pour être capable d’interagir avec votre site web. Il est donc important lors de la conception de votre site, de vous assurez que son contenu est facile d’accès pour tous.

12 conseils pour créer un site web accessible à tous

Les lignes directrices suivante vous guideront à travers la création d’un site web accessible à tous. Elles vous aideront à vous assurer que votre site web répond à toutes les exigences et normes en matière d’accessibilité numérique.

1. Votre site web doit permettre la navigation au clavier pour être accessible aux handicapés moteurs

La navigation au clavier est une pierre angulaire de l’accessibilité d’un site web. Plusieurs personnes ayant une déficience motrice utilisent un clavier plutôt qu’une souris pour naviguer sur le Web.

Il faut donc vous assurer que votre site prend en charge la navigation au clavier pour qu’il soit accessible à ces utilisateurs, ainsi qu’aux gens dépandent des technologies d’assistance.

Pratiques exemplaires :

• L’ordre des onglets sur votre site Web doit être logique. Cela signifie que si les utilisateurs appuient sur la touche Tab, l’élément sélectionné doit changer (à travers les éléments interactifs) dans un ordre logique. Le plus courant est de suivre la mise en page visuelle de la page.
• Pour les utilisateurs naviguent à l’aide d’un clavier, utilisez des indicateurs visuels clairs montrant quel élément est actuellement sélectionné. Vous pouvez utiliser une bordure, un changement de couleur ou un autre changement de style très apparent.
• Ajoutez un lien identifié Accéder au contenu principal  (ou formulation similaire) au haut de chaque page du site web. Les utilisateurs naviguant au clavier pourront ainsi contourner les liens répétitifs pour accéder directement au contenu principal.
• Si votre site utilise des menus déroulants, assurez-vous qu’ils peuvent être utilisés avec le clavier. Il faut pouvoir développer et de réduire les menus, ainsi que sélectionner des éléments à l’intérieur.
• Les utilisateurs de clavier doivent pouvoir naviguer vers et depuis tous les éléments en utilisant uniquement leur clavier. Assurez-vous d’éviter un quelconque blocage.

2. Fournir des textes alternatifs pour vos images et vidéos

Il faut offrir des alternatives textuelles pour rendre le contenu non textuel de votre site web accessible aux personnes avec un handicap visuel ou auditif. Ces éléments alternatifs fournissent un équivalent textuel de l’information transmise par le biais d’images, de vidéos et de fichiers audio.

Vous pouvez ainsi garantir que tous les utilisateurs ont accès à la même information, y compris ceux qui utilisent des lecteurs d’écran ou d’autres technologies d’assistance.

Le texte de remplacement peut aussi aider au référencement de votre site web dans les moteurs de recherche. Vous pouvez donc l’utiliser pour incorporer des mots clés pertinents, liés à vos images.

Pratiques exemplaires :

• Chaque image sur votre site doit avoir un texte alternatif correspondant. Celui-ci doit décrire précisément le contenu ou la fonction de l’image. Cette description devrait transmettre le même message ou le même objectif que l’image aux utilisateurs qui la voient.
• Incluez des sous-titres pour les vidéos. Ils doivent décrire non seulement le contenu parlé, mais aussi tout autre son pertinent. Les transcriptions sont également importantes. Elles offrent une version textuelle du contenu audio, incluant les paroles et autres éléments sonores pertinents.
• Pour les vidéos, inclure des descriptions audio qui racontent l’information visuelle. Cela est particulièrement important pour le contenu lorsque les éléments visuels contiennent des informations importantes qui ne sont pas transmises uniquement par l’audio.
• Assurez-vous que tous les liens et boutons sont basés sur du texte ou ont des texte alternatifs. Leur fonction sera ainsi plus claire pour les utilisateurs de lecteur d’écran. Évitez d’utiliser des images comme seul moyen de communiquer des renseignements ou éléments importants.
• Accompagnez le contenu visuel complexe (ex: tableaux, graphiques, etc.) d’un résumé ou d’une description textuelle. L’objectif est d’expliquer les données ou les renseignements présentés.
• Les éléments interactifs (comme les formulaires) devraient avoir des étiquettes claires et descriptives. Celles-ci aident les utilisateurs à comprendre l’utilité de chaque champ et comment interagir avec lui.

3. Rendez votre contenu facile à voir et à entendre

Le contenu de votre site web doit être facile à voir et à entendre pour être accessible aux utilisateurs ayant une déficience visuelle et auditive. Cela comprend notamment les personnes aveugles, malvoyantes, daltoniennes, sourdes ou malentendantes.

Pratiques exemplaires :

• Utilisez des combinaisons de couleurs avec un contraste élevé entre le texte et les arrière-plans. Cela permet de vous assurer que le texte est facilement lisible. Évitez d’utiliser des couleurs qui s’entrechoquent ou se confondent trop. Utilisez aussi des tailles et des styles de police lisibles, pour que le texte soit facilement intelligible.
• Utilisez un outil en ligne comme Contrast Checker pour choisir une palette de couleurs avec un contraste offrant une bonne accessibilité visuelle.
• Permettez aux utilisateurs d’ajuster la taille du texte sans que cela détruise la mise en page de votre site.
• Les informations transmises avec la couleur doivent également être disponibles sans couleur (ex: via des étiquettes de texte). C’est particulièrement important pour les utilisateurs daltoniens.
• Pour les utilisateurs malvoyants, le contenu audio est clair, bien rythmé et suffisamment descriptif. Il doit absolument communiquer toutes les informations nécessaires.
• Utilisez les rôles et les repères établis par ARIA (Accessible Rich Internet Applications). Ceux-ci peuvent aider les utilisateurs de lecteur d’écran à comprendre la mise en page et à naviguer plus efficacement dans le contenu.

4. Organiser et structurer le contenu du site web d’une manière adaptable et facilement accessible

Organiser et structurer le contenu de manière adaptable permet de s’assurer que tous les utilisateurs reçoivent l’information d’une manière cohérente et logique. Et ce, quelle que soit la façon dont ils accèdent à votre site Web.

Cette approche profite aux utilisateurs utilisant des technologies d’assistance comme les lecteurs d’écran. Elle bénéficie aussi aux personnes ayant des troubles cognitifs, qui peuvent facilement trouver déroutantes des mises en page complexes ou des structures incohérentes. Soyons honnête, même les internautes n’ayant aucun handicap préfèrent généralement un contenu clair, structuré et facilement intelligible.

Pratiques exemplaires :

• Utilisez des éléments sémantiques HTML5 pour structurer clairement votre contenu. Ces éléments fournissent un contexte aux technologies d’assistance. Celles-ci peuvent alors transmettre la structure et la mise en page de votre contenu aux utilisateurs.
• Utilisez les titres (H1, H2, H3, etc.) pour structurer votre contenu de manière logique et hiérarchique. Les titres doivent être descriptifs et donner une indication claire du contenu qui suit.
• La mise en page de votre site Web doit être flexible. Elle doit donc pouvoir s’adapter à différentes tailles et orientations d’écran, sans perte d’informations ou de fonctionnalités. C’est particulièrement important pour les utilisateurs malvoyants qui peuvent avoir besoin de zoomer. C’est aussi utile pour les utilisateurs d’appareils mobiles.
• Si vous utilisez des tables de données, elles doivent être correctement marquées avec des en-têtes de ligne et de colonne. Évitez d’utiliser des tableaux à des fins de mise en page. Cela pourrait s’avérer déroutant pour les utilisateurs de lecteur d’écran.
• Utilisez des listes pour regrouper les éléments connexes. Ce regroupement aide les lecteurs d’écran à communiquer la structure et l’organisation du contenu.

5. Offrir d’autres façons de consommer des médias temporels

Les médias temporels ou supports temporels comprennent du contenu audio et vidéo. Les personnes souffrant d’un handicap auditif ou visuel auront besoin d’aide pour accéder à l’informations qu’ils contiennent.

Pratiques exemplaires :

• Fournir des sous-titres pour tout le contenu vidéo. Ceux-ci doivent refléter fidèlement le dialogue parlé et décrire les autres éléments audio pertinents. On peut penser à la musique d’ambiance ou aux effets sonores qui sont importants pour comprendre le contenu.
• Créez des transcriptions pour la totalité de votre contenu audio et vidéo.
• Incluez des descriptions audio dans les vidéos, racontant le contenu visuel. Celles-ci permettront aux utilisateurs avec un  handicap visuel de comprendre le contenu.
• Lecteurs multimédias utilisés sur votre site doivent être accessibles. Ils doivent notamment être navigables et utilisables avec un clavier. Leurs fonctions doivent également être clairement étiquetées et compréhensibles.
• Incluez des options pour contrôler la vitesse de lecture et mettre en pause les éléments audiovisuels. Une certaine flexibilité peut être très bénéfique pour les utilisateurs ayant des troubles cognitifs, des troubles d’apprentissage ou simplement besoin de plus de temps pour traiter l’information.

6. Concevoir soigneusement les formulaires

Les formulaires sont utilisés pour de nombreux usages, allant de la collecte d’informations de contact aux achats en ligne. Des formulaires bien conçus doivent permettre à tous les utilisateurs de les compléter. C’est à dire saisir leurs informations, faire des sélections et même comprendre les erreurs qui peuvent survenir au moment de soumettre.

Pratiques exemplaires pour rendre les formulaires de votre site web accessibles à tous:

• Chaque champ de formulaire doit avoir une étiquette claire et descriptive qui est liée par programme au champ. Cela aide les utilisateurs du lecteur d’écran à comprendre le type d’information attendu.
• Lorsque les utilisateurs font une erreur, par exemple en manquant un champ obligatoire ou en entrant des données non valides, l’erreur doit être clairement identifiée et décrite dans le texte. Cela aide les utilisateurs à comprendre ce qui doit être corrigé.
• Assurez-vous que l’ordre des tabulations du formulaire suit une séquence logique, permettant aux utilisateurs de naviguer dans les champs du formulaire en utilisant le clavier de manière prévisible.
• Lorsque les utilisateurs effectuent une tabulation dans le formulaire, le champ actuellement ciblé doit être clairement indiqué (ex: la couleur de bordure ou d’arrière-plan peut changé).
• Utilisez des catégories et des légendes pour regrouper des champs liés. C’est particulièrement utile pour les utilisateurs de lecteurs d’écran. Cela fournit un contexte et aide à comprendre comment différents champs sont interreliés.
• Si votre formulaire comprend des menus déroulants, des cases à cocher ou des contrôles personnalisés, ils doivent être entièrement accessibles. Ils doivent donc pouvoir être consultés et sélectionnés à l’aide d’un clavier.
• Si nécessaire, fournissez des instructions ou des exemples pour les champs, en particulier pour ceux qui nécessitent des données dans un format spécifique, comme des dates ou des numéros de téléphone.
• Si votre formulaire a une limite de temps pour le remplir, fournissez un moyen pour les utilisateurs de prolonger le temps si nécessaire, car certains utilisateurs peuvent avoir besoin de plus de temps pour lire et remplir le formulaire.
• Assurez-vous que le formulaire est utilisable sur différents appareils et tailles d’écran, en particulier pour les utilisateurs qui peuvent zoomer ou utiliser un appareil mobile.
  Les plugins tels que Formidable Forms sont livrés avec des outils d’accessibilité utiles intégrés.

7. Donnez aux visiteurs suffisamment de temps pour interagir avec votre site

Certains visiteurs du site peuvent lire lentement, avoir des troubles cognitifs ou d’apprentissage, ou utiliser des technologies d’assistance qui nécessitent plus de temps pour naviguer et interpréter le contenu. Assurez-vous de leur laisser suffisamment de temps pour lire, regarder et utiliser tout sur votre site.

Pratiques exemplaires :

• Si votre site Web a des fonctionnalités ou du contenu avec des limites de temps (comme des quiz chronométrés, des formulaires avec des délais de session ou des carrousels rotatifs), fournissez aux utilisateurs un moyen de les ajuster, de les étendre ou de les désactiver.
• Pour tout contenu en mouvement, clignotant ou défilant, et pour la mise à jour automatique des informations (comme les tickers de nouvelles), fournissez des contrôles qui permettent aux utilisateurs de les mettre en pause, de les arrêter ou de les masquer.
• Évitez de mettre à jour automatiquement le contenu sans que l’utilisateur ne s’en rende compte, car cela peut désorienter les utilisateurs du lecteur d’écran.
  Si un délai d’attente est nécessaire (par exemple pour des raisons de sécurité sur un site bancaire), avertissez les utilisateurs avant l’expiration du délai. Cela leur donne une chance de prolonger leur session sans perdre de données.

8. Évitez les clignements et clignotements

Éviter de clignoter ou de clignoter du contenu peut rendre votre site Web plus accessible aux utilisateurs qui sont susceptibles de crises causées par des lumières clignotantes ou des motifs, une maladie connue sous le nom d’épilepsie photosensible.

Le clignotement rapide du contenu peut aussi être distrayant, voire douloureux pour les utilisateurs. Cela contribue à une expérience désagréable, voire nuit à l’accessibilité.

Pratiques exemplaires :

• En règle générale, évitez le contenu qui clignote plus de trois fois par seconde. Cette ligne directrice, qui fait partie des lignes directrices sur l’accessibilité du contenu Web (WCAG), aide à réduire le risque de saisies.
• Si votre site Web doit inclure du contenu qui clignote ou clignote (pour des raisons artistiques ou d’information), fournissez un avertissement clair avant que le contenu ne soit affiché. Cela permet aux utilisateurs ayant une photosensibilité d’éviter ou de se préparer à une exposition à un tel contenu.
• Soyez attentif aux animations et aux transitions dans votre conception Web. Assurez-vous qu’elles sont subtiles et n’impliquent pas de clignotement ou de mouvements rapides. Fournissez des options pour réduire ou désactiver les animations si possible.
• Au lieu d’utiliser du contenu clignotant pour attirer l’attention, envisagez d’autres méthodes comme l’utilisation de couleurs vives, de motifs ou de graphiques statiques qui sont tout aussi efficaces mais ne posent pas de risque pour les utilisateurs.
• En cas de doute, consultez des experts en accessibilité Web qui peuvent examiner votre site pour trouver du contenu potentiellement problématique et suggérer des solutions de rechange plus sûres.

9. Une navigation claire est essentielle pour rendre votre site web accessible à tous

Une navigation claire est une pierre angulaire pour rendre un site web accessible. Il permet à tous les utilisateurs, y compris les personnes handicapées, de trouver facilement leur chemin sur votre site.

Une bonne navigation est particulièrement bénéfique pour les utilisateurs handicapés et ceux qui dépendent des technologies d’assistance. Des structures de navigation claires et prévisibles aident les utilisateurs à comprendre où ils se trouvent sur votre site, comment se rendre à leur destination souhaitée et comment revenir aux pages précédemment visitées.

Pratiques exemplaires :

• Gardez votre disposition de navigation cohérente sur l’ensemble du site. La cohérence aide les utilisateurs à apprendre et à se rappeler comment naviguer sur votre site, réduisant ainsi la confusion et la frustration.
• Regrouper les éléments de navigation connexes. Cela peut être réalisé grâce à des menus bien organisés, des titres de section clairs ou un plan du site qui donne un aperçu de la structure de votre site Web.
• Assurez-vous que tous les menus sont accessibles grâce à la navigation au clavier et aux lecteurs d’écran, y compris les menus déroulants et d’autres contenus dynamiques.
• Pour les sites Web avec plusieurs couches de contenu, utilisez des pistes de navigation. Ceux-ci fournissent aux utilisateurs un chemin clair de leur voyage de la page d’accueil à leur emplacement actuel et facilitent la navigation vers les sections précédentes.
• Implémentez une fonctionnalité de recherche robuste, en particulier pour les sites plus grands. Cela permet aux utilisateurs de trouver rapidement des informations sans avoir à parcourir plusieurs pages.

10. Le contenu du site web doit être clair et intellectuellement accessible au plus grand nombre

Rendre le contenu de votre site Web clair et facile à comprendre peut aider les visiteurs ayant un handicap, des difficultés d’apprentissage ou ceux qui ne sont pas des locuteurs natifs de la langue du site. Un contenu clair et direct garantit que l’information est accessible à un public plus large et aide tous les utilisateurs à saisir rapidement le message ou l’action souhaité.

Pratiques exemplaires :

• Écrivez du contenu en langage simple. Évitez les phrases complexes, le jargon et les termes techniques. Lorsque des termes techniques sont nécessaires, fournir des explications simples ou un glossaire.
• Utilisez des titres et des sous-titres pour structurer votre contenu de manière logique. Cela aide les utilisateurs, en particulier ceux qui utilisent des lecteurs d’écran, à comprendre la mise en page et à trouver plus facilement des informations.
• Veillez à ce que les paragraphes et les phrases soient courts et concis. Cette structure facilite la lecture et la compréhension du contenu.
• Utilisez des puces ou des listes numérotées pour décomposer l’information en éléments faciles à gérer et à digérer. Ceci est particulièrement utile pour les instructions ou les informations complexes.
• Maintenez une mise en page et une conception cohérentes sur l’ensemble de votre site. La cohérence des polices, des couleurs et des styles aide les utilisateurs à mieux comprendre et naviguer dans votre contenu.
• Le cas échéant, utilisez des images, des icônes ou des diagrammes pour appuyer le texte. Les aides visuelles peuvent aider à transmettre des informations complexes plus clairement et peuvent bénéficier aux utilisateurs qui traitent les informations visuelles plus efficacement que le texte.
• Rendre les boutons d’appel à l’action ou les liens clairs et descriptifs. Les utilisateurs devraient être en mesure de comprendre ce qui se passera lorsqu’ils cliqueront dessus.

11. Rédiger des messages d’erreur utiles

Des messages d’erreur efficaces guident les utilisateurs dans la résolution des problèmes qu’ils rencontrent. C’est particulièrement important pour les utilisateurs handicapés qui peuvent trouver plus difficile de comprendre et de corriger les erreurs.

Des messages d’erreur clairs et informatifs aident à prévenir la frustration, garantissant que tous les utilisateurs peuvent interagir avec succès avec votre site Web et accomplir les actions prévues.

Pratiques exemplaires :

• Les messages d’erreur doivent indiquer clairement quel est le problème. Évitez les termes vagues ou techniques qui pourraient embrouiller les utilisateurs. Par exemple, au lieu de dire « Invalid input », précisez ce qui ne va pas, comme « Email address format is incorrect ».
• Dans la mesure du possible, jumelez le message d’erreur à une solution suggérée ou aux prochaines étapes. Par exemple, si un champ obligatoire est vide, le message d’erreur doit inviter l’utilisateur à remplir ce champ.
• Mettez en surbrillance le champ ou la zone où l’erreur s’est produite, ce qui peut être fait en modifiant la couleur de la bordure, en ajoutant une icône ou en utilisant des styles de texte. Ceci est particulièrement utile pour les utilisateurs ayant une déficience visuelle.
• Utilisez un ton amical et non technique dans vos messages d’erreur. Cette approche réduit la frustration et l’anxiété, en particulier pour les utilisateurs qui ont déjà du mal à naviguer sur votre site.
• Positionnez les messages d’erreur près du point d’erreur, idéalement au-dessus ou à côté du champ de formulaire en question. Cela permet aux utilisateurs, y compris ceux qui utilisent des lecteurs d’écran, de localiser et de comprendre plus facilement l’erreur.
• Les messages d’erreur et les indicateurs du site web doivent être accessibles aux utilisateurs du lecteur d’écran. Utilisez les rôles et propriétés ARIA pour communiquer la présence et la nature des erreurs.
• Utilisez une méthode cohérente pour identifier et présenter les erreurs sur votre site Web. La cohérence aide les utilisateurs à comprendre et à prédire comment les erreurs peuvent être communiquées.
• En cas d’erreurs complexes ou répétées, fournissez une option d’assistance supplémentaire, telle que les coordonnées du support client.

12. Écrire des balises HTML pour votre site web accessible aux outils de lecture

Enfin, écrivez du HTML qui peut être analysé ou correctement traité par les navigateurs Web et les technologies d’assistance. Un code HTML bien structuré et valide permet aux lecteurs d’écran et autres outils d’assistance d’interpréter et de transmettre avec précision le contenu aux utilisateurs. Cette pratique est fondamentale pour créer un environnement web inclusif et navigable pour tous.

Pratiques exemplaires :

• Respectez les balises HTML standard et évitez les balises ou attributs propriétaires. Cela garantit que votre code HTML est universellement compris par tous les navigateurs et les technologies d’assistance.
• Structurez correctement votre document HTML. Utilisez un ordre logique pour les éléments HTML. Assurez-vous que les éléments comme les titres (<h1> à <h6>), les paragraphes, les listes et les autres éléments sont utilisés de manière appropriée.
• Utilisez des éléments sémantiques HTML5  pour définir la structure de votre page Web.
• Utilisez des validateurs HTML pour vérifier si votre code contient des erreurs ou des incohérences. Un code HTML valide est plus susceptible d’être interprété correctement par les navigateurs et les technologies d’assistance.
• Gardez le contenu, le style et le comportement séparés. Utilisez des CSS externes pour le style et des fichiers JavaScript externes pour les comportements, plutôt que des styles ou des scripts en ligne. Cette séparation permet de maintenir un HTML propre, lisible et accessible.
• Utilisez des balises de titre et des méta-descriptions significatives pour transmettre le but de la page.
• Déclarez la langue de la page en utilisant l’attribut lang dans la balise <html>. Cela aide les lecteurs d’écran à prononcer correctement le contenu.

Faites en sorte que votre site web soit accessible à tous

Les améliorations continues de l’accessibilité du Web sont une raison de célébrer. Après tout, si vous gérez un site Web, vous voulez atteindre autant de personnes que possible, y compris les personnes handicapées. Heureusement, la conception d’un site Web accessible est à votre portée.

Dans cet article, nous avons discuté de nombreuses stratégies que vous pouvez utiliser pour concevoir un site plus facile à naviguer et à utiliser pour tous vos visiteurs. Par exemple, vous pouvez vous assurer que votre site Web est compatible avec les technologies d’assistance.

Vous pouvez également utiliser des transcriptions de texte de remplacement et de vidéo pour tous vos médias visuels. Plus important encore, lorsque vous suivez notre guide, vous soutenez une expérience Web plus équitable, en veillant à ce que votre site soit accessible au plus grand nombre possible de personnes.

Nous espérons que la lecture de cet article vous a plu et vous a aider à rendre votre site web accessible à tous. Si c’est le cas, nous vous invitons à consulter nos autres articles et comparatifs de notre blog. Vous y trouverez les informations les plus récentes sur l’industrie l’hébergement et sur la création de sites web.