6 bonnes pratiques de développement pour améliorer la qualité web de votre site

L’importance de la navigation au clavier pour améliorer la qualité web

La navigation au clavier constitue un élément fondamental de l’expérience utilisateur et un aspect essentiel de la qualité web en termes d’accessibilité. Ainsi, une bonne pratique consiste à rendre accessible tous les éléments interactifs du site à l’aide de la touche Tab du clavier et activés avec la touche Entrée ou Espace.

Cette fonctionnalité offre la possibilité aux utilisateurs qui n’ont pas la possibilité d’utiliser une souris de naviguer et d’interagir avec un site web. Les lecteurs d’écran, utilisés par les personnes aveugles et malvoyantes, s’appuient également sur la navigation au clavier pour parcourir et vocaliser les informations présentes sur une page web.

Afin d’offrir une expérience fluide, la navigation au clavier s’effectue idéalement dans un ordre logique et intuitif. Les pièges au clavier bloquant l’utilisation au cours de sa navigation sont à éviter. De plus, maintenir la visibilité du focus clavier lors de la navigation est indispensable afin d’orienter correctement l’utilisateur.

Ajouter des liens d’accès rapides

Les liens d’accès rapides servent d’ancres vers des sections spécifiques de la page. Positionnées en haut de page, ils sont visibles ou masqués par défaut, et apparaissent uniquement lors de la navigation au clavier.

Afin d’optimiser la qualité web, veillez à intégrer sur chaque site un lien offrant un accès direct à la zone de contenu principal. L’ajout de liens supplémentaires vers la navigation principale et le formulaire du moteur de recherche est également recommandé.

Exemple de lien d’accès rapide pour se diriger vers le contenu principal.

Agrandir et espacer les zones cliquables

Améliorer la qualité web repose aussi sur des ajustements simples de l'interface utilisateur. Chaque élément d’interaction nécessite une taille suffisante pour être atteint facilement à la souris et sur un écran tactile. Si plusieurs éléments cliquables se situent côte à côte, éloignez-les suffisamment les uns des autres. Cette caractéristique améliore l’expérience utilisateur en réduisant le risque d’activer un lien par erreur.

Si le designer a opté pour une icône de petite taille pour un bouton, vous pourrez aisément, lors du développement, agrandir la zone du bouton en CSS sans dégrader le design.

 

Exemple de bouton de fermeture de pop-in : à gauche, le bouton entoure la croix, à droite, notons une zone de clic plus grande.

Différencier les liens : un point clé de la qualité web

Liens internes et externes : un détail qui fait la différence pour la qualité web

Pour améliorer l’expérience utilisateur et la navigation, et ainsi, la qualité web de son site, différenciez les liens internes des liens externes. Les liens internes dirigent vers d’autres pages du même site ; tandis que les liens externes dirigent vers des sites ou ressources extérieures, ce qui contribue à désorienter les utilisateurs s’ils ne sont pas avertis.

Afin d’informer les utilisateurs de la nature du lien, utilisez une icône ou un texte descriptif ; ainsi, ils seront en mesure de prendre des décisions éclairées au sein de leur parcours de navigation.

Parmi les cinq liens de cette liste, le lien ”Payer sa facture” se distingue comme un lien externe grâce à une icône spécifique.

Dans une démarche d’accessibilité, une simple indication visuelle ne suffit pas. Pour renforcer l'information, ajoutez un texte explicite tel que “(nouvelle fenêtre)” afin d'informer l’utilisateur.
Le choix s’offre entre afficher ce texte directement, ou l’insérer dans l’attribut title du lien. En cas d’utilisation de l’attribut title, incluez l’intitulé complet du lien.

<a href="http://www.example.com" target="_blank" title="Payer sa facture (nouvelle fenêtre)">Payer sa facture</a>

L’ajout de l’attribut rel="noreferrer noopener" pour chaque lien externe renforce la sécurité. Cette approche empêche le partage d’information contextuelles et réduit ainsi le risque de transmission de données personnelles et l’exécuition de code malveillant.

 

Distinguer les liens visités et liens non visités pour optimiser la qualité web

Selon votre site et son contenu, vous avez la possibilité de différencier visuellement les liens visités et les liens non visités. Pour cela, utilisez la pseudo classe CSS :visited pour appliquer un style distinct aux liens déjà consultés.

Exemple de recherche Google : les liens visités sont représentés en violet, les liens non visités sont représentés en bleu.

Optimiser l’affichage des dates

Les dates sont souvent présentées dans le format 12/11/10, généralement déroutant pour l’utilisateur. Il saura difficilement déterminer si la date correspond au 12 novembre 2010 (format européen) ou au 11 décembre 2010 (format américain).

Afin de clarifier la compréhension, adoptez des formats explicites : écrivez le mois en toutes lettres, en prévoyant une option d’abréviation, et indiquez l’année quatre chiffres.

Pour faciliter la reconnaissance des dates par les moteurs de recherche, employez l’élément HTML <time> avec l’attribut datetime.

<time datetime="2024-04-30">30 avril 2024</time>

Optimisation des images pour une qualité web accrue

Optimiser la taille des images

Pour améliorer le temps de chargement, en plus de réduire le poids des fichiers images, adapter les dimensions des images s’avère essentiel. Charger une image de 1900 pixels pour l'afficher dans une liste d'articles en 300 x 200 pixels est superflu. Recourez aux images adaptatives (responsive) lorsque nécessaire, afin de dimensionner chaque image spécifiquement pour chaque taille d'écran.

Avec Drupal, vous avec la possibilité de créer des styles d’images qui permettent de transférer une seule image, mais de l’afficher à des tailles différentes pour chaque variante d’affichage. Ainsi, l’image principale de l’article utilisée en grand format pour sa cover sera redimensionnée à la taille d’une vignette pour être affichée dans la liste d’articles.

Le format WebP : une nouvelle norme pour améliorer la qualité web

Créé par Google, le nouveau format WebP offre une compression plus efficace que les formats d'image traditionnels, tels que JPEG, PNG et GIF (réduction du poids d’environ 25%). Ce format est maintenant compatible avec tous les navigateurs récents, donc n’hésitez pas à l’utiliser sur vos projets web.