Peut-être avez vous volontairement laissé tomber cet aspect du design, en pensant que ce n’était pas une priorité pour vos utilisateurs, ou même en croyant que cela nécessiterait plusieurs heures de recherche et de révision. Contrairement à ce que vous pensez, concevoir un site web accessible est assez facile. Voici une série de changements que vous pouvez faire dès aujourd’hui pour rendre votre site WebSelf un peu plus accessible.
Taille du texte
Premièrement, l’ajustement du texte est probablement le changement le plus rapide à faire. Cela ne requiert que d’aller modifier le style du texte de votre site à un minimum de 16 pixels. C’est une taille qui a été définie universellement comme le minimum pour être visuellement claire. Idéalement, tout le texte de votre site web devrait être 16 pixels ou plus gros. Si vous pouvez vous permettre d’augmenter la taille de vos textes à 18 ou 20 pixels, ce serait même mieux. C’est un petit changement qui n’affectera pas beaucoup votre design, mais dont les personnes âgées et personnes malvoyantes en seront très reconnaissantes!
Contraste des couleurs
Le contraste des couleurs de votre site est un autre élément à vérifier. En effet, pour toutes les sections contenant du texte, le contraste entre la couleur du fond et la couleur du texte devrait être suffisamment élevé. De façon générale, le ratio 4,5:1 est utilisé. Probablement que cette mesure ne vous donne aucune information concernant le contraste requis et c’est bien normal. Ce n’est pas nécessaire d’être un pro de la couleur pour vérifier si le contraste de son site est suffisant. Plusieurs outils sont à votre disposition pour faire la vérification pour vous. Entre autres, le site web de WebAIM contient un «contrast checker» pour faire cette vérification. Vous n’avez qu’à entrer le code de couleur de votre texte et celui du fond, puis l’outil calcule automatiquement le ratio de contraste et vous indique si vous respectez les règles d’accessibilité.
Porter attention au texte des boutons et liens
Les liens et boutons sont des éléments cruciaux de la navigation et de la compréhension d’un site. De cette façon, et puisque les liseurs d’écran peuvent générer une liste des liens et naviguer seulement à partir de ceux-ci, vos boutons et liens textes devraient avoir du texte significatif. Des liens comme «voir plus» ou «cliquez ici» n’offrent aucune information à l’utilisateur sur ce qui se passera s’il le clique. C’est donc important d’utiliser des mots significatifs et pertinents pour tous vos éléments de navigation. Des textes comme: «S’abonner à notre infolettre» ou «Voir notre équipe» aideront beaucoup plus les utilisateurs de liseurs d’écran à naviguer sur votre site web.
Ne pas seulement utiliser la couleur pour exprimer une information
Dans le même ordre d’idées, il est important d’utiliser d’autres éléments que la couleur pour distinguer un élément important. Par exemple, la couleur peut être un élément distinctif pour différencier quel onglet est actif dans le menu, mais il ne doit pas être le seul. Vous pouvez donc utiliser le style de menu «souligné» qui combinera un changement de couleur avec un soulignement pour indiquer quel onglet est actif dans votre menu. Pensez également à diviser vos listes avec des catégories ou sous-titres, au lieu de seulement utiliser un code de couleur. Cela aidera fortement les gens daltoniens à repérer rapidement l’information dans votre site web.
Écrire du texte alternatif pertinent
On vous a déjà parlé du texte alternatif de vos images, surtout dans le contexte du référencement de votre site. Par contre, ce n’est pas le seul avantage de cet attribut. Il est aussi utilisé par les lecteurs d’écran pour les personnes malvoyantes. En effet, c’est extrêmement important de bien remplir l’attribut texte alternatif de vos images, puisque ces dernières ne seront autrement pas interprétées par les liseurs d’écran. Les personnes malvoyantes n’auront donc pas accès à toutes les images sur votre site web. Quelques critères doivent être respectés pour le remplissage du texte alternatif. Pour avoir un peu plus d’infos sur la meilleure façon de rédiger du texte alternatif, vous pouvez vous référer à ce petit guide de rédaction.
En conclusion, ces petits trucs ne transformeront évidemment pas votre site en pionnier de l’accessibilité. Par contre, en les appliquant, vous aiderez considérablement les personnes avec un handicap à naviguer votre site web plus aisément. Si ce sujet vous intéresse plus particulièrement, voici quelques liens pour poursuivre votre lecture.
Sources:
https://openclassrooms.com/fr/courses/1121911-faire-un-site-web-accessible
https://www.w3.org/WAI/fundamentals/accessibility-intro/ (anglais)
https://www.w3.org/TR/WCAG21/ (anglais)