Meilleure police pour site web & accessibilité

Meilleure police pour site web

Certaines polices et caractères sont plus faciles à comprendre que d’autres. Une police accessible est une police qui n’exclut ni ne ralentit la vitesse de lecture de tout visiteur de site Web, y compris les personnes aveugles, malvoyantes ou souffrant de troubles de la lecture. Le choix de la bonne police améliore la lisibilité et la capacité de lecture de votre site pour tous, ce qui permet à votre organisation de toucher un public plus large en ligne.

Différence entre une police accessible et inaccessible ?

Toutes les polices n’ont pas été conçues en tenant compte de l’accessibilité du Web. La taille, la couleur et le contraste sont les trois facteurs clés qui déterminent si une police est accessible.

Pour respecter les principes de la conception inclusive, il est important de choisir une police pour site web simple, sans fioritures et claire. L’une des façons les plus simples de réduire vos choix est de savoir quelles sont les caractéristiques à éviter dans une police pour site web. Les polices inaccessibles ont tendance à présenter une ou plusieurs des caractéristiques suivantes :

  • Rendre le contenu plus difficile à lire

  • Rendre difficile la distinction entre les formes des différents caractères et lettres

  • Ralentissement du lecteur

  • Il est difficile de distinguer une lettre d’une autre lorsque les caractères ou les lettres se chevauchent

  • Sont décoratives ou comportent des ornements inutiles

  • Sont des polices d’affichage spécialisées, telles que les polices manuscrites, personnalisées ou cursives.

Pourquoi les polices d’écriture sont-elles importantes pour l’accessibilité du Web ?

La plupart des informations du web – et la valeur que votre entreprise offre – sont communiquées par du texte. Avec 1,7 millions de Français souffrant d’une perte de vision, vous risquez de mettre en danger votre réputation et votre succès commercial en ignorant les besoins de ce groupe en matière de sites Web. Et ce chiffre ne cessera d’augmenter à mesure que la population française vieillit et connaît des problèmes de vue liés à l’âge et à la maladie.

Les personnes souffrant d’un handicap visuel ne sont pas les seules à avoir du mal à lire certaines polices de caractères. Les personnes ayant des difficultés d’apprentissage comme la dyslexie peuvent également être sensibles à certaines polices de caractères. Le choix du type de police pour site web peut également avoir un impact considérable sur leur niveau de lisibilité. Il convient de noter que la dyslexie touche jusqu’à 20 % de la population américaine.

En veillant à ce que les polices de caractères de votre site Web soient accessibles, vous pouvez mieux atteindre cette importante tranche de la population et préserver la réputation de votre marque en tant qu’organisation qui prend l’inclusion au sérieux.

Sur quel type de contenu dois-je utiliser des polices accessibles ?

Type contenu pour site web

Lorsque vous choisissez une police pour site web accessible, n’oubliez pas que l’accessibilité et l’inclusion numérique ne commencent pas et ne s’arrêtent pas à vos pages Web. Pensez à toutes les façons dont vous utilisez les communications écrites pour communiquer avec vos publics cibles, comme les e-mails, les landing pages, les articles de blog, les PDF, les vidéos et les images.

Tous ces formats de contenu doivent être rédigés avec la même police. Si ce n’est pas possible, il faut utiliser le moins de types de polices possible.

Il est bon de préciser votre choix de polices accessibles dans vos directives de marque et de veiller à ce que toutes les parties prenantes du site Web soient conscientes des différents niveaux d’accessibilité des différentes polices.

Meilleures polices pour sites web

Meilleure police pour site web

Pour assurer l’accessibilité du Web et réduire au minimum la confusion chez les visiteurs de votre site Web, vous devez utiliser le moins de polices possible sur votre site. Mais cette règle ne vous aide pas à choisir la meilleure police pour site web. Il n’est pas toujours évident de savoir quelles polices sont accessibles.

