Line-height

Dans la série l’accessibilité ce n’est pas ce que vous croyez, dites bonjour au line-height !

Je me demande depuis un certain temps pourquoi mes interfaces ne semblent pas assez denses. En creusant les règles concernant le line-height, je me rends compte que c’est un peu plus malin que ce que l’on essaye de me faire croire :)

En fait lorsque l’on regarde les recos WCAG :

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing :
https://www.w3.org/TR/WCAG21/#visual-presentation (1.4.8 visual presentation)
https://www.w3.org/TR/WCAG21/#text-spacing (1.4.12 text spacing)

La subtilité étant dans ce préambule :
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property

et

The intent of this Success Criterion (SC) is to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable. 

finalement

This SC (success criterion) does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author’s content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user’s ability to override the author settings, and to ensure that content thus modified does not break content
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

Donc en gros il n’y pas de règle particulière à suivre sur les espacements MAIS si l’utilisateur ajoute de l’espace entre les lignes, il doit toujours pouvoir avoir accès au contenu !

Du coup dans le RGAA cela se traduit de cette manière :

• Dans chaque page web, le texte reste-t-il lisible lorsque l’affichage est modifié selon ces conditions (hors cas particuliers) ? L’espacement entre les lignes (line-height) est augmenté jusqu’à 1,5 fois la taille de la police ;
• L’espacement suivant les paragraphes (balise <p>) est augmenté jusqu’à 2 fois la taille de la police ;

https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.12

Ce qui est assez loin du résumé ci-dessous qui, s’il est bien sur correct puisqu’il se base sur le scénario le plus accessible, donne une interface désagréable au quotidien :

• L’espacement entre les lignes (line-height) doit être d’au moins 1,5 fois la taille de la police.