Trouvez des réponses à vos questions

Documentation

10 façons de rendre votre site web accessible

  • 2

Chaque propriétaire de site Web veut attirer autant de visiteurs que possible. Cependant, peu prennent les mesures nécessaires pour s'assurer que leur site peut être utilisé par tout le monde. Il y a des millions d'utilisateurs qui comptent sur les sites accessibles, et si vous ne prenez pas le temps de comprendre leurs besoins, tout le monde va manquer.

Heureusement, l'accessibilité n'est pas difficile à mettre en œuvre. Vous avez juste besoin de comprendre les problèmes sous-jacents qui peuvent rendre un site difficile à utiliser par certaines personnes. Une fois que vous le faites, vous pouvez prendre des mesures pour éviter ces erreurs et rendre votre site accueillant pour tous vos visiteurs.

 

Une Brève Introduction à l'Accessibilité du Web

Idéalement, tout le monde devrait pouvoir utiliser n'importe quel site Web sur Internet. Cela n'a pas d'importance s'ils ont une condition qui affecte leurs capacités ou le matériel et les logiciels dont ils ont besoin. C'est le principe fondamental derrière le concept de l'accessibilité du Web.

Le fait est que des millions d'utilisateurs d'Internet ont des besoins spéciaux et des déficiences qui peuvent rendre difficile, voire impossible, l'utilisation de certains types de sites Web. En concevant votre site en tenant compte de ces défis, vous pouvez vous assurer qu'il accueille le plus d'utilisateurs possible.

Bien qu'il y ait beaucoup de handicaps et de conditions qui peuvent affecter la façon dont les gens utilisent les sites Web, jetons un coup d'œil à certaines des catégories de déficiences les plus courantes:

  • Vision: Cela comprend une incapacité partielle ou totale de voir ou de percevoir les contrastes de couleurs.
  • Audition: Certains utilisateurs ont une capacité réduite à entendre.
  • Compétences motrices: Il s'agit de personnes qui ont des difficultés à déplacer des parties de leur corps, notamment en effectuant des mouvements précis (par exemple en utilisant une souris).
  • Crises photosensibles: Des conditions telles que l'épilepsie peuvent provoquer des crises qui sont souvent déclenchées par des lumières clignotantes.
  • Déficiences cognitives: Il existe également de nombreuses affections qui affectent les capacités cognitives, telles que la démence et la dyslexie.

Pour contourner ces problèmes, de nombreuses personnes utilisent des technologies d'assistance pour naviguer sur Internet. Cela inclut des lecteurs d'écran qui vocalisent le texte sur chaque page, un logiciel de reconnaissance vocale qui convertit la parole en texte, des terminaux braille et même des claviers alternatifs adaptés aux besoins particuliers.

En tant que tel, il est possible pour presque tout le monde de naviguer sur le Web. De plus, vous pouvez améliorer considérablement leurs expériences en concevant votre site en tenant compte de l'accessibilité.

 

Pourquoi Rendre votre site Web Accessible Devrait être une Priorité

Comme vous pouvez l'imaginer, les avantages pour l'utilisateur de rendre votre site accessible sont énormes. C'est une chose importante à faire simplement d'un point de vue humaniste, car cela vous assure de ne pas exclure les utilisateurs handicapés.

Bien sûr, l'amélioration de l'accessibilité sur votre site vous apporte également de nombreux avantages. Fondamentalement, il élargit immédiatement votre public potentiel. Les mathématiques devraient être évidentes ici. Si plus d'utilisateurs sont en mesure d'utiliser votre site, vous avez augmenté votre base d'utilisateurs potentiels de façon exponentielle. Cela pourrait vous donner une longueur d'avance sur les concurrents qui n'auraient pas fait les mêmes démarches en matière d'accessibilité.

En pensant en termes d'accessibilité, vous pouvez également bénéficier à tous vos visiteurs, pas seulement ceux qui correspondent aux catégories que nous avons énumérées plus tôt. La plupart des considérations à prendre en compte pour rendre votre site plus accessible amélioreront également sa conception globale et sa convivialité. De plus, vous rendrez votre site plus flexible et plus sûr pour l'avenir.

Enfin, il est important de noter que de nombreux pays ont des lois concernant l'accessibilité du Web et des logiciels. En tant que tel, vous pouvez être légalement tenu de correspondre à des normes d'accessibilité spécifiques.

Heureusement, vous n'êtes pas seul. Le projet Initiative pour l'accessibilité du Web fonctionne depuis 1997 pour aider à améliorer l'accessibilité en ligne. De même, WordPress a sa propre équipe Make WordPress Accessible qui se concentre spécifiquement sur la plate-forme. Il existe également d'innombrables autres projets communautaires, tels que A11Y, qui fournissent des conseils et des ressources pour vous aider à créer des sites Web hautement accessibles.

 