Heureusement, les normes d’accessibilité telles que les normes WCAG permettent de déterminer les polices qui offrent la meilleure expérience possible pour tous les utilisateurs.

Principales polices accessibles

La bonne nouvelle est que vous n’avez pas besoin d’investir dans une police pour site web personnalisée pour rendre le contenu de votre site Web accessible. De nombreuses polices standard et largement disponibles obtiennent un score élevé en matière d’accessibilité du Web. Les polices les plus accessibles sont Tahoma, Calibri, Helvetica, Arial, Verdana et Times New Roman.

Les polices à empattement court, telles que Arvo, Museo Slab et Rockwell, sont également considérées comme accessibles. Ces types de polices sont surtout utilisés dans les titres plutôt que dans le corps du texte.

Pour un résultat optimal, il est recommandé de choisir des polices ou des familles de polices courantes qui présentent des caractères forts et uniques.

Polices à éviter

Il est préférable d’opter pour les polices les plus courantes plutôt que pour les moins populaires, afin d’augmenter la probabilité que l’appareil du visiteur de votre site Web puisse l’afficher correctement.

Évitez les polices comportant des « formes de lettres imposées », conçues pour ressembler à d’autres formes de lettres dans le cadre de leur style visuel, comme les lettres majuscules I, S, le chiffre 1 et les L minuscules.

Quelle est la meilleure taille de police pour site web?

Même si vous avez choisi une police inclusive, le texte de votre site Web peut rester inaccessible. Certains de vos visiteurs auront besoin d’une taille de police plus grande ou plus petite pour une lecture optimale. L’utilisation d’une police pour site web de taille inappropriée peut également entraîner la non-conformité de votre contenu aux normes d’accessibilité du Web.

Évitez cela en :

  • Permettant aux visiteurs de votre site Web d’augmenter ou de réduire la taille du texte sans zoomer sur tout le reste de la page.

  • Veillant à ce que la taille de votre texte permette à votre contenu de s’afficher correctement sur une gamme complète d’appareils, y compris les mobiles, les tablettes et les lecteurs d’écran.


En ce qui concerne la taille des polices, il existe quatre unités de mesure différentes :

  • Ems (em). Définit une taille de police relative à la taille de l’élément parent dans une page HTML

  • Rems (root ems). Relatif à la taille de la police pour site web de l’élément racine en HTML

  • Pixels (px). Ne sont pas mesurés par rapport à un élément de base. Il s’agit d’une unité de mesure absolue.

  • Points (pt). Une autre unité de mesure absolue.

Il est recommandé de définir les tailles de police pour site Web en unités relatives telles que les pourcentages, rem ou em, plutôt qu’en unités de mesure absolues telles que les pixels ou les points. Dans certains navigateurs, il n’est pas possible de zoomer sur du texte défini en pixels séparément du reste de la page Web. En revanche, l’utilisation de polices relatives permet de redimensionner le texte de manière appropriée sur plusieurs appareils et plateformes.

En ce qui concerne la taille, les normes WCAG, ne spécifient pas de taille de police pour site web minimale officielle. Cela ne signifie pas que n’importe quelle taille de police pour site web est accessible – si le texte est trop grand ou trop petit, il peut être trop difficile à lire. Il est donc préférable de permettre aux visiteurs de votre site Web de choisir eux-mêmes la taille de police optimale grâce au zoom avant.

Couleur des polices et contraste des couleurs pour l’accessibilité du Web

Police pour site web accessible

Couleur : en matière de conception de sites Web, la couleur est souvent utilisée pour donner du sens. De tels choix de conception peuvent en fait rendre votre contenu inaccessible.

Pour que chacun puisse voir et percevoir votre contenu avec précision, les WCAG recommandent de ne pas utiliser la couleur de la police pour site web comme seul moyen visuel de transmission de l’information. Cela inclut l’utilisation de différences de couleur pour susciter une réponse de l’utilisateur ou pour interpréter un élément visuel de votre page Web, comme des liens colorés mais non soulignés dans une phrase ou des éléments d’une liste dont certains sont présentés en texte coloré pour montrer une différence.

