Comment améliorer la lisibilité de vos contenus en ligne ?

« L’accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap. »
(source : DINUM - France)

Sur un site internet, l'accessibilité numérique englobe différents aspects tels que la conception de sites web accessibles et conformes aux normes en vigueur, la compatibilité avec les technologies d’assistance, la facilité de navigation au clavier, la clarté et la lisibilité des informations. 
Imaginez un instant avoir des difficultés pour lire le contenu d'un site web en raison de tailles de texte trop petites, d'une mise en page complexe ou de polices illisibles. C'est malheureusement la réalité pour de nombreuses personnes, en particulier pour celles atteintes de handicaps.

Découvrons comment optimiser la compréhension et la lisibilité de vos contenus numériques.

1. Les règles d’accessibilité en matière de contenus textuels

Les WCAG ou World Content Accessibility Guidelines dictent et inspirent les directives en matière d'accessibilité numérique dans la plupart des pays du monde. En France, c’est le Référentiel Général de l’Amélioration de l'Accessibilité - RGAA, basé sur les WCAG qui fait foi.

Selon les WCAG 2.2, les textes doivent respecter les quelques critères suivants:

- Contrastes (critère de succès 1.4.3 / 1.4.6)
Le rapport de contraste de couleurs idéal entre un texte son arrière-plan doit être d’au moins 7 à l’exception: 

• des textes de grandes taille,
• des textes qui font partie d’un composant d’interface utilisateur inactif, 
• des textes qui font partie d’un logo ou d’un nom de marque.

- Redimensionnement du texte (critère de succès 1.4.4)
La taille du texte doit pouvoir être ajustée par les utilisateurs jusqu'à 200% sans perte de contenu ou de fonctionnalité sans technologie d'assistance. 
Aujourd’hui, les navigateurs les plus récents intègrent la personnalisation de la taille du texte selon la préférence des utilisateurs.

- Présentation visuelle (critères de succès 1.4.8)
Un mécanisme doit être disponible pour permettre aux utilisateurs de modifier les aspects de présentation du contenu en leur permettant de contrôler la couleur et la taille des blocs de texte:

• couleurs de premier plan et d’arrière-plan sélectionnable par l’utilisateur,
• largeur inférieure à 80 caractères,
• texte aligné à gauche,
• texte redimensionnable sans technologie d’assistance jusqu’à 200 %.

L’objectif est de s’assurer que le texte puisse être perçu sans que sa disposition n’interfère avec sa lisibilité. Le mécanisme peut être fourni par le navigateur ou un autre agent utilisateur.

- Espacement du texte (critère de succès 1.4.12)
La possibilité d'ajuster l'espacement entre les caractères contribue à une meilleure lisibilité, garantissant que le contenu soit accessible et compréhensible pour tous les publics.
En voici les points clés:

• entre les lignes : au moins 1,5 fois la taille du texte
• entre les paragraphes : au moins 2 fois la taille du texte
• entre les lettres : au moins 0,12 fois la taille du texte
• entre les mots : au moins 0,16 fois la taille du texte

Autre critère à prendre en compte pour améliorer l’accessibilité des sites internet: le choix des typographies. Les caractéristiques des polices peuvent, en effet, influencer significativement la lisibilité sur les supports numériques.

Mais alors, quelles polices choisir pour vos contenus numériques ?
 

2. Les polices de caractères adaptées au web

Lors de la création ou de la refonte d’un site internet, les choix typographiques contribuent à rendre le contenu en ligne compréhensible par tous, y compris ceux ayant des besoins spécifiques en matière d'accessibilité numérique.
 

Quel type de typographie choisir ?

La typographie est un procédé de composition utilisant des caractères et formes spécifiques regroupé en 5 grandes familles : 
1. SERIF (police à empattement), 
2. SANS SERIF (police sans empattement), 
3. CURSIVE (police d'écriture imitant l'apparence d’une écriture manuscrite),
4. MONOSPACE (police ayant une largeur fixe pour chaque caractère), 
5. DISPLAY (police fantaisie). 

