Typographie accessible sur le web : Conception, application et aspects techniques
Typographie accessible sur le web : Conception, application et aspects techniques
Phil Garnham Polices de caractères pour l'accessibilité
La conception de sites web réactifs est arrivée à maturité et de nouveaux modes de lecture et d'interaction avec le texte sont apparus. Avec les développements récents des technologies de polices "variables" réactives qui permettent aux polices de s'afficher avec des largeurs, des graisses et des contrastes différents, il est plus important que jamais d'être conscient des attributs des polices de caractères accessibles.
Le choix d'une police de caractères accessible peut sembler être une tâche décourageante. La pléthore d'informations concernant la conception, l'application et la méthodologie du code des caractères accessibles est tout à fait stupéfiante. Une chose est claire : la lisibilité du contenu est probablement l'objectif principal de presque tous les sites web. Les points présentés ici ont pour but de servir de caisse de résonance pour la réflexion et l'évaluation lors de la sélection d'une police de caractères pour votre marque.
La lisibilité répond à la question suivante : "Pouvez-vous reconnaître cette lettre ou ce mot ?" "Pouvez-vous interpréter et comprendre ce mot ? La lisibilité s'intéresse à la question suivante : "Êtes-vous à l'aise dans l'expérience de la lecture ? La conception accessible est à la fois lisible et lisible.
Nos recherches, en collaboration avecAvec ou sans empattement :ont indiqué que les polices sans empattement étaient considérées comme le style le plus accessible. Le niveau de détail des lettres avec empattement a été jugé trop complexe par les personnes souffrant de troubles de la lecture. Les polices sans empattement ont une structure simplifiée ; leurs formes se rapprochent de l'écriture manuscrite que nous connaissons et sont donc jugées plus lisibles. Dans les navigateurs, les lettres sans linéaires s'affichent plus proprement à des tailles de pixels plus petites, en particulier dans les environnements de rendu les plus difficiles.
Le choix d'une police de caractères ayant de grandes qualités de reconnaissance des caractères favorise la lisibilité. Les malvoyants peuvent être déroutés par certaines lettres. Il est donc important de définir clairement les formes de lettres qui peuvent prêter à confusion. Les lettres les plus courantes sont le "I" (œil), le "i" (œil inférieur), le "l" (el) et le "1". Un "C" fermé peut ressembler à un "O" dans les petites tailles de pixels. Les formes ouvertes des compteurs facilitent la lecture. La combinaison de "r" et de "n" peut se lire comme un "m". Les longues jambages ascendants et descendants sont également importants. Elles permettent de définir des formes de mots extérieures que l'œil peut balayer et interpréter rapidement.
Une grande hauteur x et des proportions modérées à larges sont les plus accessibles. La hauteur x d'une police de caractères est importante car elle implique souvent un espace blanc plus important à l'intérieur d'une lettre, ce qui favorise la définition et la clarté. Les styles de largeur condensée et comprimée sont souvent présentés comme permettant une mise en page fluide et plus réactive. Il est important de comprendre qu'en utilisant une police condensée lorsque l'espace est limité (mobile), vous risquez également de réduire l'accessibilité. Il est essentiel de procéder à des tests approfondis des polices utilisées dans leur contexte. Proportions de la police :
Les indices sont une couche supplémentaire de données dans une police qui décrit le degré d'activation ou de désactivation d'un pixel afin d'améliorer la qualité d'une lettre à une taille de pixel spécifique. Malgré l'amélioration de la résolution des écrans, l'attribution d'indices aux polices reste un processus essentiel de la conception des caractères. La plupart des fonderies automatisent cette opération et obtiennent de très bons résultats, mais il faut rester prudent. Aucune indication ne permettra à une police à fort grammage d'avoir une bonne apparence à une taille de 12 px.Indice :
Poids :Établissez une hiérarchie en attribuant des rôles à chaque police. Une hiérarchie permet à l'œil de décomposer l'information en une expérience claire. Utilisez des graisses ouvertes et moyennes pour les sous-titres et le corps du texte. Mettez en place un test pour évaluer les différents navigateurs et environnements, ou utilisez la fonctionpour une vue d'ensemble. Le poids peut varier considérablement d'un environnement à l'autre. Si vous le souhaitez, mettez en placeType Rendering Mixpour équilibrer l'apparence.
Taille :La taille est importante. N'oubliez pas que chaque police se situe à une échelle différente sur le corps typographique et que les tailles réelles peuvent varier considérablement d'une police à l'autre. 14 px dans une police peut être équivalent à 18 px dans une autre. La taille moyenne d'un corps se situe entre 14 et 16 px. En règle générale, la taille de 16 px et plus est considérée comme la plus large. La taille des polices peut également avoir un impact sur la qualité du rendu. Trouvez les points de repère qui offrent les meilleurs résultats de rendu pour vos principales plates-formes.
Hauteur de ligne : Donnez de l'espace aux caractères pour qu'ils respirent. L'œil doit pouvoir passer facilement d'une ligne à l'autre. Les lignes directrices relatives à l'accessibilité du contenu Web recommandent une valeur de 1,5 pour le corps du texte. Évaluez, réduisez ou augmentez cette valeur si nécessaire.
La lecture de longues lignes de texte est éprouvante pour les yeux. Les recherches indiquent que la longueur moyenne d'une ligne en ligne est d'environ 70 à 80 caractères. Limitez les lignes à 16 mots maximum.
Un texte centré n'est pas un texte accessible. Le centrage crée différentes positions de départ. Cela pose des problèmes aux malvoyants.
N'utilisez jamais les "TOUTES CAPITALES" dans le corps du texte. Utilisez les petites capitales si une capitalisation de courte durée est nécessaire. Elles sont idéales pour l'accentuation, les abréviations et les sous-titres.
Ligatures :Considérez la conception des ligatures - fi, fl etc... Ces lettres combinées peuvent ajouter de l'harmonie, mais aussi de la confusion pour les personnes souffrant de troubles de la lecture.
Comme tous les éléments visuels, les caractères doivent être suffisamment contrastés. Les caractères gris sur fond blanc peuvent être difficiles à lire si la grisaille et la police de caractères sont trop légères. Notrea des graisses finement "graduées" pour aider les utilisateurs à équilibrer son apparence. Les caractères blancs sur fond sombre "brillent" à l'écran, ils apparaissent plus serrés et certaines polices peuvent nécessiter des ajustements de l'espace entre les lettres.Couleur :
Les connexions lentes (mobiles) et les fichiers de police volumineux ralentissent le chargement des textes. Un seul fichier WOFF contenant un jeu complet de caractères européens pèsera entre 30 et 50 Ko. Les états FOUT (Flash of Unstyled Text) ou FOIT (Flash of Invisible Text) doivent être pris en considération. FOIT est le navigateur par défaut prédominant et, en termes d'esthétique, FOIT est souhaitable, mais en termes d'accessibilité, FOUT est certainement la voie à suivre. Il vaut mieux voir un peu de contenu que pas de contenu du tout. L'objectif est d'afficher le texte dans une zone de repli jusqu'à ce que toutes les polices Web soient chargées. Mettre en œuvre avecet définir un cookie, ce qui permet de minimiser le FOUT au fur et à mesure que l'internaute avance dans le site. Vous pouvez également définir le nouveau descripteur CSS font-display, qui permet de configurer le chargement des polices via CSS. Plus d'informations à ce sujetStratégies de chargement des polices :ici.
La sélection est limitée, en particulier sur mobile. Jordan Moore'sPolices de secours :illustre le problème. Lors de la sélection d'une solution de repli, essayez d'obtenir des poids et des proportions similaires. Ajustez les paramètres de la solution de repli pour qu'elle corresponde à la taille de police choisie. Informez votre décision en superposant la police accessible que vous avez choisie à la police de repli et jugez de son adéquation.
Utilisez optimiseLegibility pour activer le crénage et améliorer la qualité du rendu. Ce paramètre permet également d'activer les ligatures. Il convient donc de revoir la conception des ligatures et la complexité de leur forme. Si nécessaire, désactivez-les en définissant : .classname { font-feature-settings : "liga" 0 ; }
Protection des polices de caractères : Il faut des années d'efforts et d'investissements pour développer une police de caractères de haute qualité. Compte tenu du rôle important que jouent les polices de caractères dans tous les projets web, il est normal que vous preniez des mesures pour protéger l'investissement qu'elles représentent. Utilisez CORS pour déployer les polices de caractères, en veillant à ce que seuls les sites autorisés aient accès aux fichiers.
Chez Fontsmith, nous nous efforçons de rendre les caractères aussi accessibles que possible. Notre police accessibleest disponible avec un jeu Pro couvrant plus de 150 langues. Nous avons travaillé avec des groupes de signalisation et de protection de l'environnement pour créer une police de caractères d'orientation du 21e siècle. FS Millbank® - Le système de gestion de l'information de l'Union européenne L'objectif est d'aider à la navigation dans des environnements très fréquentés.
Une version antérieure de cet article a été publiée dans Net Magazine.
Les fichiers de polices variables pour le web se profilent à l'horizon et la flexibilité d'une famille de polices aujourd'hui standard sera bientôt grande ouverte. Le concepteur et le développeur pourront adapter le poids et la largeur des polices de caractères utilisées sur un site et dans des environnements spécifiques. Créons un web plus lisible grâce aux principes de base de la typographie accessible en ligne.