Découvrez des pratiques essentielles pour un site Web accessible

Liste de tags

Uniquement considérée par les organismes publics par le passé, l’accessibilité Web a dorénavant trouvé sa place auprès des entreprises privées. Elle garantit une expérience optimale pour tous, peu importe les limitations physiques ou autres. Cet article vous permettra de comprendre quelques bonnes pratiques à appliquer sur votre site Web afin de mieux répondre aux standards d’accessibilité.

Le visuel qui n’est pas toujours visible

Le visuel est la thématique qui revient le plus souvent quand on parle d’accessibilité. Il est important d’optimiser le visuel afin de garantir une expérience optimale pour tous les utilisateurs.

Respecter les contrastes de couleur

Pour savoir si vos contrastes respectent les standards d’accessibilité WCAG et SGQRI 008, utilisez un inspecteur de contrastes de couleur. Il suffit de comparer la couleur de votre police de texte à votre couleur d’arrière-plan pour connaître le rapport du contraste. Afin de satisfaire aux standards d’accessibilité, votre site Web doit au moins obtenir un résultat de AA. Cela équivaut à un contraste supérieur à 3:1 pour une police de 18 points et plus ou supérieur à 4.5:1 pour une police inférieure à 18 points.

Avoir un focus toujours visible

Le focus est un cadre qui indique visuellement l’endroit où vous vous situez lors d’une navigation à l’aide de votre clavier. Afin de satisfaire aux standards d’accessibilité, il est important de pouvoir naviguer facilement dans les pages à l’aide de la touche de tabulation. Assurez-vous que ce focus soit toujours visible et qu’il permet de naviguer d’un élément à l’autre dans un ordre séquentiel logique. Surtout, évitez d’utiliser tabindex, un attribut qui impose un parcours de navigation dans vos pages.

Disposer d’un zoom efficace

L’outil pour agrandir le texte est souvent une fonctionnalité qui cause des problèmes d’accessibilité sur des sites qui ne sont pas conçus pour s’adapter. La règle est bien simple, mais souvent mal appliquée. Vos textes doivent rester lisibles jusqu’à 200 % de la grosseur originale.

Les formulaires de contacts et leurs champs

Les formulaires restent un point essentiel sur n’importe quel site Web puisqu’ils permettent de concrétiser une action. Que ce soit dans le cadre d’une simple demande d’information ou d’un achat en ligne, assurez-vous que les formulaires et les champs respectent les standards d’accessibilité.

Formulaires et champs traditionnels

Logiquement, un champ de formulaire doit avoir ce qu’on appelle un label. Ce dernier définit la nature du champ en question comme Nom ou Prénom. Veillez donc à ce que chaque champ de votre formulaire soit associé à un label qui définit bien sa nature. Pour les autres champs, ceux de recherche par exemple, on doit également leur attribuer un title pour bien les identifier lorsqu’ils ne sont pas associés à un label.

Et les champs obligatoires dans tout ça?

Il est important que vous identifiez les champs qui doivent absolument comporter une valeur. Il est également essentiel que vous précisiez le format de cette valeur dans l’éventualité où elle serait imposée. Vous n’avez qu’à penser aux formats de date qui diffèrent parfois d’un pays à l’autre.

Traiter les erreurs à corriger

Malgré ces bons conseils, il est possible que vos utilisateurs commettent des erreurs en complétant les formulaires. Pour les aider à les corriger, prévoyez une liste où seuls les champs erronés seront indiqués. Ainsi, ils pourront plus facilement apporter les modifications et ainsi finaliser leur démarche rapidement.

Oui aux carrousels, mais pas n’importe comment!

De nos jours, les carrousels sont populaires. Malheureusement peu d’entre eux respectent les standards d’accessibilité. Voici comment inspecter et améliorer les carrousels présents sur votre site Web.

La pause n’est pas facultative

Un carrousel qui change constamment d’image rend la lecture du contenu difficile. Plusieurs solutions permettent d’améliorer l’expérience utilisateur. Par exemple, mettre sur pause lorsque l’on survole le carrousel avec la souris ou encore lorsque l’on détecte une navigation au clavier. Mieux encore, rendre disponible un bouton pause/marche cliquable et exécutable au clavier afin de pouvoir arrêter et redémarrer le carrousel quand l’utilisateur le souhaite.

Faciliter la navigation entre les diapositives

Insérer des boutons visant à faciliter la navigation c’est bien, inclure du texte hors écran visant à préciser l’utilité de ces boutons c’est encore mieux. Indiquez ainsi à l’utilisateur le numéro de la vue où il se situe ainsi que le nombre total de vues à l’aide de boutons d’état.

Accessible jusque dans le code

Le code de votre site Web est bien souvent l’élément le plus dur à évaluer. Toutefois, voici quelques éléments à tester pour voir s’il respecte les standards d’accessibilité.

Vérifier la structure sémantique de vos entêtes de sections

Une structure sémantique revient à programmer de façon à ce que l’information lue par un lecteur d’écran le soit dans le bon ordre pour la compréhension de l’utilisateur. Vous devrez notamment organiser vos titres, sous-titres… grâce aux h1, h2L’important est de garder une structure logique et équilibrée en se rappelant qu’il est conseillé de n’avoir qu’un seul h1 par page.

Utiliser les fenêtres modales correctement

De nos jours, les fenêtres modales ou Lightbox, sont très populaires mais souvent mal utilisés. Si vous souhaitez utiliser cette fonctionnalité, veillez à ce que le focus soit transféré à l’intérieur du Lightbox afin qu’il ne reste pas pris en arrière-plan dans la page qu’il recouvre. Il est aussi important de ramener le focus sur la page et de fermer le Lightbox lorsque l’utilisateur termine son utilisation.

Décrire les images

Bien connu des amateurs de SEO, l’attribut Alt de l’image ne sert pas seulement à améliorer son référencement organique. Il permet également de décrire le contenu visuel ou textuel d’une image informative. Dans le cas où l’image serait purement décorative, veillez à ce que l’attribut Alt soit présent mais demeure vide.

JavaScript et pièges au clavier

Le JavaScript nous permet de générer de multiples éléments afin d’améliorer l’expérience de navigation de nos utilisateurs. Toutefois, faites attention à ne pas bloquer vos utilisateurs en utilisant cette technologie! En effet, quand elle est mal programmée, elle empêche l’utilisateur d’aller plus loin ou de remonter dans l’exploration du contenu. Un test de navigation au clavier vous permettra de détecter ces pièges.

Faites attention aux événements de votre calendrier

Les calendriers sont trop peu souvent optimisés pour un utilisateur quelconque, alors imaginez pour un utilisateur en situation de handicap. Optimisez les vôtres en guidant vos utilisateurs uniquement vers les journées où il y a un événement à consulter. Veillez à mentionner les informations relatives à l’événement en question pour être complet dans votre démarche.

Il existe encore beaucoup d’éléments à optimiser pour avoir un résultat 100 % accessible. Également, nous vous invitons à découvrir Vibéo, le premier lecteur vidéo 100 % accessible.

Nous. Ailleurs.

Infolettre