Plongez dans l'accessibilité

Jour 26: Utilisez des tailles de police relatives

les sites Web à quelques exceptions près ont un contenu principalement texte. Nouvelles, opinions, pensées, idées, histoires, écrits originaux, commerce électronique : que des mots. La conception visuelle et les images sont importantes, sans aucun doute, mais si les utilisateurs ne peuvent pas lire vos mots, cela ne mène nulle part !

Pendant l'automne 2000, Jeffrey Zeldman a dit qu'utiliser des tailles de police relatives était impossible ("pixels, mon ange... ou rien du tout") à cause d'une variété insurmontable de défauts des navigateurs depuis Netscape 4 jusqu'aux navigateurs les plus modernes. Depuis, Netscape ne fait toujours pas mieux et le problème est toujours là, mais au moins nous avons appris une chose ou deux pour dompter les navigateurs et rendre la taille des polices relatives, une réalité. (Zeldman aussi ; Le Web Standards Project récemment redémarré utilise la technique décrite plus bas.)

Utilisez des tailles de police relatives dans les navigateurs qui peuvent les gérer et les tailles de police absolues dans Netscape 4 qui ne les supportent pas de façon sure. Vous pouvez faire cela même si vous n'utilisez pas plusieurs feuilles de style. Dans une minute, je donnerai des solutions de copier/coller pour les gabarits de Movable Type et pour tous les thèmes par défaut de Radio. Et une explication un peu longue sur la technique elle-même pour vous aider à l'implémenter dans d'autres gabarits.

Qui en bénéficie ?

1. Liliane en bénéficie. Liliane a des difficultés à voir les pages Web clairement, en raison de son grand age. Comme 80% de la population Internet, elle utilise Internet Explorer pour Windows qui ne supporte pas le redimensionnement du texte à moins que le concepteur Web spécifie exclusivement des tailles de police relatives. Liliane a changé la taille par défaut du texte dans son navigateur (dans le menu "View", "Taille de la police"), mais cela n'arrange strictement rien sur les sites qui utilisent des tailles de police relatives. Ceci inclue virtuellement tous les gabarits de weblog. Par exemple, voilà à quoi ressemble le gabarit par défaut Movable Type pour Liliane :

   

   Si le gabarit utilise des tailles de police relatives, il ressemblera exactement au même pour la majorité des lecteurs qui n'ont pas besoin ou ne se préoccupe pas du changement de la taille de la police. Mais voilà à quoi cela ressemblera pour Liliane :

   

   Encore une fois : Si les utilisateurs ne peuvent pas vous lire, quel est l'intérêt ?

Comment le réaliser : Radio

Dans le gabarit de votre page d'accueil, avez vous regardé dans la section <style> plutôt en haut pour une règle CSS qui ressemble à ceci :

body, td, th, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

Conservez le tel quelmais ajoutez ceci juste après :

/*/*/a{}
body,
body td,
body th,
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body,
html>body td,
html>body th
html>body p {
  font-size: small;
}
/* */

Soyez certains d'inclure les commentaires au début et à la fin. Ils sont la clés de tout, comme expliqué plus bas.

Comment le réaliser : Movable Type

Le gabarit par défaut de Movable Type est plus complexe que ceux de Radio mais nous allons réaliser la même chose, juste plus souvent. Dans votre gabarit de feuille de style (styles-site.css), ajoutez ceci à la fin :

/*/*/a{}
body,
body a,
body .calendar,
body .calendarhead,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-post,
body .posted {
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small;
}
html>body,
html>body a,
html>body .calendar,
html>body .calendarhead,
html>body .title,
html>body .sidetitle,
html>body .syndicate,
html>body .powered,
html>body .comments-post,
html>body .posted {
  font-size: x-small;
}

body .date {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body .date {
  font-size: small;
}

body #banner {
  font-size: 200%;
}

body .description {
  font-size: 60%;
}

body .blogbody {
  font-size: 110%;
}

body .blogbody,
body .calendar,
body .calendarhead,
body .side,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-body {
  line-height: 128%;
}
/* */

Uns fois de plus, soyez certain d'inclure les commentaires.

Comment le réaliser : explication détaillée

L'idée générale est que nous allons utiliser des mots clés de taille de police. Ceux-ci sont peu utilisés (à cause des vieux navigateurs), mais il ont 3 propriétés intéressantes :

