Créer des ressources accessibles : Typographie

Un texte clair et lisible est essentiel pour un site web accessible. La typographie influe sur la facilité avec laquelle les utilisateurs peuvent lire, comprendre et s’intéresser à votre contenu. Dans cet article, vous apprendrez à choisir des polices accessibles, à définir des tailles et des interlignes appropriés et à structurer le texte pour le rendre plus lisible. Suivez ces conseils pour vous assurer que votre typographie favorise une expérience inclusive pour tous les visiteurs.

Exigences

• Lorsque vous utilisez des langages de balisage qui prennent en charge certaines propriétés de style de texte, le fait d’ajuster ces propriétés comme suit n’entraînera aucune perte de contenu ou de fonction :
  • Réglez la hauteur des lignes (interligne) à au moins 1,5 fois la taille de la police ;
  • Réglez l’espacement entre les paragraphes à au moins 2 fois la taille de la police ;
  • Réglez l’espacement des lettres (suivi) à au moins 0,12 fois la taille de la police ;
  • Réglez l’espacement des mots à au moins 0,16 fois la taille de la police.
• Le texte peut être redimensionné jusqu’à 200 % sans perte de contenu ou de fonctionnalité sans technologie d’assistance.
• La page doit rester fonctionnelle.
• La page doit permettre aux utilisateurs de zoomer sur les appareils mobiles. Les éléments suivants ne sont pas autorisés :
  <meta name="viewport" content="user-scalable=no">.
• Le contenu peut être présenté sans perte d’information ou de fonctionnalité et sans nécessiter de défilement en deux dimensions :
  • Un contenu à défilement vertical d’une largeur équivalente à 320 pixels CSS ;
  • Les contenus à défilement horizontal d’une hauteur équivalente à 256 pixels CSS.
• Fournissez une alternative textuelle pour le contenu informatif généré par CSS et envisagez de définir le texte généré par CSS sur aria-hidden="true".
• N’utilisez pas de texte dans les images si vous pouvez utiliser du texte réel à la place, sauf s’il est essentiel (comme un logo) ou si vous avez besoin de polices, de tailles, de couleurs ou d’arrière-plans spécifiques.
• S’il est nécessaire d’utiliser l’image d’un texte, respectez les règles de couleur et de contraste.
• Le texte doit respecter les règles de couleur et de contraste.

Exceptions

Défilement en deux dimensions

Il est autorisé pour les sections du contenu qui nécessitent une mise en page bidimensionnelle pour la compréhension ou la facilité d’utilisation, par exemple les grands tableaux.

Espacement du texte pour des langues spécifiques

Certaines propriétés de style de texte peuvent ne pas s’appliquer à toutes les langues et à tous les scripts. Par exemple, l’espacement des lettres peut ne pas s’appliquer aux langues utilisant des logogrammes comme le chinois. Toutefois, l’espacement des mots et la hauteur de ligne restent pertinents dans ce cas.

Exemples

	OUI: Lorsque vous utilisez le zoom général dans Chrome, la page ne perd pas sa fonctionnalité et la mise en page reste utile et ininterrompue. L’ordre des éléments reste également inchangé.
	NON: Dans cet exemple, la div contenant le texte est définie en pixels (px), elle ne s’étend donc pas avec le contenu. Si vous définissez la hauteur de la div en fonction de la hauteur de la police en utilisant ’em’ ou si vous ne définissez pas du tout la hauteur de la div, le texte ne débordera pas de la div.