Etape 3 : structuration sémantique des contenus at Accessibilité-www.com - Formation open-source sur l’accessibilité Web

Etape 3 : structuration sémantique des contenus

Le 28 septembre 2006 par stephane.trupheme

La structuration sémantique des contenus se résume à utiliser les bonnes balises XHTML en fonction de la nature du contenu.

Exemple : un paragraphe utilisera la balise “P”, un titre utilisera en fonction de son importance les balises “h1″ à “h6″…

1. Les balises et ressources mises en oeuvre

Entête
- Logo -> A + IMG
- Accroche -> DIV de classe « baseline »
Contenus
- Titre -> H1 + H2
- Accroche -> STRONG
- Textes (« Lorem ipsum ») -> P, IMG, A
- Listes à puces -> A + Textes
Pied de page : Texte + A + IMG

Les images suivantes seront utilisées :

logo_rc.gif
xhtml10.png
css.png
wai-aaa.gif
visuel_aujourdhui.jpg (page d’accueil uniquement)
visuel_lundi.jpg (ibid.)
visuel_mardi.jpg (ibid.)
visuel_mercredi.jpg (ibid.)
visuel_jeudi.jpg (ibid.)
visuel_vendredi.jpg (ibid.)

NB : Le bloc de droite de la page d’accueil commence par une image puis un titre.

Dans le flux HTML, l’image doit se trouver après le titre, car elle appartient au contenu que celui-ci précède. Le titre H1 devra donc utiliser un sélecteur "float : right ;" dans la CSS.
La juxtaposition de deux éléments de types « inline » les fait flotter côte à côte. La balise STRONG est de type « inline » ; elle sera portée en type "block" par CSS.

Le contenu de la page intérieure se compose dans un premier temps de texte seul.

Les formulaires sont abordés plus loin dans ce support.

2. Apport des contenus de test (page d’accueil)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ratatouille &amp; Compagnie - Accueil</title>
      <style type="text/css">
      body{background:White;}
      </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <a href="/"><img src="./logo_rc.gif"></a>
        <div class="baseline">Mettez du soleil dans votre assiette</div>
         <div id="upperNavigation">
            <ul>
               <li><a href="#">Politique d'accessibilit&#233;</a></li>
               <li><a href="#">Plan du site</a></li>
               <li><a href="#">Rechercher</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
         </div>
          <div id="fastNavigation">
            <ul>
                <li><a href="#content">Aller au contenu</a></li>
                <li><a href="#primaryNavigation">Aller au menu principal</a></li>
                <li><a href="#footer">Aller au pied de page</a></li>
            </ul>
          </div>
      </div>
      <div id="primaryNavigation">
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Recettes</a></li>
          <li><a href="#">Menus</a></li>
          <li><a href="#">Découvrir</a></li>
          <li><a href="#">Marché</a></li>
        </ul>
      </div>
      <div id="content" class="home">
        <div id="homeLeft">
          <h1>Aujourd'hui...</h1>
          <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong>
          <h2>Lorem ipsum</h2>
          <ul>
             <li><a href="#">Lorem ipsum</a></li>
             <li><a href="#">Dolor sit amet</a></li>
             <li><a href="#">Onsectetur adipisicing elit</a></li>
             <li><a href="#">Sed do eiusmod</a></li>
          </ul>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>
            <a href="#"><img src="./visuel_aujourdhui.jpg"> Lire la recette</a>
          </p>
        </div>
        <div id="homeMiddle">
          <h1>Recettes de printemps</h1>
          <ul>
             <li><a href="#">Lorem ipsum</a></li>
             <li><a href="#">Dolor sit amet</a></li>
             <li><a href="#">Onsectetur adipisicing elit</a></li>
             <li><a href="#">Sed do eiusmod</a></li>
             <li><a href="#">Empor incididunt</a></li>
             <li><a href="#">Ut labore et dolore</a></li>
          </ul>
        </div>
        <div id="homeRight">
          <h1>A découvrir...</h1>
          <img src="./visuel_decouvrir.jpg" alt="Découvrir : le piment">
          <strong>Suspendisse vitae nisl. Duis felis id nec turpis, tempus id, tincidunt eget, gravida nec, diam.</strong>
          <h2><a href="#">Le piment</a></h2>
          <p>Vivamus at lorem. Donec mattis hendrerit odio. Etiam semper arcu non leo. Integer hendrerit orci quis sapien.</p>
          <p><a href="#" title="Voir tous les dossiers">Tous les dossiers "A découvrir" </a></p>
        </div>
        <div id="homeBottom">
          <h1>Marché de la semaine</h1>
          <ol>
             <li>
               <h1>Lundi</h1>
               <p>
                 <a href="#">Lorem ipsum</a><br><img src="./visuel_lundi.jpg">
               </p>
            </li>
             <li>
               <h1>Mardi</h1>
               <p><a href="#">Lorem ipsum</a><br><img src="./visuel_mardi.jpg"></p>
             </li>
             <li>
               <h1>Mercredi</h1>
               <p><a href="#">Lorem ipsum</a><br><img src="./visuel_mercredi.jpg"></p>
             </li>
             <li>
               <h1>Jeudi</h1>
               <p><a href="#">Lorem ipsum</a><br><img src="./visuel_jeudi.jpg"></p>
             </li>
             <li>
               <h1>Vendredi</h1>
               <p><a href="#">Lorem ipsum</a><br><img src="./visuel_vendredi.jpg"></p>
            </li>
          </ol>
        </div>
      </div>
      <div id="footer">
        <ul>
          <li>Copyright 2006</li>
          <li><a href="#">Données personnelles</a></li>
          <li><a href="#">Mentions légales</a></li>
        </ul>
      </div>
      <div id="colophon">
        <ul>
          <li><a href="#"><img src="xhtml10.png"></a></li>
          <li><a href="#"><img src="css.png"></a></li>
          <li><a href="#"><img src="wai-aaa.gif"></a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Aperçu des contenus