1. Ils ne sont pas combinés. Si vous avez une section principale à la taille 90%, et à l'intérieur de cette publication une section à la taille 90%, certains navigateurs afficheront la publication à 81% (90% x 90%), mais certains l'afficheront à 90%. Avec plus d'un niveau de structure (courant dans les gabarits qui utilisent des tableaux pour la présentation), le texte devient très rapidement illisible lorsque les pourcentages se combinent. Cependant, si votre section principal est de taille small,et la section publication à l'intérieur est de taille small, tous les navigateurs afficheront la section publication avec la taille small.
2. Ils sont redimensionnés correctement dans IE Windows. C'est d'autant plus curieux que small semble être une taille absolue (particulièrement lorsque que l'on pense que small à l'intérieur d'un small est toujours un small, voir plus haut), mais cela marche. Que puis je vous dire ? IE/Win redimensionne le texte balisé avec les balises de taille de police. Je le promets.
3. Ils ne deviennent jamais trop petit. Ce réglage de "taille de texte" que Liliane utilise dans Internet Explorer peut être utilisé pour rendre le texte plus petit ou plus grand. De nombreuses personnes avec une bonne vue préferre toujours lire un texte avec un ordre ou deux ordres de grandeur inférieur à la taille normale. Le texte réglé en pourcentage tend à devenir microscopique et flou lorsqu'il est combiné avec le plus petit réglage par défaut du texte. Cependant, le texte réglé avec des mots clés de taille de police reste toujours au minimum à 9px, ce qui est lisible avec n'importe quelle police (si on possède une bonne vue).

Nous allons donc utiliser les mots clés de taille de police pour régler nos tailles élémentaires. Et si nous avons besoin d'un contrôle plus fin que cela, nous utiliserons les pourcentages, mais seulement s'il s'agit d'une feuille et non pas de l'arbre principal (c'est à dire la publication et pas la section principale) afin d'éviter la combinaison des pourcentages et pas trop petit pour éviter le texte devenant microscopique lorsqu'il est combiné avec des réglages utilisateurs de tailles de police par défaut plus petites.

Suit les principes généraux des mots clés des tailles de police :

p {
  font-size: 12px;
}

/*/*/a{}
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
  font-size: small;
}
/* */

Il y a beaucoup de choses impliquées ici, donc soyez attentifs.

