Jour 27 : Utilisez de vraies en-têtes

Pensez à votre site Web comme une arborescence. Le niveau supérieur a le nom de votre site. Dans votre page d'accueil, vous listez les entrées pour plusieurs jours. Ainsi le second niveau est donné par la date de vos données : Maride 16 juillet 2002 ou quelquechose de similaire. Pour chaque jour, vous pouvez réaliser plusieurs entrées, qui auront chacune leurs titres. Si c'est le cas, vous aurez un troisième niveau, étiqueté par les titres de vos entrées individuelles.

Il s'git maintenant de baliser votre site web avec une structure avec un mode plan (outline) en utilisant des balises <h1>, <h2>, <h3>. Les lecteurs d'écran dépendent de ces balises pour interpréter la structure de vos pages. Vos pages possèdent une structure, mais sans utiliser les balises adéquates, les lecteurs d'écran ne pourront pas la deviner. Je vous montrerais comment utiliser les CSS pour permettre à vos en-têtes d'être similaires dans les navigateurs visuels quelque soit l'infâme <font> que vous utilisez maintenant.

Qui en bénéficie ?

  1. Jackie en bénéficie. Au moment où Jackie atteint votre page, JAWS annonce que la page a un certain nombre de liens et un certain nombre d'en-têtes. Jackie peut entrer INSERT+F6 pour écouter tous les en-têtes d'une page ou CTRL+INSERT+ENTER pour navigauer rapidement dans votre page rapidement en allant à la prochaine section.
  2. Google en bénéficie. Google apprécie une page bien structurée et indexe les mots clés avec un meilleur classement quand ils apparaissent dans des balises en-têtes réelles. (Encore une raison supplémentaire pour écrire des titres d'entrée plus claire et avec signification)

Comment le réaliser : Movable Type

  1. Définir les styles pour le logo de votre site. Dans votre gabarit de feuille de style (styles-sites.css) ajouter les lignes suivantes :

    h1, h2, h3 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 20px;
  font-weight: normal;
}

/*/*/a{}
h1 {font-size: 100%}
/* */

  2. Définissez votre logo de site dans une balise <h1>. Dans votre 4 gabarits principaux (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), recherchez ceci :

    <div id="banner">
<$MTBlogName$><br />

    Et remplacez avec cela : 

    <div id="banner">
<h1><$MTBlogName$></h1>

  3. Définissez vos entêtes de date dans des balises <h2>. Nous avons déjà une classe définie pour ceux-ci, donc nous ne devrions pas avoir besoin d'effectuer de changements de la feuille de style ; nous allons juste changer la balise. Dans votre 4 gabarits principaux, recherchez : 

    <div class="date">
<$MTEntryDate format="%B %d, %Y"$>
</div>

    Et remplacez par ceci :

    <h2 class="date">
<$MTEntryDate format="%B %d, %Y"$>
</h2>

  4. Define your post titles using <h3> tags. Again, this only involves changing the tag, not the stylesheet. In your 4 major templates, search for this:

    <span class="title"><$MTEntryTitle$></span>

    And replace it with this:

    <h3 class="title"><$MTEntryTitle$></h3>

Comment le réaliser : Radio

  1. Définissez vos style d'en-têtes. Les thèmes par défaut de Radio n'utilisent pas de vraies balises en-têtes, donc nous aurons besoin de définir ces styles nous-même. ( The default Radio themes don't use any real header tags, so we'll need to define these styles ourselves. (Tailor to suit, but these examples should make your page look the same as it used to in visual browsers.)

    Nous allons maintenant commencé en cherchant le gabarit de la page d'accueil afin de trouver "h2 {". Si vous trouvez une règle comme celle-ci, enlevez là ; Ce n'est pas du tout utilisé et cela ira dans le sens de nos modifications :

    h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
    }

  2. OK, ajoutez maintenant ces styles, ailleurs dans la section <style> du gabarit de votre page d'accueil :

    h1, h2 {
  margin: 0;
  padding: 0;
}

h1 {font-size: 24px}
h2 {font-size: 13px}

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

    Notez que nous utilisons des tailles de police relatives pour nos en-têtes dans les navigateurs qui supportent les tailles de police relatives et les tailles de police absolues dans Netscape 4. Cette technique devrait être familière ; nous ferons la même chose demain.

  3. Définissez l'en-tête pour le nom de votre site. Dans le gabarit de votre page d'accueil, recherchez "<%siteName%>" et trouvez la ligne qui ressemble à ceci :

    <font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

    Et changez le pour ceci :

    <h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

  4. Définissez l'en-tête de vos dates. Dans votre gabarit Jour, recherchez "<%longDate%>" et trouvez cette ligne :

    <b><%longDate%></b>

    Et changez là pour ceci :

    <h2><%longDate%></h2>

Approfondir

 
<< Jour 26 : Utilisez des tailles de police relatives  Jour 28 : Expliciter les éléments de formulaire >>  Sommaire