Version complète: sur le forum Webmaster Hub : A quoi servent ces liens en debut de page en CSS
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
HexCore
dans spip, et certains sites en CSS, on voit ce code (ou se rapprochant de celui la) :

CODE
<div id="accessibilite" title="">
    <ul>
 <li><a href="#recherche" title="">Aller &agrave; la recherche</a></li>
 <li><a href="#navigation" title="">Aller au menu de navigation</a></li>
 <li><a href="#contenu" title="">Aller au texte</a></li>
    </ul>

</div>


A quoi ca sert de mettre des liens interne envoyant vers les parties recherches, parties menu ou autres (avec le css, c'est souvent invisible, mais si on enleve la feuille, on voit les liens ...

Merci de votre explication smile.gif
Nico.
Nudrema
Comme le suggère l'id="accessibilite", il s'agit d'un menu... d'accessibilité. Il sert lors de la navigation en mode texte ou bien au clavier, et permet de ne pas devoir parcourir l'entièreté de la page mais de sauter directement à ce qui nous intéresse dans la page.
20cent
Ces liens sont là essentiellement pour aider à la navigation les personnes atteintes d'un handicap.

Ainsi si tu ne peux utiliser de souris, si tu es non-voyant et que tu navigues avec l'aide d'un navigateur vocal ou si tu utilises simplement un navigateur texte, il est bien plus commode de s'y retrouver. En effet les informations sont présentés ainsi de manière linéaire et il est souvent rébarbatif de ne pas pouvoir passer certaines parties.

Pour ma part, j'ai fais l'expérience du navigateur vocal et du navigateur texte : c'est très révélateur et très facile à mettre en place pour se faire une meilleure idée.

Bienvenue dans le monde de l'accessibilité ! B)
ste
CITATION(HexCore @ lundi 14 juin 2004, 14:12)
dans spip, et certains sites en CSS, on voit ce code (ou se rapprochant de celui la) :

CODE
<div id="accessibilite" title="">
    <ul>
 <li><a href="#recherche" title="">Aller &agrave; la recherche</a></li>
 <li><a href="#navigation" title="">Aller au menu de navigation</a></li>
 <li><a href="#contenu" title="">Aller au texte</a></li>
    </ul>

</div>


A quoi ca sert de mettre des liens interne envoyant vers les parties recherches, parties menu ou autres (avec le css, c'est souvent invisible, mais si on enleve la feuille, on voit les liens ...

Merci de votre explication smile.gif
Nico.

C'est ce qu'on appelle le menu d'accessibilité...
C'est un menu, dit de contournement ; autrement dit, il permet d'aller directement là où l'on veut dans la page, aux élèments ciblés correspondant.
Cette "astuce", en accessibilité web, existe pour permettre de naviguer plus rapidement, avec les navigateurs web non graphiques (dits textuels), avec les navigateurs web d'assistance à public handicapé technique ou physique... bien évidement, c'est viable pour les navigateurs web graphique, aussi !

Il permet donc le choix dès le début de page d'aller soit sur le contenu de texte, soit au menu, soit (dans ce cas...) sur le formulaire 'Recherche'. Pour être correct, il lui faut les attributs 'accesskey' et 'tabindex' intégrés dans l'élément 'a'.

En espérant avoir été clair wink.gif biggrin.gif
ams51
Le Hub : le forum de l'accessibilité wink.gif
HexCore
CITATION(ste @ lundi 14 juin 2004, 13:35)
C'est ce qu'on appelle le menu d'accessibilité...
C'est un menu, dit de contournement ; autrement dit, il permet d'aller directement là où l'on veut dans la page, aux élèments ciblés correspondant.
Cette "astuce", en accessibilité web, existe pour permettre de naviguer plus rapidement, avec les navigateurs web non graphiques (dits textuels), avec les navigateurs web d'assistance à public handicapé technique ou physique... bien évidement, c'est viable pour les navigateurs web graphique, aussi !

Il permet donc le choix dès le début de page d'aller soit sur le contenu de texte, soit au menu, soit (dans ce cas...) sur le formulaire 'Recherche'. Pour être correct, il lui faut les attributs 'accesskey' et 'tabindex' intégrés dans l'élément 'a'.

En espérant avoir été clair wink.gif biggrin.gif

merci de vos réponses a tous smile.gif

je donne la palme de la meilleure réponse à ste, mais la concurrence était rude :up:

Hop, me voila avec un bo site accessible maintenant !
20cent
CITATION(HexCore @ lundi 14 juin 2004, 14:58)
Hop, me voila avec un bo site accessible maintenant !

Tu vas vite en besogne on dirait ! tongue.gif
Voici quelques adresses de validateurs qui te permettront peut-être de mieux appréhender tout ce que le terme accessibilité sous-entend :Et ce n'est qu'un début... Mais promis, le jeu en vaut la chandelle ! thumbup.gif
Denis
J'ajouterai également que ces menus valent de l'or lorsqu'on utilise le Web sur un cellulaire... avoir ces liens qui permettent de littéralement sauter par-dessus des tonnes de contenus pour tomber directement sur les noeuds importants pour la navigation, ça fait économiser un temps fou.

Enfin, pour ce qui est d'avoir maintenant un site accessible, j'ai trouvé ça pas mal cute... Nous allons devoir avoir quelques petits entretiens tout le monde ensemble. Mais si la chose t'intéresse (et si les liens vers les validateurs ne t'ont pas déjà achevé), je t'invite fortement à consulter ce document qui constitue une excellente entrée en matière pour l'accessibilité. À partir de ces premières modifications, nous aurons de quoi travailler. ^_^

http://www.la-grange.net/accessibilite/
HexCore
CITATION(20cent @ lundi 14 juin 2004, 14:10)
Tu vas vite en besogne on dirait ! tongue.gif
Voici quelques adresses de validateurs qui te permettront peut-être de mieux appréhender tout ce que le terme accessibilité sous-entend :Et ce n'est qu'un début... Mais promis, le jeu en vaut la chandelle !  thumbup.gif

oui oui smile.gif
il me reste pas mal de boulot effectivement :/

merci pour les adresses, je bookmark smile.gif
20cent
N'oublie pas celle de Denis, c'est avant tout avec celle-ci que tu en apprendras le plus.
Comment ais-je pus l'oublier, c'est comme cela que j'ai commencé. rolleyes.gif

Et maintenant : bonne découverte. smile.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.