Si vous devez utiliser la couleur de la police pour site web pour communiquer des informations, veillez à inclure d’autres indicateurs visuels pour aider les personnes ayant une faible perception des couleurs à les interpréter correctement. Il peut s’agir d’actions telles que le soulignement, la mise en caractères gras, l’italique ou l’utilisation d’autres indices discernables qui ne nécessitent pas la pleine perception des couleurs, afin de les distinguer visuellement du texte environnant.

Contraste : Il est utile de noter que les lois et directives en matière d’accessibilité n’interdisent pas expressément l’utilisation de couleurs ou de combinaisons de couleurs spécifiques pour le texte Web. C’est plutôt le contraste des couleurs qui est utilisé pour mesurer la conformité à l’accessibilité.

Le contraste des couleurs fait référence au contraste des couleurs entre le texte et le fond sur lequel il est affiché. Si vous utilisez un contraste de couleurs suffisant pour votre texte, il est plus facile pour tout le monde, et en particulier pour les personnes malvoyantes, de voir clairement votre texte Web. Un contraste trop important (ou trop faible) peut être source de problèmes. Imaginez que vous essayez de lire un texte coloré faiblement contrasté – comme un texte gris sur un fond blanc – par une journée ensoleillée en plein air.

Le texte noir sur fond blanc est la valeur par défaut du contenu Web, mais de nombreux sites Web s’en écartent pour des raisons de marque et de style – et toutes ces combinaisons ne seront pas accessibles. Heureusement, les directives WCAG indiquent clairement les niveaux de contraste requis pour que le texte soit jugé accessible :

  • Titres : Le rapport de contraste pour le texte à grande échelle doit être au minimum de 3:1

  • Texte principal : Pour le texte autre que les titres, un rapport de contraste d’au moins 4,5:1 doit être maintenu

  • Logotype : Le texte qui fait partie d’un logo ou d’une marque n’a pas besoin de contraste

  • Texte secondaire : Le texte qui fait partie d’une interface utilisateur inactive, d’une décoration pure, invisible, ou d’une partie d’une image, et qui ne transmet pas d’informations significatives, n’a pas d’exigence de contraste.


Si vous n’êtes pas un expert en accessibilité du Web, l’utilisation d’un outil professionnel de vérification du contraste des couleurs, comme le Colour Contrast Checker, est le moyen le plus simple et le plus fiable de vérifier l’accessibilité des rapports de contraste des couleurs de votre texte Web.

Conclusion

En veillant à ce que votre police pour site web soit accessible, votre contenu est plus facile à lire et à apprécier pour tous et vous aide à rester en conformité avec les principales normes WCAG.

Nos services de création de sites Internet respectent les bonnes pratiques de l’accessibilité Web, n’hésitez pas à nous contacter.

Partager :

LinkedIn
Facebook
Twitter
Email
Dernières actualités

Newsletter mensuelle

Pas de spam, uniquement des astuces Webmarketing !

Social Media

Les plus lus

Catégories

[Hello Code]

Articles récents

11 astuces pour optimiser son contenu réseaux sociaux
11 conseils pour optimiser votre contenu réseaux sociaux
Comment créer un contenu réseaux sociaux de qualité qui serve les utilisateurs et soit bien classé dans...
Lire plus
3 façon d'optimiser son budget campagne digitale
3 astuces pour optimiser votre budget campagne digitale
Avec la technologie et les données disponibles aujourd’hui, nous pouvons faire bien plus qu’identifier...
Lire plus
Header Campagne de marketing digital
Mettre en place une campagne de marketing digital disruptive
En tant que clients, nous sommes tous accablés de messages marketing partout où nous allons. Et si le...
Lire plus
1 2 9