Comment créer une conception accessible d'une page Web

Écran d'ordinateur portable

Boutiques en ligne, applications bancaires, réservations d'hôtels ou encore emplois indépendants, il y en a de plus en plus les tâches gérées via Internet et qui ont remplacé dans certains cas, les médias conventionnels.

cette la croissance rapide des opérations numériques nous a facilité la tâche sous de nombreux aspects la vie. Cela nous fait gagner du temps car les transactions sont plus rapides et il n'est pas nécessaire de se rendre dans un établissement physique, et bien sûr, de nouveaux médias ont été créés qui n'existaient pas auparavant et que maintenant la plupart des gens utilisent, comme les réseaux sociaux, des films et des séries en streaming sur des plateformes comme Netflix ou des systèmes de paiement en ligne comme Paypal.

Avec cette montée en puissance du monde numérique, il est essentiel investir dans le développement d'interfaces accessibles et bien conçues Pour les utilisateurs. Cependant, nous ne pouvons pas oublier que il y a des utilisateurs qui souffrent de handicaps physiques ou psychologiques qui limitent considérablement leur expérience et leur capacité à utiliser les ordinateurs et les mobiles.

Bien qu'il existe certains handicaps, tels que les personnes qui utilisent des fauteuils roulants, qui n'interfèrent pas avec l'utilisation d'Internet, d'autres, tels que des problèmes de vision ou de cécité, des problèmes de coordination motrice, la surdité ou l'autisme, ils peuvent sérieusement entraver votre capacité à naviguer sur le Web. Pour ces cas, certains ont déjà été créés dispositivos comme les lecteurs d'écran, qui aident et soutiennent les utilisateurs dans les zones où ils sont handicapés.

Mais ce n'est que la première partie de la résolution du problème. En pensant à ces utilisateurs, nous devons concevoir des interfaces de page Web qui facilitent votre expérience et répondre à vos besoins. Lors de la conception, nous pouvons appliquer certains principes.

Contenu et sources

En commençant par le plus basique, vous devez définir des priorités dans la conception de contenu. L'en-tête et la barre de menus doivent être facilement localisables visuellement et doivent être la première chose que l'utilisateur voit. Les éléments de la page d'accueil, les images et les informations pertinentes seront les seconds à localiser.

Des publicités ou des bannières publicitaires apparaissent sur de nombreuses pages. Si en soi cela est ennuyeux pour tous les utilisateurs, pour ceux qui ont une déficience visuelle, c'est un problème car cela crée beaucoup de confusion et interfère avec la lecture du diagramme Web. C'est pourquoi il est essentiel de créer un conception éditoriale générale de la page qui est organisé logiquement et compréhensible, et les éléments sont dimensionnés de manière appropriée, de sorte que même s'il y a d'autres distractions, les utilisateurs peuvent se concentrer sur le contenu important.

Les polices que vous utilisez de préférence, ils doivent être grand et lisible. Le type Sans empattement et gras Ils facilitent grandement la lecture des personnes qui peuvent souffrir de dyslexie. Les autres polices recommandées sont: Arial, Times New Roman, Helvetica, Tahoma, Calibri et Verdana.

Et bien sûr, vous devez toujours veiller à ce qu'il y ait une distinction claire entre le texte et l'arrière-plan. N'utilisez pas de couleurs similaires, choisissez plutôt couleurs contrastées.

Police de caractères gras sans empattement

L'utilisation des polices Sans Serif Bold permet une meilleure visualisation du texte.

Texte alternatif

El Texte alternatif ou la balise Alt, sont les descriptions qui sont placées sur les images sur les pages Web. Bien que ce texte ne soit pas accessible aux utilisateurs, un description bien écrite est un outil qui nous aide à obtenir un meilleur positionnement SEO.

Mais l'utilité de la balise Alt n'est pas seulement réduite à cela. Pour ceux utilisateurs utilisant des lecteurs d'écran pour les déficiences visuelles, les descriptions des images sont la seule référence dont ils disposent pour savoir quelle est l'apparence de ce qui est exposé sur la page. Donc si nous allons placer, par exemple, une photographie de quelques plantes succulentes, un bon texte alternatif serait: Trois plantes succulentes en pots roses. Un texte très court comme: Plantes en pot, Ce n'est pas une description qui donne des détails pertinents et ne fonctionne donc pas.

Succulentes en pot rose

Trois plantes succulentes en pots roses. Exemple de texte alternatif.

Adaptabilité

Lors de la conception, nous devons également prendre en compte tous les présentations dans lesquelles notre interface sera affichée, soit en version web ou mobile. L'expérience sera toujours différente selon le support sur lequel nous la visionnons.

Lorsque nous utilisons le mobile, nous pouvons être exposés à différents environnements qui rendent la lecture difficile De contenu de l'écran. Si nous sommes à l'extérieur par exemple, la luminosité du soleil rendra l'écran très sombre et le bruit ne nous permettra pas de bien entendre le son. C'est pourquoi il est important de bien réfléchir à ces détails, afin que la version mobile ait de grandes lettres et des couleurs sombres, et les vidéos devraient avoir des sous-titres au cas où il serait difficile de les entendre.

Écran mobile

Adaptez la conception de l'interface pour qu'elle soit lisible sur les téléphones mobiles et les ordinateurs.

Cohérence dans la conception

Conception éditoriale ce que nous faisons avec notre site Web doit être le même quelle que soit la section là où tu es. Les mêmes icônes de la barre de menu doivent apparaître dans la section Accueil que dans la section Contacts. Il ne faut pas changer de style ni l'emplacement des boutons clés du Web.

Il n'est pas non plus pratique pour nous de placer des vidéos qui se lisent automatiquement lors de l'ouverture de la page. Pour les utilisateurs utilisant des lecteurs d'écran, il est difficile de savoir comment les mettre en pause.

Site Web de Starbucks

La barre de menus de la page Starbucks est la même dans toutes les sections.

Navigation au clavier

Enfin, certains utilisateurs ayant des problèmes de coordination motrice ont des difficultés à saisir une souris d'ordinateur ou à utiliser le pavé tactile d'un ordinateur portable, et comptent uniquement sur le clavier. Assurez-vous de que votre site Web est conçu d'une manière ça peut être complètement fonctionnel uniquement avec les boutons du clavier.


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.