Choisir la bonne police et sa présentation : Une clé pour des sites web accessibles à l’ADA

Le web est un lieu d’hébergement public où chacun a un droit égal de participer, d’accéder, de présenter et de récupérer des informations malgré tout handicap. L’Americans with Disability Act (ADA) a été adopté pour garantir l’égalité des chances aux personnes handicapées. Alors qu’Internet n’en était qu’à ses balbutiements à l’époque, la réalité est aujourd’hui qu’elle s’applique à tous les lieux virtuels, y compris les services numériques et les contenus en ligne.

Pour remplir leurs obligations légales et morales, toutes les organisations et entreprises sont tenues de rendre leurs sites web et leurs canaux en ligne accessibles aux personnes handicapées. L’un des piliers essentiels de la conception d’un site web accessible réside dans la lisibilité et la capacité de lecture de son contenu textuel. Ceci n’est réalisable qu’en utilisant des polices accessibles.

Nous avons organisé ce guide pour aider nos lecteurs à répondre à des questions telles que Qu’est-ce que les polices accessibles et quelle est la meilleure police à utiliser pour un site Web ? Lisez la suite pour découvrir les détails des polices approuvées par l’ADA et leurs caractéristiques. Nous aborderons également certaines des caractéristiques nécessaires pour rendre un site Web accessible aux personnes souffrant de déficiences visuelles, de dyslexie et de troubles de la lecture.

Un aperçu des familles de polices

Les polices et les différentes familles de polices occupent une place importante dans la typographie numérique. Une famille de polices est constituée d’un ensemble de polices différentes qui partagent des caractéristiques et des attributs similaires se rapportant aux styles de conception. La compréhension de leurs propriétés peut aider les concepteurs de sites Web à choisir les polices les plus accessibles pour leurs sites. Bien qu’il existe de nombreuses familles de polices, nous en énumérons ici quatre, qui peuvent également être configurées par un utilisateur dans un navigateur Web :

• Serif : les polices Serif ont des décorations ou des ornements à la fin d’un trait dans une lettre ou un symbole.
• Sans-Serif : Sans est le mot français pour « sans ». Les polices Sans-Serif sont plus simples et n’ont pas les lignes étendues ou les caractéristiques à la fin de chaque trait dans une lettre ou un symbole.
• Monospace : Les polices monospace ont la même largeur pour chaque lettre ou symbole. Elles sont également appelées polices à largeur fixe ou non proportionnelles.
• Cursive : Les polices cursives sont écrites d’une manière fluide ressemblant à des mots écrits à la main. Les lettres individuelles peuvent être reliées entre elles pour donner une impression artistique.

Unités de mesure

Il existe différentes unités pour définir les tailles de police :

• Ems (em) : Cette unité définit une taille de police relative à la taille de l’élément parent dans une page HTML. Par exemple, si l’élément parent dans le HTML est de 14 px, alors 2 em le rendraient de 28 px.
• Rems (root ems) : Lorsque vous utilisez des unités rem, toutes les polices sont définies par rapport à la taille de police de l’élément racine dans le HTML. Par conséquent, tout le texte dans le HTML est spécifié par rapport à une police de base et ne dépendra pas de l’endroit où le texte est placé dans la hiérarchie HTML des pages Web.
• Pixels (px) : Il s’agit d’une unité de mesure absolue qui n’est pas basée sur la mesure par rapport à un élément de base.
• Points (pt) : Les points sont également une unité de mesure absolue. Les WCAG utilisent les valeurs CSS3, où 1pt correspond à 1,333 px. Par conséquent, 14pt et 18pt se traduisent respectivement par 18,5px et 24px.

Qu’est-ce qui rend une police inaccessible ?

Les polices inaccessibles exclues de la liste des polices conformes à l’ADA sont celles qui :

• Rendent le texte plus difficile à lire
• Rendent difficile la distinction entre les formes des différentes lettres et caractères
• Réduisent la vitesse de lecture de l’utilisateur
• Possèdent des lettres ou des caractères qui se chevauchent, ce qui rend difficile de distinguer une lettre d’une autre.

