1174 sujets

Accessibilité du Web

Bonjour,

Je démarre un site avec des titres en Josefin Sans Bold Italic.
https://www.google.com/fonts/specimen/Josefin+Sans

J'embarque mes polices en les générant avec l'outil de fontSquirrel.
Et je fais mes tests sur plusieurs navigateurs mais celui de base est chrome.

Je réalise que l'affichage est lissé si je pars sur du Josefin Sans et que je passe la font-weight à bold (normal, toute image grossie voit ses bords lissés) et le résultat est plus joli.
Au contraire si j'utilise le style fourni par la police pour le Bold ou semi Bold, l'affichage n'est pas lissé, plus brut de décoffrage, et à priori plus lisible.

Sauf que justement à l'instant je m'interroge sur cette lisibilité : ma police lissée, justement parce qu'elle est plus jolie est à mes yeux plus lisible. Sachant que je n'ai aucun problème de vue.

Mais qu'en est-il pour la majorité ?

upload/48216-test.jpg

P.S. pour les dév surchargés du forum : si l'on édite un message dont le titre contient des quotes, ce dernier est tronqué (exemple de mon titre en édition je n'ai plus que "La")
Modifié par Manhattan (07 Jul 2015 - 14:33)
Modérateur
Salut,

Je t"ai déterré un bon vieux texte (je suis allé dans mes archives (2001)). Comme j'ai l'habitude de le dire, la technologie a changé, pas le métier (site d'informations) :

Un lecteur, même s’il est intérressé, peut abandonner la lecture si la présentation n’est pas agréable. Inversement une présentation soignée peut décider un lecteur réticent à prendre connaissance d’un document.

Les lecteurs, même s’ils s’en défendent, jugent tout d’abord un texte par sa présentation, ensuite seulement ils jugeront de la qualité de son contenu. La présentation est donc le premier obstacle que le lecteur rencontre. Le franchira-t-il ? C’est ici que se situe l’enjeu de la présentation et le rôle de l’infographiste. L’infographiste en multimédia participe à l’ensemble des étapes de production d’éléments multimédia, publiés sur internet ou édités sur support numérique (CDROM, DVD, etc.) ou sur support papier.

L’infographiste en multimédia travaille le plus souvent au sein d’une équipe (directeur artistique ou chef de projet, autres graphistes, développeur informatique, etc.) qui doît connaître le public qu’il vise et lui faire correspondre son travail.

Mais il ne peut savoir comment sera disposé le lecteur au moment où il aura le document sous les yeux. Sera-t-il disponible, pressé, énervé... ? Une présentation peut plaire un jour et déplaire un autre jour suivant l’état d’esprit du lecteur ! Il peut tout juste imaginer que certains documents intéresseront à priori plus que d’autres le public qu’il souhaite atteindre. Il sait aussi d’avance si le document apparaîtra seul (bien que cela de plus en plus rare avec la multiplication des imprimés de tous genres) ou noyé au milieu d’autres documents qui lui ressemblent.

Dans le premier cas, il peut se limiter à rendre le texte agréable, lisible en cherchant à trouver la présentation qui lui paraît parfaitement adaptée. Dans le second cas, il doit intégrer un paramètre qui a alors une très grande importance : attirer l’attention pour que le lecteur choisisse son document plutôt qu’un autre. Il faut remarquer que la plupart des documents sont aujourd’hui régis par ce facteur et s’y limitent trop souvent. Les couleurs, la taille des titres, la multplication des « astuces » pour étonner ou se différencier, tout va dans ce sens. Mais souvent cette démarche nuit au document lorsque le lecteur est enfin décidé à le lire. Ce qui a tout d’abord servi à attirer son attention risque de le lasser rapidement car il cherche maintenant à ce que la lecture lui soit facilitée.


http://pyramyd-editions.com/typographie-guide-pratique

Est ce que ça répond à ta question ? Sinon prend l'habitude de faire un gris typo lorsque tu composes un texte surtout si ce dernier est justifié (je parle de l'alignement -> gauche, droite, centrer, justifié).

<<<EDIT
Je n'avais pas vu dans quel forum, tu avais posté ton sujet. Il me semble de mémoire que ces articles devraient également répondre à ta question :

http://www.alsacreations.com/actu/lire/811-couleurs-accessibilite-contraste.html
http://www.pompage.net/traduction/contraste-et-sens
EDIT;
Modifié par niuxe (06 Jun 2015 - 21:07)
‘’La “beauté” d'une police participe-t-elle à sa lisibilité ?

On pourrait aussi bien formuler l’affirmation inverse : une police peut être jugée belle parce qu’elle est lisible (entre autres qualités).

Il faut remplacer le critère ‘’beauté” par ces critères plus mesurables.

D’abord, avec une police, tout dépend :

De l’emploi de la police : certaines polices sont conçues pour les titres, d’autres pour les textes.

De la longueur des textes : des textes courts seront “supportables” avec certaines polices, mais pas des textes longs.

