1178 sujets

Accessibilité du Web

Taille de caractère et espacement (7.17 du RGAA)

Bonjour,

je me pose pas mal de questions sur l'accessibilité, notamment le point 7.17 du RGAA.

D'abord, question "bête" mais quelle taille de texte pour les paragraphes (en admettant que ca soit du arial) ?

Ensuite... en partant d'une base de 0.875 em (pour faire du arial 14, en gros), mon interligne (line-height) doit-il etre de :
1. 0.875+0.875/2 = 1.3125 em
2. 150%
3. 1.5

Jvous avouerai que je m'arrache les cheuveux... Smiley sweatdrop

Enfin, idem pour l'espace entre 2 paragraphes (qui est 1.5 fois la taille de l'espace interligne), le margin-bottom pour la balise p doit-il être de :
1. 1.3125 + 1.3125/2 = 1.98125 em
2. 150%
3. 1.5

ou alors, "on s'en fout" Smiley biggol

Merci d'avance !
Modifié par Luck (06 Jun 2012 - 17:43)
Administrateur
Bonjour et bienvenue, Smiley smile

Démonstration : http://jsfiddle.net/PhilippeVay/Ww227/2/

Pour l'interligne, les 3 solutions sont - dans ce cas - identiques (j'avais un léger doute pour la valeur en em toutefois).
Utilise 1.5 et tu auras la certitude que ton interligne sera bien de 1.5 Smiley smile
La doc de CSS2.1 http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height a un exemple et une Note (en vert) assez clairs.

Pour la marge basse, une valeur sans unité (dernier exemple) n'est pas valide (tu peux toujours chercher avec Firebug ...).
150% ça va être par rapport à la hauteur de je ne sais quel conteneur (ça a l'air d'être le viewport ici mais comme il y a une iframe, etc j'en suis pas sûr Smiley confused - et je n'ai mis que 15% sinon ça sort de l'écran). "Width: 100%;" (ou height) c'est toute la largeur d'un conteneur, aucun rapport avec sa taille de texte Smiley cligne
Pour margin-bottom tu peux donc travailler en em : il faut autant d'espacement vertical que d'interligne donc 1.5em ou 24px si la taille de texte est de 16px / les 1em par défaut de tous les navigateurs connus. Regarde avec Firebug dans l'onglet HTML, à droite l'onglet Calculé pour line-height et margin-bottom : http://jsfiddle.net/PhilippeVay/qsxHg/ Les 2 valeurs sont de 24px (1em = 16px ici)
Intéressant Smiley smile

Donc si je veux une police de texte (relative) de 14, avec un interligne de 150% la taille de ma police 14 et une marge entre 2 paragraphes de 150% la taille de l'interligne (comme stipulé dans la 7.17 du RGAA), si je fais ca, j'ai bon ?? Smiley help 


body{
    font-size: 100%;
    line-height: 1.5;
}

p{
    font-size: 0.875em;
    margin-bottom: 1.5em;
}


Merci en tout cas de la réponse !
Modifié par Luck (07 Jun 2012 - 11:09)
Modérateur
Techniquement oui. Après cette recommandation n'est pas de celles les plus intelligentes. En effet les problèmes varient selon la police utilisée, de la taille de la police, de la largeur de colonne et de pas mal d'autres facteurs. 150% peut être trop espacé suivant les cas, gênant ainsi la lisibilité du texte. Le problème étant qu'il est dur de faire des recommandation sur des problèmes se réglant au cas par cas. Heureusement, les pdfs du RGAA ne sont pas avec un interlignage très élevé comme pour le web, mais très faible (entre 1 et 1.12 à vue de nez): http://references.modernisation.gouv.fr/sites/default/files/RGAA_v2.2.1.pdf

(bon c'était pour ma minute anti-règles à la m. qui ne prônent pas la qualité mais la moyennicité)

Sinon, 1.5 est tout de même dans presque tous les cas mieux que 1.1 ou 1.2
Administrateur
Luck > oui

kustolovic a écrit :
(bon c'était pour ma minute anti-règles à la m. qui ne prônent pas la qualité mais la moyennicité)

WCAG et RGAA demandent un minimum, rien n'empêche personne de faire mieux. Smiley cligne
Il y a autant de qualité web que leurs co-auteurs ont pu en coller dans le RGAA tant que ça restait de l'accessibilité du web (parce qu'au bout d'un moment ça devient de l'ergonomie qui elle concerne tout le monde ou de la qualité web que ces co-auteurs connaissent aussi trèèèès bien)
Merci encore pour vos réponses,

heu pour la taille de police j'arrive pas à me décider Smiley confus ... Si je prends l'exemple du arial pour le texte, la taille "RGAA" c'est plutot du 14px ou du 12px ? (évidement à retranscrire en relatif Smiley cligne )

Pour les espaces entre paragraphes, ca fait un peu bizarre sur les listes à puces qui se trouvent du coup tres basse... du coup si je mets un margin-top négatif c'est "grave" ?

body{
    font-size: 100%;
    line-height: 1.5;
}

p{
    font-size: 0.875em;
    margin-bottom: 1.5em;
}

ul{
    font-size: 0.875em;
    margin-bottom: 1.5em;
    margin-top: -1em;
}


Apres quand je vois sur http://references.modernisation.gouv.fr/rgaa-accessibilite que mon firebug indique une police du body en pixel et non en relatif, que les marges entre paragraphe font 1em et non 150% de l'interligne, vous trouvez ca normal ? Smiley confused

Felipe a écrit :

Pour margin-bottom : il faut autant d'espacement vertical que d'interligne donc 1.5em

Heu y'a écrit ca dans le RGAA
RGAA a écrit :
La valeur de l’espacement entre les paragraphes est supérieure à 1,5 fois la taille de l’espacement entre les lignes

Smiley sweatdrop
Modifié par Luck (08 Jun 2012 - 11:21)
Modérateur
Effectivement, cela fait avec 1.5 d'interligne, un minimum de 2.25 d'espace entre paragraphe. Enfin c'est une supposition, ça dépend ce qu'on entend par "espacement entre paragraphes" c'est le margin du bloc? C'est pas hyper clair.

a écrit :
Apres quand je vois sur http://references.modernisation.gouv.fr/rgaa-accessibilite que mon firebug indique une police du body en pixel et non en relatif, que les marges entre paragraphe font 1em et non 150% de l'interligne, vous trouvez ca normal ?

Non, je trouve cela caractéristique.

@felipe Voici quelques mois que je suis une vingtaine de personnes en situation de handicap (mal-voyants, traumatismes, dysmorphies, maladies dégénératives diverses, etc.) dans un atelier informatique. Dans toutes ces situations, ergonomie==accessibilité, parce qu'en dehors de cas exceptionnels, ils accèdent au web avec les même outils. Après c'était ma minute anti, RGAA est truffé de bonnes choses et est toujours mieux qu'aucune recommandation.
Sujet clos
Aller à