Si une police est décorée d’ornements, elle devient difficile à lire. Toutes les polices comportant des décorations à la fin d’un trait peuvent être plus difficiles à lire pour certains utilisateurs. Les polices de style cursif ou d’écriture manuscrite rendent également le texte inaccessible, et ce ne sont donc pas les meilleures polices à utiliser pour un site web.

Qu’est-ce que des polices accessibles ?

Lors de la conception d’un site web, l’un des aspects les plus importants est la sélection de la bonne police et sa présentation. La grande majorité des sites web nécessitent beaucoup de contenu textuel, qui doit être perceptible et visualisable. La clé d’un site web accessible est donc la lisibilité du texte qu’il contient, qui s’exprime à l’aide de différents styles de polices et de couleurs.

Quelles polices standard sont accessibles?

Malheureusement, l’avis des experts diffère sur la police la plus lisible pour le web, et sur la police de caractères à utiliser, car différents utilisateurs ont des exigences différentes. Par exemple, un public ayant une faible vision aurait davantage besoin d’un texte plus grand. Les personnes dont le champ visuel est faible, mais dont la vision est plus claire, ont besoin d’un plus grand nombre de caractères pour s’adapter à leur champ visuel tout en conservant une petite taille de texte. Les personnes souffrant de dyslexie ou de troubles de la lecture ont également leurs propres besoins.

Il est préférable que les concepteurs de sites Web offrent une certaine flexibilité afin que les utilisateurs puissent choisir leurs propres polices. Si une page Web utilise la police par défaut du navigateur Web, alors un lecteur n’aura pas à passer à une police différente chaque fois que la page Web est chargée.

Bien qu’il n’y ait pas d’exigence fixe en matière de taille de police ADA, les polices accessibles conformes à l’ADA sont claires, propres et distinguables par opposition aux styles cursifs ou d’écriture manuscrite. Il est généralement admis que les polices sans empattement sont plus faciles à lire et plus accessibles que leurs homologues à empattement. La liste des polices conformes à l’ADA comprend, sans s’y limiter, Arial, Calibri, Century Gothic, Helvetica, Tahoma et Verdana.

L’importance des polices accessibles

La plupart des informations sur le web sont véhiculées et diffusées via du contenu textuel. Une méthode de présentation du texte consiste à utiliser des images .png ou .bmp du texte. Cependant, ce n’est pas une option viable pour de nombreuses raisons. Par exemple, lorsque les images sont mises à l’échelle, leur lisibilité se détériore. De même, les lecteurs d’écran ne peuvent pas lire à voix haute le texte contenu dans les images. Par conséquent, tout le texte d’un site web doit être composé de polices accessibles, qui sont lisibles et visualisables.

Concevoir un site web accessible en utilisant des polices accessibles n’est désormais plus seulement une recommandation ou une caractéristique facultative. Elle est obligatoire ; si un site web viole les principes d’accessibilité, sa société ou son entreprise hôte risque d’être confrontée à de lourdes pénalités, amendes ou poursuites judiciaires. Cette amende peut atteindre 75 000 dollars pour la première violation et davantage en cas de non-conformité ultérieure.

On estime à 32,2 millions le nombre d’adultes souffrant de déficiences visuelles, selon les données de l’enquête nationale sur la santé (NHIS). Cela inclut non seulement les aveugles mais aussi les personnes qui ont une faible vision malgré le port de lunettes. Le CDC prévoit que ce nombre augmente rapidement en raison de déficiences visuelles liées à l’âge ou à des maladies.

Lors de la conception de sites web, les entreprises et les commerces qui s’adressent à cette importante minorité de la population bénéficieront naturellement d’une audience plus large. On sait que si le texte est plus difficile à lire sur un site web, celui-ci aura un lectorat plus restreint et un nombre limité de visites de pages. Par conséquent, l’ajout de polices approuvées par l’ADA sur un site web est un aspect essentiel de la gestion d’une entreprise prospère.

