Jour 10 : Présenter votre contenu principal en premier
Un des principaux avantages d'utiliser une présentation basée sur les CSS est qu'il devient très facile de réarranger les éléments dans votre code source HTML sans en affecter la présentation visuelle, de façon à ce que votre contenu principal s'affiche pendant que le reste de la page continue à se charger. Cependant, je suis bien conscient que la plupart des sites webs utilisent toujours des tableaux pour la présentation. Cette astuce est pour vous.
Si vous avez une présentation basée sur les tableaux avec une barre de navigation placée à gauche, celle-ci est alors présentée aux utilisateurs aveugles comme Marc et Jackie avant votre contenu principal. Il n'y a aucune façon de décrire combien ceci est un problème, si ce n'est que vous le voyiez par vous même :
- Example d'une présentation basée sur les tableaux..
- Présentation modifiée, avec le contenu en premier. Ces deux types de présentation devraient être affichés de la même façon dans les navigateurs visuels, mais dans Lynx, la différence est évidente.
- La présentation originale telle qu'affichée par Lynx.
- La présentation modifiée affichée par Lynx. Les contenu principal est affiché en premier et ensuite la barre de navigation.
Vous n'avez pas besoin de refaire votre gabarit depuis zéro pour éviter ce problème. Il y a une technique (relativement) simple, appelé le "truc pour tableau" qui permet de présenter votre contenu principal en premier tout en laissant votre barre de navigation sur le côté gauche.
Qui en bénéficie ?
- Marc en bénéficie. Tel que montré dans les exemples précédents, Lynx affiche le contenu dans l'ordre dans lequel il apparaît dans le code source HTML. Ce qui fait que Marc doit faire défiler toute la barre de navigation à chaque fois qu'il visite votre page. Le défilement est chiant.
- Jackie en bénéficie. JAWS, tout comme Lynx, présente le contenu dans l'ordre dans lequel il apparaît le code source HTML, non pas l'ordre d'affichage à l'écran. Avec JAW, le problème est plus important, parce-que Jackie doit attendre que JAWS ait lu tout le contenu de la barre de navigation avant de pouvoir écouter le vrai contenu et il n'existe aucun moyen sur de sauter directement au contenu voulu. (Nous parlerons de ce problème lundi prochain)
- Google en bénéficie. Google donne plus de poids au contenu qui se trouve au début de la page. Il s'agit du début du code source HTML de votre, non pas le contenu visuel du haut de votre page. En fait, la plupart des personnes qui connaissent ce truc font partie du milieu de l'optimisation des moteurs de recherche ; pour eux les bénéfices de l'accessibilité sont secondaires.
Comment le réaliser ?
Regardez votre site avec le visualisateur Lynx et regardez de quoi ont l'air vos publications quotidiennes, précédant votre barre de navigation. Les gabarites par défaut de Movable Type font les choses correctement ; Si vous utilisez le gabarit par défaut ou quelque chose de très proche, vous n'aurez probablement rien à changer. Mais regardez tout de même votre site avec les visualisateur Lynx, car il vous permettra de comprendre un peu mieux les problèmes potentiels.
Si vous utilisez un des gabarits par défaut de Radio, vous pouvez avoir besoin d'ajuster vos tableaux pour y mettre le contenu principal en premier. Il n'y a pas de manière directe de le faire ; Vous allez devoir explorer votre gabarit et comprendre la structure en tableau. L'exemple de présentation et l'exemple de présentation modifiée montre la technique élémentaire.
Instead of the obvious table layout:
<table> <tr> <td valign="top" align="left" width="25%"> ... barre de navigation ... </td> <td valign="top" align="left"> ... contenu principal ... </td> </tr> </table>
Nous pouvons faire cela à la place :
<table> <tr> <!-- GIF d'espacement in upper-left cell --> <td><img src="/images/1.gif" width="1" height="1" alt=""></td> <!-- Contenu principal dans la premiere cellule, avec rowspan="2" --> <td valign="top" align="left" rowspan="2"> ... contenu principal ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... barre de navigation ... </td> </tr> </table>
Approfondir
- Lynx Viewer.
- A Promotion Guide: The Table Trick.