Repères visuels de navigation

L’énorme inconvénient de la représentation linéaire des contenus est d’obliger le visiteur, dans certain cas, à passer par de nombreuses étapes pour revenir à un contenu antérieur. Beez gère les repères visuels de navigation de deux manières. Tout d’abord par le fichier index.php dans lequel la position courante est mentionnée. Beez gère également les repères visuels au niveau des composants et des modules qui contiennent des éléments de formulaire.

14.6.1 Le fichier index.php

Voici un extrait du début du code source de ce fichier :

<ul>
   <li><a href="#content" class="u2">
   <?php echo JText::_(‘Skip to Content’); ?>
   </a></li>
   <li><a href="#mainmenu" class="u2">
   <?php echo JText::_(‘Jump to Main Navigation and Login’); ?>
   </a></li>
   <li><a href="#additional" class="u2">
   <?php echo JText::_(‘Jump to additional Information’); ?>
   </a></li>
 </ul>

Les liens de repères visuels font référence à l’intérieur du document à leur point d’ancrage. Ils sont insérés de façon sémantiquement correcte dans une liste. Les instructions JText servent à la localisation. Elles sont automatiquement traduites dans la langue choisie pour l’interface (revoyez le Chapitre 4).

Avant chaque ancre apparaît un titre dont la position est définie par un style CSS au niveau de la surface d’affichage Viewport. Le titre est normalement caché, mais il est exploité par les appareillages tels que les lecteurs d’écran. Cela facilite grandement la compréhension de la structure du contenu.

<h2 class="unseen">
   <?php echo JText::_(‘ View , Navigation and Search’); ?>
</h2>
...
<a name="mainmenu"></a>

Il est également possible de placer le repère de saut en relation directe avec l’identificateur ID de la balise locale <div>, ce qui est encore plus en adéquation avec la notion de document structuré. Mais il faut tenir compte des logiciels de lecture d’écran plus anciens qui ne savent pas gérer cette approche.

14.6.2 Les liens de saut dans les formulaires

Un utilisateur d’un appareillage de lecture écran valide un formulaire qui n’est pas doté d’une balise de repère de saut. Il arrive au niveau du début de la page et doit tout d’abord faire défiler jusqu’au contenu qui l’intéresse. Pour éviter cela, les formulaires utilisés dans le template Beez définissent des repères permettant de se rendre directement au contenu :

<form action="<?php echo 
JRoute::_( ‘index.php?option=com_search#content’ ) ?>" 
method="post" 
class="search_result<?php echo
 $this->params->get(‘pageclass_sfx’) ?>">