1. Tout d'abord nous définissons une taille absolue (12px) pour chaque <p>. Tous les navaigateurs appliquent ce style y compris Netscape 4.
2. Puis nous insérons le commentaire curieux "/*/*/". A cause des erreurs d'implémentation dans Netscape 4, tout ce qui est compris dans ce commentaire et la suite seront ignorés. Tous les styles suivants ne seront appliqués qu'au navigateurs qui ne sont pas du type Netscape 4.
3. Juste après le commentaire curieux, nous insérons une règle vide "a {}". Opera 5 pour Mac est erroné et ignore cette règle (et seulement cette règle). Il applique tout le reste.
4. Nous avons défini un contexte où nous pouvons définir des règles qui s'appliquent dans tous les navigateurs à l'exception de Netscape 4. Maintenant nous pouvons démarrer et définir des tailles de police relatives (que Netscape 4 ne peut pas comprendre). La première que nous faisons ets d'utiliser un sélecteur "body p" pour redéfinir le comportement de la balise p. A cause de la façon dont CSS fonctionne, cela redéfinira le sélecteur p précédent. (En termes techniques, "body p" est un sélecteur plus spécifique que "p".)
5. Nous redéfinissons la taille des caractères de toutes les balises <p> pour être x-small. C'est un mot clé de taille de police que Internet Explorer 5 pour Windows, avec les réglages par défauts, interprêtera en 12px. Cependant, si l'utilisateur change sa "taille de texte" (dans le menu Voir), ce texte sera modifié plus grand ou plus petit dépendant des réglages de l'utilisateur. C'est ce que nous voulons. (Note : Nous avons maintenant défini deux fois la taille des caractères pour IE5/Win, mais c'est acceptable, parce-que le sélecteur le plus spécifique prends toujours avantage et le sélecteur précédent est alors ignoré.)
6. Malheureusement, IE5/Win posssède une erreur d'implémentation avec la taille des polices ; tous les autres navigateurs dans le monde (IE5/Mac, Netscape 6, Mozilla, IE6/Win) traduiront x-small en 10px, et non pas 12px. Heureusement pour nous, IE5/Win a une erreur d'implémentation que nous pouvons exploiter : il vérifie cette règle vocale curieuse et pense par erreur que le sélecteur "body p" au complet est terminé, il ignore donc toutes les lignes jusqu'au "}".
7. Maintenant nous avons défini un contexte où nous pouvons définir des règles qui sont appliquées dans tous les navigateurs à l'exception de IE5/Win (et Netscape 4, qui heureusement ignore toujours toutes ces règles). Nous redéfinissons la taille des caractères à small, ce qui dans les navigateurs non-IE5/Win modernes (les seuls qui comprennent encore) interprêtent correctement le 12px (aux réglages par défaut). Encore une fois, si l'utilisateur règle la "taille du texte" plus grande, le texte aura une taille plus grande ce qui est ce que nous voulons.
8. Mais minute ! Opera 5 a la même erreur d'interprétation que IE5/Win, et donc a été trompé par l'astuce du paramètre vocal, mais il interprête correctement les tailles de police, donc maintenant notre texte apparaîtra trop petit dans Opera 5. Heureusement, Opera 5 implémente un troisième type de sélecteur, "html>body p". (Encore une fois, ceci est "plus spécifique" que "body p", il a donc priorité sur le sélecteur précédent.) IE5/Win ne supporte pas ce type de sélecteur, il va donc simplement l'ignorer, ce que nous voulons (comme nous avons déjà compensé pour son erreur d'implémentation particulière). IE6/Win ne le supporte pas également, mais ce n'est pas un problème, parce-que nous le récupérons avec le "font-size: small" après l'astuce "voice-family: inherit" dans le sélecteur "body p". Tous les autres navigateurs supportent les sélecteurs "html>body", donc pour ceux-ci nous finissons par définir la taille des caractères quatre fois. Encore une fois, ce n'est pas un problème, parce-que le plus spécifique des sélecteurs gagne toujours et le reste est ignoré.
9. Finalement, nous avons un ensemble de commentaires vides : /* */. Cela empêche le parseur Netscape 4 d'écouter à nouveau. Si nous définissions plus de règles après ces commentaires vides, tous les navigateurs (y compris Netscape 4) les appliqueraient.

Pour récapituler :

1. Netscape 4 affiche le texte contenu dans <p> à 12px, peu importe les réglages de l'utilisateur.
2. Internet Explorer 5 pour Windows affiche le texte dans <p> avec la taille x-small, qui sera par défaut à la taille 12px, mais sera plus large si l'utilisateur imposer un réglage de "taille de texte" plus grande dans le menu Voir.
3. Internet Explorer 6 pour Windows affiche le texte dans <p> avec la taille small, à cause de la règle "font-size: small" dans le sélecteur "body p". Cela donne 12px au réglage par défaut, mais plus large si l'utilisateur imposer un réglage de "taille de texte" plus grande dans le menu Voir.
4. Internet Explorer 5 pour Mac, Opera, Netscape 6, Mozilla, et (heureusement) tous les navigateurs futurs afficheront le texte dans <p> à la taille small, à cause de la règle "font-size: small" dans le sélecteur "html>body p". Cela donne 12px pour les réglages par défaut, mais plus large si l'utilisateur utilise la fonctionnalité de Zoom sur le texte.

Approfondir

• Mark Pilgrim: Relative Font Sizing HOWTO. Donne essentiellement la même explication mais la page elle-même est un example de cette technique, vous pouvez donc voir comment cela marche.
• Todd Fahrner: Size Matters: Making Font Size Keywords Work.
• Caio Chassot: Hiding CSS from Netscape 4 without using multiple stylesheets.
• Tantek Çelik: Box Model Hack. How to hide CSS from Internet Explorer 5 for Windows.
• The Web Standards Project also uses font size keywords with the IE5/Win hack, although they use a Javascript-based solution (instead of the inline comment hack) to deal with Netscape 4.
• Owen Briggs: Text Sizing. Screenshots of various relative font sizing techniques across browsers, platforms, and default text size settings.