L'utilisabilité n'est pas une science exacte. Ce qu'un visiteur considère comme utile, un autre considère comme agaçant. Malgré cette incertitude et cette complexité, vous devez toujours vous efforcer de rendre votre site aussi accessible que possible aux personnes que vous essayez d'atteindre. Vous constaterez qu’un peu de restauration répondant aux besoins particuliers d’une minorité d’utilisateurs peut considérablement améliorer le fonctionnement de votre site pour tous les utilisateurs. Voici notre liste de douze pièges d'accessibilité à éviter ainsi que quelques exemples présentant des sites qui excellent ou qui échouent lamentablement dans ces domaines.
Captchas
Les développeurs Web semblent vraiment aimer les captchas, mais les utilisateurs ne les supportent pas. Accorde-le, ils ne sont pas tous mauvais, mais la plupart d'entre eux sont soit impossibles à lire, soit inutilement compliqués comme celui ci-dessus. Un autre problème important est que les captchas représentent souvent un obstacle sérieux pour les malvoyants. Si vous devez absolument utiliser un captcha, assurez-vous que la plupart des humains peuvent le lire / le comprendre et disposer d'options pour les utilisateurs qui ne peuvent pas le voir.
Ne pas utiliser? Alt? Attributs sur les images
C’est certainement une bonne pratique de toujours insérer un morceau utile de alt texte pour les images sur votre site. De cette façon, les utilisateurs qui ne peuvent pas voir vos images sont représentés avec un équivalent textuel. Notez que tous les navigateurs ne traitent pas le alt attribuer de la même manière. A cause de cela, de nombreux développeurs confondent le but de alt et Titre, pensant à tort que les images avec un alt attribut devrait afficher une info-bulle. En réalité, le Titre L'attribut est ce qui devrait afficher une pointe au dessus de la souris (voir l'exemple de Smashing Magazine ci-dessus).
Utilisation de Pop Ups pour le contenu
La plupart des navigateurs modernes s’assurent que votre contenu sera bloqué s’il se présente sous la forme d’une fenêtre contextuelle. Cela signifie que vous courez le risque de perdre plusieurs utilisateurs potentiels qui ne font que passer à autre chose lorsqu'ils réalisent que votre site n'est pas compatible avec leur configuration. Seuls les visiteurs les plus dévoués étudieront le problème dans vos pages d’aide pour découvrir comment le résoudre.
Étiquettes incorrectes sur les formulaires
Visitez Mint.com (illustré ci-dessus) et consultez leur formulaire d'inscription. Notez que vous pouvez sélectionner un champ spécifique, que vous cliquiez sur le champ lui-même ou sur l’étiquette attachée. C’est parce que les développeurs de la Monnaie utilisent le étiquette élément correctement. La leçon à tirer est qu’il n’est pas suffisant de marquer vos formulaires avec du texte brut. Au lieu de cela, vous devriez toujours utiliser le étiquette élément pour maximiser la convivialité. Cela fournit non seulement des champs faciles à sélectionner, mais garantit également que les lecteurs d'écran et les fonctions de remplissage automatique fonctionnent correctement avec vos formulaires.
Liens non reconnaissables
La capture d'écran ci-dessus montre une section de la page d'accueil du tutoriel 9. Notez que vous pouvez instantanément différencier le texte contenant un lien du texte qui n'en contient pas. Les méthodes les plus courantes pour créer une différenciation de lien incluent le contraste de couleur, le soulignement et les effets de survol. Notez que le didacticiel 9 utilise les trois méthodes! Cela augmente considérablement la convivialité, car les utilisateurs peuvent clairement voir où cliquer s'ils souhaitent accéder à davantage de contenu.
Lien vague texte
Considérez les exemples suivants:
1. Pour visiter notre galerie CSS, cliquez ici.
2. Assurez-vous de visiter notre galerie CSS!
Lorsque vous numérisez une page, vos yeux sont susceptibles de se concentrer davantage sur les liens différenciés que sur le reste du texte, car ils se détachent. Le premier exemple peut sembler être un bon moyen d’aller parce que l’appel à l’action? Cliquez ici? est ce qui attire votre attention. Cependant, sans lire correctement la phrase entière, cliquez ici. n'inspire aucune action car l'utilisateur ne sait pas trop où cela mène. En revanche, le deuxième lien peut être instantanément reconnu et compris comme un chemin menant à une galerie CSS, que l’utilisateur ait ou non lu le contenu qui l’a précédé.
Contenu encombré et espacement insuffisant
Le site ci-dessus est vraiment plus une parodie qu'un bon exemple, mais il fait passer le message et était trop drôle pour ne pas l'inclure. En termes simples, ne combinez pas votre contenu et n’ajoutez pas une quantité démesurée d’images ou de textes (les articles de presse et les blogs sont des exceptions). Les propriétaires de petites entreprises qui commencent tout juste à se lancer sur le Web sont presque toujours la proie de cette erreur et incluent paragraphe après paragraphe des informations que personne ne lira jamais. Qu'on le veuille ou non, le Web est une bête visuelle. Les informations sur votre page doivent être clairement organisées et faciles à comprendre en quelques secondes.
Changer la taille de la police ne devrait pas briser la mise en page
Tous les internautes ne sont pas âgés de 19 ans et ont une vision 20/20. Beaucoup d'utilisateurs, jeunes et vieux, doivent augmenter la taille de texte par défaut pour rendre une page plus lisible. Découvrez ce qu'il advient de Fox News (et de plusieurs autres sites d'informations populaires) lorsque vous augmentez la taille de la police. La mise en page est complètement détruite: les liens de navigation se joignent tous ensemble, les boutons se trouvent à des kilomètres du texte qui leur est associé et les annonces diffusées du côté droit ont complètement disparu. Ce type de surveillance peut aliéner une grande partie des visiteurs.
Mauvais contraste entre le texte et l'arrière-plan
Ces gars-là ont peut-être des talents en design, mais ils ont ruiné leur crédibilité en le faisant avec un graphique presque impossible à lire. Je comprends que parfois les clients vous demandent d’utiliser une photo d’image avec un espace de copie nul, mais c’est votre travail de concepteur de trouver comment intégrer du texte facilement lisible à l’image. Utilisez des caractères gras, des traits, des ombres portées, des barres de couleur et tout ce que vous pouvez imaginer pour différencier votre message de son arrière-plan.
Surutilisation de Flash
N'interprétez pas ceci comme un mantra Flash Bashing. Flash a amené le Web à un niveau de richesse qui permet aux rêves les plus fous du développeur de devenir réalité. Je suis tout aussi enclin à être aspiré par un site flash incroyable et unique que le prochain gars.Cependant, soyez extrêmement prudent lorsque vous intégrez Flash dans votre site Web de manière à ce qu'il ne fonctionne pas sans ce dernier.
Assurez-vous d'examiner attentivement la raison de l'existence du site et votre marché cible pour le site. Si vous souhaitez créer une application en ligne ou une application intéressante pour les visiteurs, Flash peut être la solution. Mais si votre marché cible est le grand public, un site entièrement Flash pourrait être une mauvaise idée pour plusieurs raisons. Le premier est la convivialité: les développeurs de sites Flash peuvent souvent être tellement obsédés par l'idée de créer quelque chose de joli qu'on ne pense absolument pas si un utilisateur peut réellement déterminer comment utiliser le site ou non. J'ai remarqué que les grandes agences de publicité ont tendance à suivre cette tendance en créant de beaux sites Web qui peuvent prendre quelques minutes à comprendre comment les utiliser. Une autre raison d'éviter Flash est que de nombreux utilisateurs sont tellement ennuyés par Flash qu'ils le désactivent complètement. Enfin, demandez-vous toujours s'il est acceptable de sacrifier les visiteurs mobiles. De nombreux smartphones comme l'iPhone ne prennent pas encore en charge la technologie Flash et sont donc exclus de nombreux sites Web classiques.
Menus déroulants compliqués
Il existe une marge délicate entre un menu utile et un gâchis surchargé et les développeurs de Microsoft flirtent avec ce dernier. D'une part, ils offrent aux utilisateurs un accès facile à leur gamme complète de produits. D'autre part, ils jettent beaucoup plus de contenu sur les utilisateurs que dans un simple menu déroulant. Cela peut être acceptable si vous cliquez sur "Tous les produits". Le bouton vous amène à une page dédiée contenant la liste des produits, mais ce n’est pas le cas (cliquer seulement pour fermer le menu). Passez une minute sur leur site et vous verrez que presque tous les menus de navigation sont remplis de petits liens (difficilement lisibles) et monotones.
Le fait est que les menus surchargés résultent généralement d’une tentative d’augmentation de la convivialité, ce qui entraîne en réalité une diminution de la convivialité en raison de la quantité démesurée d’informations qui doivent être filtrées pour parvenir à l’endroit où vous voulez aller.
Conclusion
Donc, voilà, douze façons simples de rendre votre site plus convivial pour les masses. J'espère que cet article vous a aidé à identifier quelques méthodes pour améliorer l'accessibilité de vos conceptions. Dites-nous ce que vous pensez de ces conseils. N'hésitez pas à être complètement en désaccord sur l'un ou l'autre et assurez-vous de nous informer de toutes les petites choses qui vous dérangent au sujet de l'accessibilité.