L’architecture de la page résumé dans le menu accessible.

Une page HTML se doit aujourd’hui de respecter un certain nombre de standard et de norme pour être totalement compatible avec l’ensemble des navigateurs Web. De plus le respect des standard du W3C apporte des améliorations notables. La séparation de la partie métier de la partie client doit être scupuleusement observer de façon à simplifier et optimiser chacun des métiers. Cela permet aussi de pouvoir enfin développer et appronfondir le métier d’intégrateur (encore mal compris aujourd’hui). Nettoyr une page HTML permet de gérer les diférentes couches du FRONT qui souvent sont mélées :

  • Couche sémantique (de quoi par le la page ? titre, hiérarchie et valeur des balises, mots clés, définition)
  • Couche ergonomique (permet un déplacement intuitif dans le site et de trouver ce que l’on cherche)
  • Couche référentielle ( référencement, mots clés, hiérarchie de la page)
  • Couche accessible (rendre une page totalement textuelle et correctement structurer pour les navigateurs textuel)

Une page, du point de vue navigation, est toujours composée

  • d’une partie haute (header)
  • d’une partie dévolue au contenu (content)
  • d’une partie basse (footer)

A laquelle on peut rajouter les fonctions les plus communes :

  • un menu (contextuel, lié à la page)
  • une zone de recherche
  • une navigation globale

Ces éléments définissent la structure de la page. Il résument à eux seul l’architecture générale. Cela est très pratique pour comprendre comment est faite la page et pour y naviguer à l’intérieur tout en la ressituant par rapport à l’ensemble du site (moteur de recherche, navigateur textuel).

On placera donc des ancres dans la page de façon à pouvoir accéder directement à telle ou telle partie de la page ditectement via le menu accessible. Le menu asseccible est rendu invisible (display:none) de façon à n’être perçu que par les robots, moteur et navigateur textuel.

<a name="top"></a> // toujours au plus haut dans la page

<a name="content"></a> // juste à côté du H1 dans la partie contenu

<a name="footer"></a> // 	  dans la partie basse de la page où l'on trouve généralement les pages légales, contact etc..

On reprend ces éléments et on en fait un menu dit accessible qui srevira autant au référencement qu’à l’accessibilité tout en respectant la structure sémantique de la page.

  • Accueil, haut de page (top) <accesskey = « t »>
  • Menu accessible, haut de page (top) <accesskey = « a »>
  • Menu contextuel <accesskey = « m »>
  • Rechercher <accesskey = « s »>
  • Contenu de lapage (content) <accesskey = « c »>
  • Menu de navigation (footer, header c’est selon) <accesskey = « n »>
  • Menu de bas de page (footer) <accesskey = « f »>
&lt;ul class="accessibility"&gt;&lt;a name="accessibility"&gt;&lt;/a&gt;
&lt;li&gt;&lt;a href="#top" accesskey="t"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#accessibility" accesskey="a"&gt;Menu accessible&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#menu1" accesskey="m"&gt;Menu contextuel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#search" accesskey="s"&gt;Rechercher&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#content" accesskey="c"&gt;Contenu de la page&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#navigation" accesskey="n"&gt;Menu de navigation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#menu2" accesskey="f"&gt;Menu de bas de page&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Comment utiliser les accesskey selon le navigateur :

  • IE Windows : Alt et [accesskey], puis Entrée ;
  • Mozilla, Netscape, K-Meleon, FireFox Windows: Alt et [accesskey] ;
  • Opera 7 Windows, Macintosh, Linux : Esc + Shift et [accesskey] ;
  • MSIE Macintosh : Ctrl et [accesskey], puis Entrée ;
  • Safari 1.2 Macintosh : Ctrl et [accesskey] ;
  • Mozilla, Netscape Macintosh : Ctrl et [accesskey] ;
  • Galeon/Mozilla/FireFox Linux : Alt et [accesskey] ;
  • Konqueror 3.3+ : Ctrl, puis [accesskey] (successivement) ;
  • Netscape 4, Camino, Galeon, Konqueror avant la version 3.3.0, Omniweb, Safari avant la version 1.2, Opera Windows/Linux avant la version 7, ne supportent pas les accesskeys.

Liens :