Polices spécialisées

La British Dyslexia Association (BDA) souligne les aspects importants suivants à garder à l’esprit lors de la conception de sites Web et de la sélection de polices accessibles pour les personnes atteintes de dyslexie :

• La police sélectionnée doit être conçue de manière à ce que les utilisateurs fassent facilement la différence entre les diverses lettres et les divers chiffres. Par exemple, l (petit L), 1, et I (i majuscule), peuvent tous se ressembler.
• Les lettres b et d, et p et q, sont des images miroir les unes des autres. Les personnes dyslexiques peuvent avoir du mal à les distinguer. Les lettres devraient être rendues de manière à ce qu’elles ne soient plus des images miroir.
• La plupart des personnes interrogées par le BDA préfèrent un « g » arrondi et un « a » arrondi. Cependant, l’arrondi de ces lettres ne doit pas les faire confondre avec un « o ».
• L’espacement des lettres doit être suffisant pour distinguer les différents caractères, par exemple, « rn » ensemble peut être confondu avec la lettre « m », de sorte que « learn » peut être confondu avec « leam ».

Des polices spécialisées ont été conçues pour les personnes atteintes de dyslexie, par exemple Dyslexie et OpenDyslexic. Ces deux polices sont disponibles gratuitement et peuvent être téléchargées sans frais. Elles font partie des meilleures polices à utiliser pour un site Web destiné aux personnes dyslexiques. De même, la police Fs Me est destinée aux personnes souffrant de troubles de l’apprentissage et est soutenue par l’organisation caritative britannique Mencap pour les troubles de l’apprentissage.

Conformité aux directives d’accessibilité au contenu Web

Les directives d’accessibilité au contenu Web (WCAG) ont été élaborées et publiées par le World Wide Web Consortium (W3C). Ces recommandations constituent la norme largement acceptée pour la conception de sites Web et de contenus en ligne accessibles. Aux États-Unis, la règle finale de la section 508 exige directement le respect des WCAG avec au moins le niveau de conformité AA. Pour les procès liés à l’ADA, le ministère de la Justice et les tribunaux américains se sont souvent référés à ces directives pour évaluer l’accessibilité des sites Web publics.

Le WCAG a des directives claires sur les polices accessibles pour les utilisateurs malvoyants, y compris les attributs et les caractéristiques de conception tels que la couleur, le contraste, la taille et les proportions du texte. Il existe également des recommandations pour la mise en page et la structure du contenu textuel qui rendent une page Web plus lisible et accessible. Il est essentiel d’intégrer ces caractéristiques dans un site Web pour répondre aux besoins des utilisateurs souffrant de basse vision, de dyslexie, de troubles de la lecture ou d’autres handicaps cognitifs.

Ce guide aborde les différentes recommandations du W3C choisissant les meilleures polices pour l’accessibilité, le maintien des polices conformes à l’ADA et leurs caractéristiques importantes.

Taille et proportions des polices : laissez l’utilisateur les contrôler

Lorsque l’on écrit un texte, la forme varie, et cela dépend aussi de la langue. Certaines formes d’alphabet sont complexes tandis que d’autres sont plus simples et plus faciles à lire, même à des tailles plus petites. C’est la principale raison pour laquelle une taille minimale de police n’est pas définie dans les WCAG. Voici les aspects importants à prendre en compte pour choisir les meilleures polices pour l’accessibilité et la meilleure police pour la lecture à l’écran :

• Tailles et unités de police : Selon les WCAG, la taille des polices doit être spécifiée en utilisant des ems et des rems, c’est-à-dire que la ligne directrice favorise les unités de police relatives plutôt que les unités absolues. Les concepteurs de sites Web doivent éviter de définir une taille de police de base dans l’élément racine. Ils peuvent plutôt utiliser la taille de police par défaut du navigateur, qui peut servir de point de référence pour définir toutes les autres tailles de police. Si l’utilisateur modifie la taille de police de base, alors toute la page change en conséquence.
• Fonction de zoom : Les utilisateurs devraient avoir le contrôle de la taille de la police, y compris le zoom du texte jusqu’à 200%. Le texte devrait rester lisible lorsqu’il est agrandi sans être surchargé ou avoir des chevauchements. Cet agrandissement doit être possible sans l’utilisation de technologies d’assistance, par exemple, un simple contrôleur tel qu’un curseur peut être ajouté au site Web pour augmenter ou diminuer la taille du texte. Cette fonctionnalité doit être accessible sur tous les appareils, par ex, mobile, ordinateur de bureau, tablette, etc.

