1178 sujets

Accessibilité du Web

Bonjour,

Je me tourne vers vous pour une question qui peux paraitre curieuse mais qui me bloque sérieusement dans mon travail et dans les tests du site.

J'ai 2 prestataires, un webdesigner et un intégrateur. Le site est destiné à une collectivité et donc soumis à la règlementation RGAA.

Le webdesigner a fourni le graphisme en spécifiant bien les polices utilisées, leurs tailles (en pt - la précision est importante) et la taille de l'interligne quand il faut la spécifier.
exemple : pour les textes classique, utiliser verdana 13 pt, #000000, line-height : 15 pt

L'intégrateur, quant à lui, à réalisé le site avec la taille des polices en pourcentage et non en pt comme spécifié par le webdesigner.

Alors étant données quelques différences visuelles, quand je spécifie les erreurs à l'intégrateur, il me dit que pour respecter l'accessibilité du web il est obligé d'utiliser des pourcentages et que le webdesigner lui, n'a pas respecté ces règles.

Et évidemment, le webdesigner me dit qu'on ne programme pas en pourcentage généralement et qu'il faut respecter les "pt".

Bref, je ne sais plus qui croire en m'en remet à vous.

y a t il une sorte de table de correspondance entre les "pt" et les "%" ? Je me dis que lorsqu'est spécifié une police en "13pt" peut-être que l'on peut accepter un pourcentage qui donne le même résultat ?

Et est ce que le "pt" empêche l'accessibilité ?

Je ne sais plus qui et quoi croire et vers quelle "règle" me tourner en fait...

J'ai donc vraiment besoin d'être orienté avec vos avis Smiley confus

J'ai hâte de trouver des réponses alors merci d'avance Smiley rolleyes

Chris Smiley confus
Salut,

Le point (pt) est une unité absolue, qui ne permet pas l'agrandissement du texte. C'est pourquoi son usage n'est pas recommandé pour les feuilles de style destinées à l'affichage sur écran et invalide les critères d'accessibilité à ce sujet, notamment le critère 10.4 du référentiel Accessiweb 2.2 et le test 7.14 du RGAA (même si ce dernier restreint, curieusement, son champ d'application aux éléments de formulaire).

Par conséquent, c'est le webdesigner qui aurait besoin d'être sensibilisé à l'accessibilité. Smiley cligne

Quant aux correspondances, il vaut mieux que le webdesigner utilise le pixel dans ses maquettes graphiques, le pixel étant plus facile à convertir en pourcentage ou, mieux, en em (une unité relative davantage utilisée que le pourcentage pour définir la taille de police, même si le pourcentage reste parfaitement valide du point de vue de l'accessibilité). Cela dit, la conversion du pixel en pourcentage ou en em oblige à tenir compte, pour les calculs, de la taille en pixels du plus proche ancêtre à taille définie ; mais, ça, ton intégrateur est sensé le savoir (au pire, il pourra toujours jeter un œil aux styles calculés dans Firebug ou tout autre inspecteur d'élément fourni par son navigateur préféré).
Bonjour Victor,

Merci beaucoup pour ta réponse vraiment instructive.

Le designer a fourni des fichiers psd en pixel pourtant mais des fichiers png avec les spécifications en pt à l'intégrateur. Smiley confus

Mais du coup je n'arrive pas a comprendre comment je peux voir une "correspondance" entre les pt et les pourcentages...

En fait j'aimerais dire à l'intégrateur -qui pour le coup a bien fait -, à la place de 13pt il faut "tant de %",à la place de 15pt il faut "tant de %" et ainsi de suite... Penses tu qu'il y a une solution pour ça ?

à bientôt j'espère

Chris Smiley smile
Administrateur
chris99 a écrit :
Le designer a fourni des fichiers psd en pixel pourtant mais des fichiers png avec les spécifications en pt à l'intégrateur. Smiley confus

Bonjour,

Comme l'a souligné Victor, je crains fort que ce ""webdesigner"" (oui j'ai mis plusieurs guillemets) a plutôt un profil de graphiste print et n'est pas suffisamment sensibilité à l'accessibilité ni même au média Web et à ses particularités.

S'il l'était, je suis persuadé qu'il ne proposerait pas d'unités dédiées au print telles que le point (pt).
Administrateur
Bonjour,

