De petits choix qui rendent une page facile à lire

Une page n’est utile que si la personne qui l’a sous les yeux peut vraiment s’en servir. Voici les petits choix qui rendent ipe.rest plus facile à lire au clavier, sur un petit écran ou avec une écriture de droite à gauche, et ce que nous n’avons pas encore testé.

La dernière fois, nous avons expliqué comment le site peut s’ouvrir sans connexion. Ce billet parle de la lecture elle-même. Tout ce qui suit, vous pouvez le vérifier vous-même, d’une pression sur une touche ou avec les outils de votre navigateur.

Un passage au-dessus du menu

Appuyez sur Tab sur n’importe quelle page de langue ou du journal du site : le premier élément atteint est un lien « Aller au contenu ». Il reste hors de vue tant que le clavier ne l’a pas atteint, puis il apparaît en haut de la page. Suivez-le et vous arrivez directement au texte, sans avoir parcouru l’en-tête.

Vous voyez toujours où vous êtes

Quand vous naviguez au clavier, le lien ou le bouton sur lequel vous êtes reçoit un contour bleu de deux pixels, avec un petit espace autour. Nous n’avons pas simplement supprimé le contour par défaut du navigateur : nous l’avons remplacé par celui-ci, plus net, car une page que l’on ne peut pas suivre des yeux est une page que l’on ne peut pas utiliser.

Assez grand pour le toucher, facile à agrandir

Les liens et boutons de l’en-tête, du pied de page et du sélecteur de langue font au moins 44 pixels de haut : un pouce peut les atteindre. Le texte courant fait 17 pixels sur un ordinateur et 16 sur un téléphone, avec un interligne généreux, et les mots longs et les adresses web passent à la ligne au lieu de pousser la page sur le côté.

La page ne désactive jamais le zoom par pincement ; vous pouvez donc l’agrandir autant que votre navigateur le permet. Et si votre système demande moins de mouvement, le site coupe ses transitions et son défilement fluide.

Un contraste que l’on peut calculer

Le texte courant est d’un bleu marine foncé sur une page presque blanche, soit un rapport de contraste d’environ 17 pour 1. Le gris du texte secondaire est d’environ 6 pour 1, et le bleu des liens d’environ 6,6 pour 1. Une recommandation courante demande au moins 4,5 pour 1. Ces chiffres viennent des couleurs de notre feuille de style, calculés avec la formule standard, et non mesurés avec un outil d’audit.

Chaque langue, dans son propre sens

Chaque page déclare sa langue, et les pages en arabe déclarent le sens de droite à gauche. La mise en page utilise début et fin plutôt que gauche et droite : le lien d’évitement, les listes et les retraits s’inversent donc avec le texte. Les navigateurs et les technologies d’assistance peuvent s’appuyer sur la déclaration de langue pour choisir la bonne voix ou la bonne police.

Ce que nous n’avons pas fait

Nous n’avons pas réalisé d’audit d’accessibilité formel et nous n’avons pas testé avec tous les lecteurs d’écran. Le site n’a qu’un seul jeu de couleurs clair, et aucun sombre. Si quelque chose vous gêne, dites-le-nous sur la page de contact et nous nous y pencherons.

ipe(); // read it the way that works for you

Rien de tout cela n’est astucieux. C’est une courte liste de réglages par défaut que nous avons choisi de ne pas retirer, et une page qui reste calme pour vous est plus facile à lire pour tout le monde.