Espacement du texte : le rendre relatif à la taille de la police

La norme WCAG 2.1 comporte les recommandations suivantes pour l’espacement du texte :

• L’espacement des lignes doit être fixé à au moins 1,5 fois la taille de la police.
• L’espace après un paragraphe doit être au moins 2 fois la taille de la police.
• L’espacement entre les lettres doit être d’au moins 0,2 fois la taille de la police.
• L’espacement entre les mots doit être d’au moins 0,16 fois la taille de la police.

La largeur des lignes : permettre le retournement du texte

Généralement, le nombre de caractères est utilisé comme unité de mesure de la longueur des lignes. Malgré tout handicap, il est plus difficile pour les gens de lire des lignes plus longues que des lignes plus courtes, car les sauts de ligne permettent aux yeux de se reposer. En définitive, la longueur des lignes ne devrait pas dépasser 80 caractères.

Les personnes dont le champ de vision est réduit ont besoin de zones de texte plus étroites, où elles peuvent facilement distinguer la fin d’une ligne et le début de la suivante. Par conséquent, la longueur de la ligne devrait être contrôlable par l’utilisateur. S’ils ajustent la fenêtre d’affichage, les lignes de texte devraient automatiquement s’enrouler et refluer, permettant à l’utilisateur de lire le texte sans défilement horizontal.

Paragraphes : aligner les paragraphes à gauche ou à droite

Tout le contenu Web devrait être structuré et organisé en paragraphes courts, et les longues phrases devraient être évitées. Les paragraphes doivent être soit alignés à gauche, soit alignés à droite. Bien que le texte justifié puisse paraître plus attrayant visuellement, il doit être évité car les espaces supplémentaires à l’intérieur des lignes le rendent inaccessible. Il en va de même pour les styles de paragraphe centrés, qui peuvent rendre difficile pour un lecteur de trouver le début de la ligne suivante.

L’approche sage de la couleur de la police

Une utilisation efficace de la couleur est importante pour transmettre des informations significatives à l’utilisateur. Par exemple, les champs obligatoires dans les formulaires peuvent être marqués par des surlignements de couleur, les erreurs peuvent être affichées en rouge, le texte souligné en bleu indique généralement les hyperliens, et le gris peut être appliqué pour montrer les champs de formulaire handicapés.

Bien que les couleurs augmentent l’attrait esthétique d’une page Web, il faut veiller à tenir compte des personnes ayant une faible perception des couleurs, qui peuvent ne pas être en mesure de distinguer les différences de couleur. WCAG 2.1 stipule que des indices visuels alternatifs doivent être utilisés pour distinguer diverses caractéristiques, en dehors de la seule couleur.

L’utilisation de la couleur est étroitement liée aux rapports de contraste. Il est essentiel d’avoir un bon contraste de couleur pour un texte lisible et accessible. Les points suivants sont importants lorsqu’on envisage des polices accessibles pour les utilisateurs malvoyants :

