Votre site Internet est-il accessible ?

De plus en plus d'entreprises se tournent vers le Web, ce qui est formidable, mais pas si une partie entière de la population ne peut pas utiliser le site Web. Les problèmes d'accessibilité sont courants sur de nombreux sites, causant de nombreux problèmes qui peuvent être résolus relativement facilement - cela ne signifie pas que vous avez besoin d'un tout nouveau site Web !

D'après le rapport 2011 de l'OMS sur le handicap, plus d'un milliard de personnes dans le monde souffrent d'une forme ou d'une autre de handicap. Cela correspond à environ 15 % de la population mondiale. Ce nombre ne fera qu'augmenter à mesure que les populations vieillissent et que les personnes âgées présentent un risque/proportion de handicap plus élevé.

En 2018, le gouvernement britannique a imposé aux sites Web du gouvernement central, des organisations gouvernementales locales, de certains organismes de bienfaisance et d'autres organisations non gouvernementales de respecter les directives WCAG2.1.

Puis en 2019, la loi européenne sur l'accessibilité a été formée. Déjà en 1990, l'American Disabilities Act couvrait des problèmes qui sont maintenant abordés dans les sites Web. Dans certaines situations, les entreprises sont maintenant poursuivies en justice et perdent, prenez l'affaire Domino's Pizza par exemple.

Les gens n'hésiteraient pas à s'assurer qu'un lieu est physiquement accessible, alors pourquoi est-ce différent de rendre votre site Web accessible ? Cela n'a jamais été aussi crucial qu'aujourd'hui, car de plus en plus d'entreprises se tournent principalement en ligne.

Objectif

Notre objectif est de créer des sites Web inclusifs car l'accessibilité est un droit humain.

Non seulement le site sera plus facile à utiliser pour tout le monde, mais nous apporterons potentiellement plus de prospects au client. Click away pound a déclaré : « Le fait de ne pas fournir de sites Web de consommateurs accessibles a coûté aux détaillants britanniques 11,75 milliards de livres sterling en 2016 ».

Questions

Le principal problème est de savoir comment nous pensons à l'inclusion ou même aux handicaps eux-mêmes. Je suis un grand fan d'Adrian Roselli et de sa façon d'aborder cela via la méthode d'accessibilité égoïste. Voici une vidéo d'Adrian d'une conférence récente, je vous conseille vivement de la regarder pour une perspective différente sur les handicaps et les problèmes courants auxquels les gens peuvent être confrontés.

Essentiellement, il relie les problèmes courants d'accessibilité des sites Web aux situations quotidiennes que tout le monde vit, pas seulement les personnes handicapées. Par exemple, les problèmes de contraste, il explique simplement qu'il s'agit également d'un problème si la personne utilise un ordinateur portable au soleil ou dans un endroit très éclairé. Nous pouvons donc voir qu'il est dans notre intérêt de nous assurer que notre site est également accessible à une population plus large.

Comme vous pouvez le voir dans sa vidéo et les statistiques, les personnes ayant des problèmes d'accessibilité sont beaucoup plus courantes que vous ne le pensez.

Problèmes d'accessibilité courants