10 Façons de Rendre Votre Site Web Accessible

Maintenant, nous allons examiner quelques moyens pour rendre votre site Web plus accessible immédiatement.

Tout d'abord, nous devons mentionner que l'une des choses les plus importantes que vous devez faire est de choisir le bon système de gestion de contenu (CMS) pour exécuter votre site.

Pour ce qui est de l'accessibilité, WordPress est l'un des CMS les plus connus et les mieux implémentés. Par conséquent, nous allons référencer un certain nombre de solutions spécifiques à la plateforme WordPress tout au long de ce guide (bien que vous puissiez trouver des outils d'accessibilité pour presque tous les CMS).

1. Assurez-vous que Votre Site est Compatible avec les Claviers

Cette étape est également la plus importante. Dit simplement: pour qu'un site web soit accessible, il doit fonctionner sans souris. En effet, de nombreuses technologies d'assistance reposent sur une navigation au clavier uniquement. En tant que tel, il doit être possible d'utiliser toutes les principales fonctionnalités de votre site via un clavier et rien d'autre. Cela inclut l'accès à toutes les pages, liens, contenus, etc.

La manière la plus courante de naviguer à l'aide d'un clavier est avec la touche de tabulation. Cela va sauter entre les zones sur une page qui peut avoir « focus clavier », qui comprend des liens, des boutons et des formulaires. Par conséquent, votre objectif devrait être d'assurer que tout le contenu et la navigation peuvent être accessibles en utilisant Tab.

C'est facile à tester - utilisez simplement votre propre site sans souris. Si vous trouvez que vous ne pouvez pas accéder à certains éléments ou que la navigation est difficile, vous pouvez identifier ces problèmes et les résoudre. Pour vous aider avec cela, WebAIM fournit un guide pratique pour la conception d'accessibilité au clavier.

2. Assurez-vous que Tout le Contenu est Facilement Accessible

En plus de rendre votre site convivial pour le clavier, vous devez également vous assurer que tout le contenu de la page est réellement accessible. Bien que ce ne soit généralement pas un problème, cela peut poser un problème lorsqu'une page contient du contenu dynamique.

En résumé, le contenu est dynamique s'il peut changer sans que la page soit rechargée. Cela peut devenir un problème si le site n'informe pas les outils d'assistance du changement. Par exemple, de nombreux lecteurs d'écran ne lisent que le site tel qu'il apparaît lors du premier chargement. En tant que tel, vous devez le faire savoir lorsque quelque chose se déplace ou que l'utilisateur va manquer le nouveau contenu.

Une façon de le faire est d'utiliser les points de repère ARIA. Ce sont des tags que vous ajoutez au contenu afin de le définir clairement sur la page. Vous pouvez marquer le contenu dynamique comme une «région active», ce qui permet aux lecteurs d'écran et aux périphériques similaires de comprendre le contenu en cours de modification.

ARIA est également utile pour simplifier la navigation car il permet aux utilisateurs de passer directement à un contenu spécifique.De cette façon, ils n'auront pas à passer en revue tous les éléments de menu juste pour accéder à votre contenu principal et pourront facilement passer au-dessus d'autres sections très encombrantes. Le même effet peut être obtenu en utilisant les liens skip-to-main, qui sont des liens invisibles qui permettent aux utilisateurs d'ignorer les menus. Cependant, ARIA tend à être plus flexible et efficace.

Le manuel Make WordPress Accessible contient une section sur les points de repère ARIA que vous voudrez peut-être consulter. Il est également intéressant de noter que tous les thèmes WordPress avec la balise ready- made auront des points de repère ARIA ajoutés par défaut.

3. Ajouter du Texte Alt à Toutes les Images

Lorsque vous ajoutez des images à WordPress, vous avez probablement remarqué ce champ:

Exemple de champ de texte alt

Ici, vous pouvez entrer le texte alternatif pour une image. Ce texte remplace l'image si elle ne se charge pas.

photo d'exemple avec alt texte "photo d'une plante verte"

Cependant, le texte alt (parfois appelé attributs alt, descriptions alt ou alt tags) est également consulté par les lecteurs d'écran pour «lire» l'image. Vous pouvez donc utiliser ce champ pour décrire une image, en donnant un contexte aux utilisateurs qui le manqueraient autrement.

Comme si cela ne suffisait pas, le texte alt peut également vous aider à améliorer le référencement de votre site. Assurez-vous simplement d'écrire des résumés descriptifs de chaque image, et essayez d'inclure vos mots-clés chaque fois que cela a du sens.

4. Choisissez vos Couleurs Soigneusement

Nous parlons souvent de daltonisme comme s'il s'agissait d'un problème en noir et blanc. Cependant, il s'agit plus d'un spectre, car différentes personnes perçoivent les couleurs de façon unique. En tant que tel, vous devez vous assurer que les couleurs que vous sélectionnez sur votre site contrastent bien pour s'assurer que tout le monde peut faire la distinction entre les différents éléments de la page.

La question la plus urgente est de s'assurer que le texte se démarque de l'arrière-plan. Idéalement, vous devriez définir une couleur foncée contre une lumière, en s'assurant qu'ils ne saignent pas l'un dans l'autre.

Disons que vous voulez utiliser un schéma de couleur bleu. Vous voudriez éviter de créer une palette où les nuances sont trop similaires dans la teinte et la saturation, comme ceci:

exemple de schéma de couleur bleu similaire dans la teinte et la saturation

C'est très difficile à lire. Au lieu de cela, un contraste plus clair fonctionne beaucoup mieux.

jeu de couleurs bleu avec un contraste plus net

Vous voudrez également éviter les couleurs qui s'entrechoquent gravement qui pourraient causer une fatigue oculaire.

Il existe de nombreux outils en ligne que vous pouvez utiliser pour trouver et tester des combinaisons de couleurs. WebAIM en a un, et nous aimons aussi Contrast Checker car il vous donne un score en temps réel. Ce dernier outil vous permet également de passer en monochrome pour avoir une idée approximative de l'efficacité d'une combinaison donnée.

5. Utilisez les En-Têtes pour Structurer Votre Contenu Correctement

Une autre tâche clé pour rendre votre site accessible est de structurer votre contenu en utilisant les en-têtes avec soin. Cela rendra votre contenu beaucoup plus facile à comprendre et à digérer et améliorera le flux.

De plus, les en-têtes transparents aident également les lecteurs d'écran à interpréter vos pages. Cela rend beaucoup plus facile de fournir une navigation sur la page. C'est aussi simple à faire car il vous suffit de vous assurer que vous utilisez les niveaux d'en-têtes corrects dans votre contenu.

Par exemple, vous ne devez utiliser qu'un H1 par page - généralement comme titre de la page. Cela peut être suivi de sous-rubriques commençant par H2, qui peuvent ensuite être imbriquées avec H3, suivi de H4. Ceux-ci devraient toujours être utilisés dans l'ordre de sorte que vous devriez éviter d'utiliser un H4 directement après un H2 (et ainsi de suite).

6. Concevez vos Formulaires pour l'Accessibilité

Les formulaires sont un complément utile à la plupart des sites, mais ils doivent être conçus avec soin. Le plus important est de s'assurer que chaque champ est clairement étiqueté. Vous devriez également viser à placer les étiquettes adjacentes aux champs respectifs. Bien qu'un utilisateur voyant puisse facilement faire correspondre une étiquette au champ ou à l'option correspondant, cela peut ne pas être évident pour quelqu'un qui utilise un lecteur d'écran.

Vous devriez également viser à fournir des instructions et des informations d'une manière claire que l'utilisateur peut facilement comprendre. Pour créer des formulaires accessibles dans WordPress, vous pouvez utiliser un outil comme le générateur Caldera Forms. Ceci est un plugin spécifiquement axé sur l'accessibilité, ce qui rendra votre travail beaucoup plus facile.

7. N'utilisez pas de Tables pour Autre Chose que des Données Tabulaires

Quand il s'agit d'afficher des données, les tableaux sont pratiques. Ils facilitent la tâche de tous les utilisateurs, y compris ceux qui utilisent la technologie d'assistance, pour analyser une grande quantité de données. Cependant, pour tirer le meilleur parti possible, vous devez garder vos tables aussi simples que possible.

En outre, il est préférable d'éviter d'utiliser des tables pour autre chose que des données tabulaires. Par exemple, vous ne devez jamais utiliser une table pour les mises en page, les listes ou tout autre élément. Cela peut être déroutant pour les lecteurs d'écran et les appareils similaires.

8. Activer le Texte Redimensionnable qui ne Casse pas Votre Site

La plupart des appareils et des navigateurs permettent aux utilisateurs de redimensionner du texte, ce qui peut être utile pour les personnes ayant une déficience visuelle. Toutefois, si vous ne construisez pas votre site pour prendre en charge cette fonctionnalité, le redimensionnement du texte pourrait casser votre conception ou rendre difficile l'interaction avec votre site.

Une bonne pratique consiste à éviter les unités absolues, telles que la spécification de la taille du texte à l'aide de pixels. Au lieu de cela, utilisez des tailles relatives qui permettent au texte d'évoluer en fonction du contenu et de la taille de l'écran.

Vous ne devez également jamais désactiver l'évolutivité de l'utilisateur, car cela rendrait difficile la redimensionnement du texte pour les utilisateurs.

Pour vous assurer que votre site répond à ces critères, testez vos tailles de police en profondeur en augmentant le niveau de zoom dans votre propre navigateur.

9. Évitez les Médias Automatiques et la Navigation

La lecture automatique des fichiers multimédias a été un fléau pour les internautes depuis l'époque de MySpace. Aussi ennuyeux que cela puisse être d'avoir de la musique ou des vidéos quand une page se charge, c'est un problème encore plus important en termes d'accessibilité.

Par exemple, déterminer comment éteindre le média peut être difficile en utilisant un lecteur d'écran, alors que d'autres utilisateurs pourraient simplement être confus ou même effrayés par le bruit soudain. Vous devriez donc éviter d'inclure des éléments qui commencent sans que l'utilisateur ne les invite d'abord.

Il est également préférable d'éviter la navigation automatique, comme les carrousels et les curseurs. Cela peut être incroyablement frustrant si le spectateur a besoin de plus de temps pour absorber toutes les informations avant de passer à la diapositive ou à la section suivante.

10. Créer du Contenu avec l'Accessibilité à l'Esprit

Enfin, nous arrivons au cœur de votre site: son contenu. Bien que la conception de votre site pour l'accessibilité soit extrêmement importante, vous devez garder les mêmes considérations à l'esprit lorsque vous créez du contenu.

Cela signifie prêter attention à des choses relativement mineures, telles que toujours écrire des acronymes, à des points plus importants, comme s'assurer de donner à tous vos liens des noms uniques, descriptifs et un texte d'ancrage.

Si vous avez lu tout ce tutoriel, vous aurez déjà une idée claire des problèmes potentiels qui peuvent causer des problèmes à certains utilisateurs. Gardez à l'esprit que - tout comme votre site devrait être utilisable par n'importe qui - votre contenu devrait être accessible et lisible, peu importe qui le découvre.

Sites Web pour Tous

S'assurer que votre site est le plus accueillant possible devrait être une priorité absolue. Il n'y a aucune raison d'exclure qui que ce soit, d'autant plus qu'il est relativement facile d'éviter de le faire. Non seulement vos utilisateurs vous remercieront, mais vous constaterez également des avantages sous forme d'augmentation du trafic et de conversions.

En prenant le temps de comprendre les failles possibles dans votre conception et votre contenu, vous pouvez vous assurer que votre site est optimisé pour l'accessibilité aujourd'hui.

Si vous avez encore des questions sur la création d'un site accessible, n'hésitez pas à nous contacter en ouvrant une demande ou utilisez notre fonction de clavardage pour discuter avec l'un de nos opérateurs en direct.

Related Articles

Un guide complet des systèmes de gestion de contenu (CMS) Un système de gestion de contenu (CMS) permet la création, la modification et le stockage de contenu numérique, généralement en termes de création de sites Web. Le CMS le plus populaire (de loin) est WordPress. Cependant, de nombreuses autres solutions CMS sont disponibles,... URL conviviales pour le référencement L'optimisation des moteurs de recherche (SEO) est le processus qui affecte la visibilité en ligne d'un site Web ou d'une page Web dans les résultats impayés d'un moteur de recherche Web. En règle générale, plus le site Web est classé sur un moteur de... Comment ajouter une barre de cookies Presque tous les sites utilisent des cookies (des fichiers de données) pour stocker des informations dans les navigateurs Web. Certains sites Web en contiennent des centaines. En mai 2011, de nombreux pays européens ont adopté ce qu'on appelle une Loi de Cookie. La loi sur les cookies est... Différence entre Single, Multiple et SSL Wildcard Secure Sockets Layer (également connu sous le nom de SSL) est la norme industrielle connue utilisée par des millions de sites Web pour protéger les transactions en ligne avec leurs clients. SSL est utilisé pour créer un lien crypté entre un serveur Web et un navigateur. Ce... Ajout et modification des photos de votre site web Les premières impressions sont faites en aussi peu que sept secondes. Mais sur votre site web, c'est encore plus rapide. Comme, six secondes plus vite. Alors qu'est-ce qui fait une bonne première impression en un clin d'œil? Des images convaincantes et professionnelles. La...