Aperçu de la page d'accueil

3. Apport des contenus de test (page intérieure)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ratatouille &amp; Compagnie - Page int&eacute;rieure</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <a href="/"><img src="./logo_rc.gif"></a>
        <div class="baseline">Mettez du soleil dans votre assiette</div>
         <div id="upperNavigation">
            <ul>
               <li><a href="#">Politique d'accessibilit&#233;</a></li>
               <li><a href="#">Plan du site</a></li>
               <li><a href="#">Rechercher</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
         </div>
          <div id="fastNavigation">
            <ul>
                <li><a href="#content">Aller au contenu</a></li>
                <li><a href="#primaryNavigation">Aller au menu principal</a></li>
                <li><a href="#footer">Aller au pied de page</a></li>
            </ul>
          </div>
      </div>
      <div id="primaryNavigation">
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Recettes</a></li>
          <li><a href="#">Menus</a></li>
          <li><a href="#">Découvrir</a></li>
          <li><a href="#">Marché</a></li>
        </ul>
      </div>
      <div id=" main">
        <div id="secondaryNavigation">
           <ul>
             <li><a href="#">Les entrées</a></li>
             <li><a href="#">Les plats</a></li>
             <li><a href="#">Les desserts</a></li>
           </ul>
         </div>
         <div id="content">
           <h1>Titre de la page</h1>
           […] Suite du contenu. Sa structure est conditionnée par sa nature (texte structuré, tableau(x), formulaire(s), etc. […]
         </div>
      </div>
      <div id="footer">
        <ul>
          <li>Copyright 2006</li>
          <li><a href="#">Données personnelles</a></li>
          <li><a href="#">Mentions légales</a></li>
        </ul>
      </div>
      <div id="colophon">
        <ul>
          <li><a href="#"><img src="./xhtml10.png"></a></li>
          <li><a href="#"><img src="./css.png"></a></li>
          <li><a href="#"><img src="./wai-aaa.gif"></a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Aperçu des contenus

Aperçu de la page intérieure

4. Validation du code des squelettes

La validation du code sur le validateur W3C montre des erreurs. Ces dernières sont provoquées par les caractère accentués.

Ceci vient du fait qu’aucune déclaration d’encodage n’a été spécifiée. Par défaut, le validateur appliquera un jeu de caractères UTF-8. Les éléments de contenu présents dans les pages contiennent des caractères accentués qui ne correspondent pas au jeu de caractères UTF-8.

Hors, l’utilisation d’une déclaraton d’encodage est vitale pour l’accessibilité.

5. Utilisation d’une déclaration d’encodage

Ils existent :

Trois « charsets » :
- Latin 0 (western latin) iso-8859-1
- Latin 9 (western latin) iso-8859-15
- Unicode (universel) UTF-8, UTF-16 ou UTF-32
Un type de déclaration pour le HTML, par balise meta : <meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1">
Deux types de déclaration pour le XHTML
- Dans la balise de contrôle xml : <?xml version="1.0" encoding="iso-8859-1"?>
- Par les balises meta : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Quel encodage utiliser ?

Bien que l’ISO-8859-1 ait longtemps constitué la norme, il s’est avéré utile de l’augmenter de quelques caractères –dont l’euro €. Ceci a abouti au charset ISO-8859-15. Se reporter à l’article de la Wikipedia traitant du sujet pour plus d’information : http://fr.wikipedia.org/wiki/ISO_8859-15. Le charset ISO-8859-1 ne devrait plus être utilisé.

L’UTF-8 possède plus de caractères et est plus portable. Se reporter à l’article de la Wikipedia traitant du sujet pour plus d’information : http://fr.wikipedia.org/wiki/UTF-8.

Dans un contexte européen, il est possible d’utiliser l’un ou l’autre.

Pour les besoins de la formation, nous utilisons un encodage UTF-8.

Quelle déclaration utiliser ?

Si le doctype choisi correspond au XHTML Strict, il ne faut pas utiliser la déclaration XML afin d’éviter le passage en « quirks mode ».

Dans la suite de ce document, nous utilisons une balise META :

6. Utilisation des entités

Il convient de ne pas utiliser les caractères étendus tels quels, mais sous forme d’entités.

Deux codifications sont communément utilisées pour les entités :

Entités mnémoniques (« & » + [code mnémonique, comme « eacute »] + « ; »)
Entités numériques (« & » + « # » + [3 chiffres ou plus] + « ; »)

Pour en savoir plus :

http://www.w3schools.com/tags/ref_entities.asp
http://www.w3.org/TR/html401/sgml/entities.html (moins lisible)
http://www.w3.org/People/mimasa/test/xhtml/entities/entities.xml (Pour tester le support des entités dans un navigateur)

7. Fermetures obligatoires des balises en XHTML

En XHTML, toute balise doit être correctement fermée. C’est également le cas des balises “vides”, comme les balises IMG et META qui sont utilisées dans les maquettes. La fermeture de ces balises est obtenue par un “/” avant le chevron de fin, précédé d’un espace.

Exemples :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<br />

Liste des balises “vides”, aussi dénommées “auto-fermantes” du XHTML (source : http://localhost/_DOC.w3.html401/index/elements.html) :

AREA : client-side image map area
BASE : document base URI
BR : forced line break
COL : table column
HR : horizontal rule
IMG : Embedded image
INPUT : form control
LINK : a media-independent link
META : generic metainformation
PARAM : named property value

La balise FRAME ne doit pas être utilisée lors de la construction d’un site accessible ; elle est citée ici pour mémoire : “FRAME : subwindow”.

8. Apport de textes alternatifs sur les images

Chaque ressource graphique doit disposer d’un texte alternatif. Au-delà de la problématique d’accessibilité (ce texte alternatif est la seule information perçue par les non voyants et les robots des moteurs de recherche), ce texte sert si la ressource graphique ne peut pas s’afficher sur la page (lien brisé, format d’image inconnu ou corrompu, perte de la connexion, etc.).

Dans la liste qui suit, les fragments “[intitulé de la recette]” sont à remplacer par le texte définitif.

<img src="./logo_rc.gif"" alt="Logo Ratatouille &amp; Compagnie" />
<img src="./visuel_aujourdhui.jpg" alt="Aujourd’hui : [intitulé de la recette]" />
<img src="./visuel_lundi.jpg" alt="Lundi : [intitulé de la recette]" />
<img src="./visuel_lundi.jpg" alt="Mardi : [intitulé de la recette]" />
<img src="./visuel_lundi.jpg" alt="Mercredi : [intitulé de la recette]" />
<img src="./visuel_lundi.jpg" alt="Jeudi : [intitulé de la recette]" />
<img src="./visuel_lundi.jpg" alt="Vendredi : [intitulé de la recette]" />
<img src="./xhtml10.png" alt="XHTML 1.0 valide" />
<img src="./css.png" alt="CSS valide" />
<img src="./wai-aaa.gif" alt="Accessibilit&#233; WAI AAA" />

9. Validation du code

Après apport des modifications, les deux pages présentent un code XHTML valide. La présence du logo « XHTML 1.0 » est alors justifiée dans le pied de page de chacune des maquettes.

Validation du code W3C

Ce logo doit être présent sur chaque page et porter un lien qui déclenche une tentative de validation automatique.

Dans la pratique, il est préférable de lier ce logo à la page “A propos de ce site”. Sur cette page, le rédacteur avisera l’internaute que “Ce site a été conçu dans le respect des standards […] Néanmoins, si vous constatiez une erreur, merci de nous contacter par mail à l’adresse webmaster[@]monsite.fr […]”.

(3 votes, note : 2.67 sur 5)

Loading ...

Tags : balises xhtml, charset, déclaration dencodage, iso 8859 1, sémantique, utf8.

Bookmarkez cet article :

Imprimer cette page Recommander cet article !

1 Réponse to “Etape 3 : structuration sémantique des contenus”

Flux RSS pour cet article Lien Trackback

1 Clement fév 5th, 2007 at 17:09

Sympa, mais il manque l’étape 4 avec l’ajout des images dans le site maintenant ….

Laisser un commentaire

Les Etapes de la Formation

Commentaires Récents
- w3cvalidation: Nice information, I really appreciate the way you presented.
- Chris: Bonjour, Je remarque que le tutoriel " tatatouille et Cie" date de décembre 2007. Va t-il y avoir la suite ?...
- Clement: Sympa, mais il manque l'étape 4 avec l'ajout des images dans le site maintenant ....

Lectures

Sondage
Ce blog vous paraît-il :
- Très utile
- Utile
- Peu utile
- Inutile
Voir les résultats
Loading ...

$Accessibilité-Web.com : Formation open-source sur l\’accessibilité Web$

Recherche