Nous avons donc décidé que rendre nos sites inclusifs est un avantage pour tout le monde (j'espère !). La première chose qui vient à l'esprit des gens lorsqu'on aborde l'accessibilité est que nous devons intégrer des fonctionnalités ou des fonctionnalités supplémentaires qui vont être coûteuses et rapides à mettre en œuvre, ou que cela va restreindre les conceptions.

En réalité, ce n'est pas le cas et beaucoup d'entre eux peuvent être résolus très simplement avec un peu de réflexion, de planification et d'utilisation de la méthode d'accessibilité égoïste d'Adrian Roselli.

Couleurs et contraste

Environ 8% (1 sur 10) de TOUS les hommes dans le monde sont daltoniens, alors sélectionnons une palette de couleurs qui répond à ces exigences.
Si le site Web du client utilise des couleurs qui ne sont pas accessibles, demandez-lui s'il est heureux de perdre potentiellement 8% de ses prospects. Je suis sûr qu'ils pourraient repenser les couleurs si vous leur dites cela.

Lors de la sélection de ces couleurs, veillez également à utiliser un bon rapport de contraste entre elles, vous ne voulez pas que vos liens soient masqués s'ils sont sur un fond peu contrasté (ordinateur portable au soleil…). Il s'agit d'un travail de 5 minutes utilisant quelque chose comme l'outil de vérification de contraste en ligne ou si vous souhaitez être spécifique à vos liens, utilisez l'outil de vérification de lien.

Taille de la police et choix

Votre site Web contient-il des informations que vous souhaitez que les gens comprennent ? Je soupçonnerais que oui. Assurez-vous donc que l'un des ingrédients les plus importants de votre site est digeste pour les yeux avant qu'ils n'appuient sur ce bouton de retour.

Près d'une personne sur 10 qui consultera votre site aura un problème avec les yeux (sans compter le daltonisme). À 40 ans, seulement la moitié de la lumière parvient à la rétine comme c'était le cas à 20 ans. Pour les personnes de plus de 60 ans, ce chiffre descend à 20 %.

La taille de police par défaut du corps du navigateur est généralement de 16px ou 1rem, c'est aussi la taille de police 'minimum' conseillée, mais avouons-le, c'est tout simplement trop petit ! L'argument le plus courant ici est que « les gens peuvent simplement zoomer s'ils veulent que le texte soit plus grand ». Le problème avec ceci est que la plupart des personnes concernées par ce problème ne savent probablement pas comment zoomer, nous ne devons donc pas supposer que c'est une option pour eux.

Il n'y a pas de "meilleure" taille ou police, mais je recommanderais une taille de police de corps plus proche de 18px ou 1,125rem, avec une hauteur de ligne décemment espacée, une police éligible et le strict minimum de bibliothèques de polices incluses. Webaim a un bon article sur les polices et déclare: «Chaque fois que vous rencontrez une nouvelle police de caractères, une nouvelle police ou une nouvelle variation de police, votre esprit doit créer une carte ou un modèle des caractères et des motifs pour analyser plus rapidement les mots et traiter le sens. Cela nécessite des efforts cognitifs et du temps. Si la police est déjà familière, ce surcoût est réduit.

Gill Andrews a un article plus complet sur les erreurs de typographie qui vaut la peine d'être lu si vous traitez beaucoup de typographie.

Images

Pas trop de choses à mentionner ici, mais pour vous assurer d'avoir une balise alt sur votre image. La plupart des CMS ont désormais la possibilité d'ajouter une balise alt d'image lorsque vous la téléchargez. Assurez-vous de bien décrire l'image si elle est importante. Cet article hubspot a une bonne description de la bonne et de la mauvaise utilisation des balises alt.

Si une image n'est pas importante et qu'elle est purement décorative, comme un motif de fond, laissez les balises vides. Assurez-vous simplement qu'il est réellement vide dans le balisage comme ceci: alt="" ou il sera signalé comme manquant une balise alt.

Une chose importante à retenir est que vous ne devez pas utiliser d'images pour le texte important (comme les titres) car elles seront illisibles pour les lecteurs d'écran et Google. Faites également attention à placer du texte sur les images, car il peut devenir illisible en raison de l'arrière-plan.

Structure

Une chose qui est normalement négligée, même si vous avez suivi les bases ci-dessus, est la structure sémantique réelle de la page. Beaucoup de gens sont pris dans la taille d'une police ou d'un en-tête et les utilisent à des fins de style plutôt que de définir la hiérarchie des informations des pages.

Non seulement cela affectera la façon dont votre contenu est interprété par Google, mais les personnes utilisant des lecteurs d'écran utiliseront votre balisage structurel comme navigation. Yoast a un excellent article sur les titres que vous devriez passer un peu de temps à lire. Un conseil simple serait d'avoir un élément <h1> sur votre page, puis <h2> pour vos prochaines sections importantes. Si vous avez un enfant d'une sous-section, utilisez un <h3> et ainsi de suite :

<h1>Généralement le titre de votre page</h1>

<p>Du texte de paragraphe ici</p>

<h2>La prochaine section importante de votre page</h2>

<p>Du texte de paragraphe ici</p>

<h3>Quelque chose de moins important mais lié au h2 ci-dessus</h3>

<p>Du texte de paragraphe ici</p>

<h2>La prochaine section importante de votre page</h2>

Rassemblement

J'espère que vous pouvez voir qu'en suivant ces règles simples ci-dessus, vous rendrez votre site accessible et une expérience plus agréable pour tous ceux qui le visitent. Non seulement cela, mais vous améliorez également votre position auprès de Google, c'est donc un gagnant-gagnant pour tout le monde.

Si vous ne savez pas si votre site correspond à ces normes ou si vous souhaitez simplement de l'aide pour améliorer l'accessibilité de votre site, contactez-nous.