De l’épaisseur des traits (polices sans serif) ou des déliés (polices serif) : trop de sites web utilisent des polices aux traits très (trop) fins. Ces polices sont très classe, conviennent au print (revues de design, d’art contemporain, etc.) – et encore !, mais à l’écran, c’est la fatigue visuelle garantie, sauf peut-être sur écrans Retina (cf. http://www.ligams.com/blog/flash-et-actionscript/pourquoi-flash-n-est-pas-mort).

De la bonne différenciation des variantes d’une police : des polices peuvent par exemple présenter une différence insuffisante entre leurs styles normal et gras.

De la largeur des caractères : des caractères trop étroits sont moins lisibles (et surtout sans serif) incitent le lecteur à parcourir verticalement le texte.

De l’espacement des caractères : des caractères trop peu espacés sont néfastes à une bonne lisibilité du texte.

Du contraste texte/fond : les textes gris sur fond blanc ou gris clair sont un classique de la mauvaise lisibilité ; les textes clairs sur fond sombre ne doivent pas être en caractères serif, les déliés et les empattements étant généralement trop fins.

Etc., etc.

Et il n’y a pas que la police elle-même : il y a aussi la hauteur de ligne, la largeur de colonne, etc.

Bref, la simple beauté d’une police, vue à travers un court échantillon de texte ne saurait en aucun cas en garantir la lisibilité : il faut la tester, et sur une police de texte, sur des textes longs.

Si tu crées des textes justifiés, tu as intérêt à utiliser la déclaration CSS hyphens: auto (avec et sans préfixes) pour activer la coupure de mots.

Vérification faite grâce à l’outil Pipette d’un logiciel de traitement d’images, les trois exemples de police… n’ont pas la même couleur. Les deux dernières apparaissent moins contrastées. Est-ce voulu ? Sinon, tu devrais explorer ce point.

Sauf que justement à l'instant je m'interroge sur cette lisibilité : ma police lissée, justement parce qu'elle est plus jolie est à mes yeux plus lisible. Sachant que je n'ai aucun problème de vue.

Mais qu'en est-il pour la majorité ?


Les internautes comportent une bonne part de personne affligés de divers problèmes de vue (myopie, daltonisme, etc.) tu dois tout mettre en œuvre pour maximaliser la lisibilité de tes documents.

Bonne continuation.
Merci pour vos réponses.

Niuxe : je vais prendre le temps d'approfondir la notion de gris typo que je ne connaissais pas. Même si, après recherche, il me parait plus difficile de trouver des documents relatifs au web qu'à la pao.
La lecture de ta réponse s'est jointe à ma réflexion lorsqu'à force de regarder mes titres enjolivés d'un léger flou je me suis demandé si ce n'était pas moins lisible justement que sans flou.
Maintenant, si tu pouvais détailler (ou lister quelques liens supplémentaires) au néophyte que je suis en quoi consisterait le fait de "prend l'habitude de faire un gris typo" lorsque je conçois une maquette Web, cela m'aiderait beaucoup Smiley smile

thierry : je suis tout à fait d'accord pour les critères de mesurabilité et en vérité, je prends le temps lorsque je conçois une maquette sur un projet que je qualifie d'important (devrais-je parler de budget du client...shame on me...) de tester les couleurs sur le color contrast checker de M. Snook, et j'évite généralement toute justification hors très petite colonnes (dc en responsive).
Concernant la différence de contraste, c'est ma faute : l'image fournie est l'association d'une copie d'écran de google font (sur lequel je n'ai pas pris le temps de modifier la couleur de police) et de ma propre maquette (que j'ai quand même pris le temps de préfixer d'un texte indicatif de la police modifié via l'inspecteur et repiqué à google font ^^tordu). Il faut donc imaginer 3 couleurs identiques.
Mais au final, on en arrive me semble t-il à la même conclusion : pas de flou pour la majorité (sachant qu'en vérité, je n'obtenais ce flou qu'avec chrome et pas avec firefox...) Smiley smile
Modérateur
Manhattan a écrit :

Niuxe : .... de "prend l'habitude de faire un gris typo" lorsque je conçois une maquette Web, cela m'aiderait beaucoup Smiley smile

wikipedia a écrit :
L'homogénéité du gris d'un bloc de texte est souvent appréciée en plissant les yeux pour « flouter » le texte et mieux percevoir les variations. S'il y a trop de taches sombres ou trop de taches claires dans l'image créée, c'est que le gris n'est pas harmonieux.



Est que tu as lu en entier l'article sur le gris typo ?
Modifié par niuxe (09 Jun 2015 - 23:32)
Maintenant oui. Mea maxima culpa.
Jsuis un poil débordé de travail en ce moment, mais cela ne m'excuse en rien Smiley smile
Modérateur
Je n'avais pas vu ta réponse.

Il y a pas de souci. Souvent les gens pensent que c'est un trucs super méga géant technique (je sais, j'ai un peu forcé sur le superlatif. Attention à ne pas confondre avec le laxatif sinon ça part aux toilettes.) Smiley biggol

En fait c'est un truc simple qui permet de vérifier une chose : la lisibilité même avec des "yeux défaillants". La typographie traite de ce sujet (la lisibilité). C'est la raison pour laquelle on parle de gris typographique.
Je pense que ce sont deux sujets distincts.

La beauté est une valeur relative, subjective, alors que la lisibilité se base sur des données objectives, mesurables.

Honnêtement je pense qu'une police moche peut tout à fait être lisible, tandis qu'une jolie police peut rendre celle-ci illisible. En bref : Rien à voir.
Modifié par Nigel (29 Sep 2015 - 11:16)
Une mauvaise police peut nuire à la qualité de votre texte, et en finalité faire fuir vos lecteurs, même si votre histoire est excellente.