• Le contraste des couleurs doit permettre de distinguer le texte de premier plan de l’arrière-plan. Il ne doit pas être trop faible ou trop dur.
• La couleur de texte de gris (#777777) sur un fond blanc est le minimum pour le niveau AA des WCAG. Pour les textes plus grands, 52 pour cent de gris (#828282) est acceptable.
• Le texte inversé, qui est une couleur de texte de premier plan claire sur un fond sombre, doit être évité autant que possible car il est plus difficile à lire.

Ratio de contraste : faire en sorte que tout se distingue

Les directives WCAG 2.1 pour le ratio de contraste sont énumérées ci-dessous :

1. 1. Titres : Le rapport de contraste pour les titres de texte et les textes plus grands doit être au minimum de 3:1. Un texte de 18 points ou un texte en gras de 14 points est considéré comme un grand texte et doit répondre à cette exigence.
2. 2. Texte principal : Pour le texte autre que les titres, un rapport de contraste d’au moins 4,5:1 doit être maintenu.
3. 3. Logotype : Le texte qui fait partie d’un logo ou d’une marque n’a pas d’exigence de contraste.
4. 4. Texte accessoire : 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.

Il existe plusieurs façons recommandées de maintenir le rapport de contraste recommandé. Par exemple, si une lettre ou un symbole textuel est plus clair en bas, alors cela peut violer le rapport de contraste de la lettre entière. Dans ce cas, le concepteur peut soit assombrir l’arrière-plan, soit ajouter un fin contour noir à la lettre pour maintenir le rapport de contraste requis. La luminance relative des lettres de premier plan ou de l’arrière-plan peut également être modifiée pour obtenir le résultat souhaité. Les différents outils qui peuvent être utilisés pour vérifier le rapport de contraste sont répertoriés sur le site Web des WCAG

Présentation du texte

A part l’incorporation de polices pour les utilisateurs malvoyants, il est également important de prêter attention à la disposition et à la structure du texte. Lorsqu’il s’agit de la présentation globale du texte sur une page web, il convient de respecter les points clés suivants :

• Les documents doivent être rédigés en utilisant la même police ou le moins de polices possible. Une page contenant plusieurs polices, même s’il s’agit de polices conformes aux normes ADA, est plus difficile à lire.
• Les balises HTML de tête, par exemple <h1>, <h2>, etc. doivent être utilisées pour transmettre la structure et la hiérarchie du document et ne doivent pas être appliquées simplement parce qu’une certaine taille de police était nécessaire pour mettre visuellement en évidence un élément.
• Les textes animés et en mouvement devraient être complètement évités.
• Le contenu textuel devrait être présenté via des données textuelles plutôt qu’avec des images ou des graphiques. Les polices de texte lorsqu’elles sont agrandies ne perdent généralement pas leur lisibilité et conservent leur qualité. Les images de texte ont tendance à présenter le comportement inverse et leur qualité peut se détériorer lorsqu’elles sont agrandies.
• Il faut utiliser la casse des phrases et éviter les petites capitales.
• Le gras et l’italique ne doivent pas être combinés.
• Les blocs de texte avec italique ne sont pas accessibles et sont plus difficiles à lire.
• Évitez de souligner le texte, sauf s’il s’agit d’un lien.

Conclusion

L’élimination des barrières numériques et la fourniture d’une même expérience Internet à tous les individus, avec ou sans handicap, devraient être la priorité absolue de toutes les entreprises et organisations. Pour y parvenir, les WCAG fournissent des recommandations précieuses pour choisir les meilleures polices de caractères pour un site Web, qui rendent un texte lisible à tous les utilisateurs, y compris ceux qui souffrent de basse vision, de dyslexie ou de troubles de la lecture.

Les entreprises ayant peu ou pas d’expérience en matière d’ADA peuvent se tourner vers des experts pour concevoir et créer de nouveaux sites Web ou remédier à leurs sites existants. Être proactif pour assurer l’accessibilité de tous les contenus web et services en ligne permettra d’éviter de lourdes amendes monétaires et des dommages et intérêts.

Il est prudent d’acquérir l’aide d’une équipe de développeurs, de concepteurs et d’ingénieurs qui ont l’expertise et l’expérience du développement de sites web conformes à l’ADA et à la norme 508. Dans le cadre de nos services d’accessibilité web, nous proposons des forfaits complets pour le développement de sites web basés sur les normes WCAG, la remédiation des sites web hérités et la réalisation d’audits réguliers pour garantir l’accessibilité de votre site web.