Sur le web, ces typographies se différencient par leurs spécificités et leur lisibilité en ligne:

• Les polices serif se caractérisent par la présence de petites "empattements" ou "serifs" à l'extrémité des traits des lettres (petites lignes horizontales, terminaisons en forme de triangle…). Souvent considérées comme plus traditionnelles, les polices serif sont couramment utilisées dans des contextes formels (impression de livres, journaux, documents académiques…). Les serifs sont censés guider le regard du lecteur le long des lignes de texte, facilitant ainsi la lecture. 
Toutefois, avec leurs empattements, les police serif peuvent perdre en clarté sur les écrans, affectant ainsi la lisibilité, surtout à des tailles réduites.

• Les polices cursive et manuscrite sont conçues pour ressembler aux lettres liées que l'on apprend généralement à écrire à la main.Les polices cursives sont souvent utilisées dans des contextes où l'aspect manuscrit est souhaité, par exemple, dans des invitations, des projets artistiques… 
Or bien que séduisantes d'un point de vue esthétique, elles peuvent présenter des défis de lisibilité, en particulier sur des supports numériques où la clarté des formes de lettres est cruciale.

• De même, les polices display (ou police d'affichage) sont des polices typographiques conçues spécifiquement pour une utilisation à grande taille, (titres, en-têtes, logos, affiches et autres éléments de conception graphique qui nécessitent une forte présence visuelle). Les polices de caractère display sont souvent élaborées et stylisées pour une utilisation décorative.
Elles sont ainsi peu adaptées aux textes courants en raison de leur caractère distinctif pouvant entraîner une fatigue visuelle.

• Les polices sans serif ont des formes de caractères simples et épurées dépourvues d’extensions ornementales. Cela réduit les distractions visuelles et facilite la lecture sur les écrans. Elles sont donc particulièrement adaptées aux environnements numériques.

Étudions en détail les spécificités de ces polices sans serif.
 

Faire le choix des polices sans serif pour vos contenus en ligne

Les polices sans serif se distinguent par leur absence de petites extensions décoratives à la fin des traits des lettres. Cette absence d'empattement confère aux polices sans serif les caractéristiques spécifiques suivantes :

• Clarté des lettres : 
La simplicité des lettres sans serif facilite la distinction entre les caractères, réduisant ainsi le risque de confusion.
> Assurez-vous que la police choisie est accessible à un large public, y compris les personnes malvoyantes. Les polices avec une bonne distinction entre les caractères, comme Open Sans, peuvent améliorer l'accessibilité.
On notera que les personnes atteintes de dyslexie ont besoin d'une police de caractères spécifique. C’est pour cela que la fonctionnalité “Dyslexie” de la solution d'inclusion LISIO-WebEngagé intègre la police “open-dyslexic” pour proposer un affichage sur-mesure des contenus aux personnes dyslexiques.

• Lisibilité à l'écran : 
Les polices sans serif présentent des contours nets et simples et ont donc tendance à être plus lisibles à l'écran. Leurs formes simples et épurées facilitent la reconnaissance des caractères, ce qui est crucial pour les utilisateurs malvoyants ou ayant une vision limitée. À des tailles de texte réduites, les polices sans serif maintiennent leur lisibilité. Cela est particulièrement important sur les appareils mobiles ou d'autres écrans où l'espace est limité.
>  Optez pour des polices qui offrent une excellente lisibilité à l'écran. Les polices sans empattement (sans-serif), telles que Arial, Helvetica, ou Roboto, sont souvent préférées pour le web en raison de leur netteté sur les écrans.

• Compatibilité avec les technologies d'assistance :
Les polices sans serif sont généralement mieux interprétées par les technologies d'assistance telles que les lecteurs d'écran. Leur simplicité permet une identification plus précise des caractères, facilitant la compréhension du contenu pour les utilisateurs ayant des besoins spécifiques dus à un handicap.
> Utilisez des polices largement prises en charge par les navigateurs et les technologies d’assistance pour éviter des problèmes d'affichage. Google Fonts propose une sélection diversifiée de polices bien supportées.

• Modernité et sobriété: 
Les polices sans serif ont souvent une apparence moderne, dynamique et professionnelle. Leur design épuré les rend populaires dans les contextes où une esthétique sobre est recherchée, comme dans le design web, les interfaces utilisateur d'applications et d'autres supports numériques. Elles transmettent une image de clarté et de simplicité, ce qui peut contribuer à une expérience utilisateur positive.
> Pour maintenir une interface sobre et professionnelle, optez pour des polices simples. Les choix les plus populaires incluent Arial, Calibri, et Lato.

En conclusion, nous retiendrons que les polices de caractères à privilégier, en raison de leur accessibilité, de leur lisibilité et de leur prise en charge par les navigateurs, sont les suivantes : Arial, Calibri, Helvetica Neue, Verdana, Open Sans, Roboto, Lato, Segoe (UI), Nunito. 
N'hésitez pas à tester différentes options pour trouver la police qui correspond le mieux à vos objectifs de communication et à la fonctionnalité souhaitée pour votre site.

En respectant les recommandations d'accessibilité des WCAG et en choisissant les polices de caractères sans serif recommandées, optimisez votre site pour améliorer l'expérience en ligne de TOUS vos utilisateurs.
 

3. Rendez votre site web accessible avec LISIO-Web4All

L'accessibilité numérique profite à tous

Comme nous l’avons vu précédemment, le Référentiel Général d'Amélioration de l’accessibilité (RGAA) est le référentiel français de l’accessibilité numérique, aligné sur les Web Content Accessibility Guidelines (WCAG). Il fournit des critères spécifiques et des techniques pour évaluer et garantir l'accessibilité des sites internet aux personnes en situation de handicap. 

Les organismes publics français sont tenus de s’y conformer sous peine de sanctions pour assurer l'accessibilité de leurs espaces numériques.
 
Il est également recommandé aux entreprises privées de suivre ces normes pour garantir 

• une expérience en ligne inclusive, 
• les principes d'égalité d'accès pour tous aux informations et services numériques
• une responsabilité sociale de l’entreprise (démarche Numérique Responsable et/ou RSE).

Rendre votre site internet accessible va au-delà de la simple satisfaction des exigences légales. C’est une décision stratégique qui favorise l'inclusion, améliore l'expérience utilisateur et contribue à une société numérique équitable pour tous.
Un internet accessible et un internet pour tous !

LISIO à vos côtés dans votre démarche d'accessibilité numérique

Chez LISIO, nous mettons notre expertise et notre expérience à votre service, pour vous accompagner dans les différentes phases de votre projet web accessible: 

• Audit RGAA: 
Évaluation de la conformité de votre site web selon les normes d'accessibilité numérique du RGAA. 
À la suite de l'audit, des recommandations vous sont fournies pour remédier aux éventuelles non-conformités et améliorer l'accessibilité de votre site.

• Mise en accessibilité numérique:
Accompagnement visant à rendre votre site internet / e-commerce / intranet / logiciels métier, accessible à un large éventail d'utilisateurs, y compris ceux ayant des incapacités ou des besoins spécifiques.

• Rédaction de contenus accessibles:
Assistance à la création de contenu numérique pour le rendre compréhensible, navigable et utilisable par un large éventail d'individus, y compris ceux ayant des besoins spécifiques liés à des handicaps.

• Sensibilisation et formation au numérique accessible:

- Sensibilisation de vos parties prenantes aux handicaps et à l’accessibilité numérique : atelier de compréhension des enjeux et partage des bonnes pratiques à mettre en œuvre dans votre organisation.
- Formations gestion de projets accessibles:

• pour les développeurs: conception web accessible 
• pour les contributeurs: production de contenus accessibles

Nos experts en accessibilité numérique sont à votre disposition
👉 Demandez une étude personnalisée !

... Et souvenez vous : un internet accessible est un internet pour tous !

Pour aller plus loin, sources:
https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
https://www.w3.org/TR/WCAG20-TECHS/G169.html
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG
https://www.wix.com/studio/blog/font-size#:~:text=The%20default%20font%20size%20in,(e.g.%201%20rem%20%3D%20approx.