c'est pas plutôt l'affichage de Photoshop et/ou Fireworks qui est mal fichu et en fait il n'y a aucun souci ?
Perso, il m'arrivait régulièrement d'ouvrir un PSD, de voir des tailles de police en pt (ex: 13pt) mais en fait je mettais dans mes règles CSS la même valeur en pixels (ici: font-size: 13px) et résultat, le texte faisait exactement la même hauteur dans une page web que dans le PSD. C'était en pratique 1px=1pt et basta.

La vérification la plus simple est d'ouvrir un PSD avec Photofiltre si on a pas Photoshop, de mesurer la hauteur en pixels des majuscules et minuscules à quelques endroits et de comparer ave la page web (on peut en faire une capture d'écran avec Alt+Impr Ecran à coller via un clic droit dans Photofiltre ou utiliser une extension comme MeasureIt dans Firefox).

Pour les line-height, si c'est 15(même unité), il faut fixer 15/13 = 1.154 (pas besoin d'unité mais ce n'est pas faux de mettre 115.4%). Note : on recommande pour du texte et titres un interlignage de 1.5 minimum.
Modérateur
Felipe a écrit :

c'est pas plutôt l'affichage de Photoshop et/ou Fireworks qui est mal fichu et en fait il n'y a aucun souci ?
Perso, il m'arrivait régulièrement d'ouvrir un PSD, de voir des tailles de police en pt (ex: 13pt) mais en fait je mettais dans mes règles CSS la même valeur en pixels (ici: font-size: 13px) et résultat, le texte faisait exactement la même hauteur dans une page web que dans le PSD. C'était en pratique 1px=1pt et basta.

Pour ce qui est de photoshop, il peut afficher les tailles des textes en points, en pixels ou en millimètres. C'est un réglage de Photoshop, et il n'est pas sauvegardé dans un fichier PSD. Pour un intégrateur il conviendra donc d'effectuer ce réglage sur son photoshop (préférences > unités & règles > textes. Pour bien comprendre comment fonctionne la bête:
– Photoshop convertit 1pt en 1px à 72dpi. Avec une autre résolution la conversion sera bien différente.
– Photoshop est un logiciel qui fonctionne en grille de pixels de base. Autrement dit, à l’interne, les tailles sont stockées en pixels mais peuvent être affichées en points, ce qui fait que changer la résolution de l'image uniquement changera les tailles en points mais pas celles en pixels. Ce qui est une bonne nouvelle pour l’intégrateur, vu que cela permet d’en avoir rien à braire de la résolution.
– En sachant cela, l'affichage des tailles en pixels dans photoshop nous fournit des valeurs solides. Avec firebug, ou un outil similaire on peu consulter la taille générée finale de la police en pixels, et la comparer avec la taille en pixels de Photoshop. Les autres bricoles à base de print screen sont donc inutiles.

Pour en revenir à la question originale, généralement, si j'ai une demande tatillonne sur la taille (en pixels) et que je dois m’y conformer, j'utilise des em pour atteindre ces objectifs, en me basant sur la taille de texte par défaut de 16px, qui sera le cas de la grande majorité de la navigation «desktop»: par exemple:

body {
  font-size: 0.8125em; /** 13px/16px **/
}

Si les specs fournies donnent des tailles en points, je demande toujours la validation de la méthode de transcription en pixels au designer.

Comme Felipe, attention à des hauteurs de lignes trop basses, 1.154 aura de fortes chances d’être trop faibles. Je ne connais pas les RGAA mais les WCAG demandent en effet un interlignage de 1.5 minimum. Dans la pratique 1.5 est une valeur «sécurité» les hauteurs de lignes nécessaires pouvant varier selon différents critères (police, taille, contrastes, etc.). Sans rentrer dans les détails, pour du textes de contenu de base, 1.4 est souvent plus réaliste (valeur utilisée par Alsacréations par exemple). Par contre, 1.154 risque de poser des problèmes de lisibilité évidents.
Modifié par kustolovic (25 Dec 2013 - 01:18)
kustolovic a écrit :
Je ne connais pas les RGAA mais les WCAG demandent en effet un interlignage de 1.5 minimum.

Et encore, au niveau AAA.