Ce plugin propose des liens facilitant la navigation dans la page — liens d’accès rapide, retour en haut de page, dits « skip navigation links » — et leurs ancres. Ces liens sont indispensables pour les utilisateurs naviguant au clavier ou surfant sur téléphone portable.
Aussitôt activé, ce plugin insère les liens suivants :
- Raccourci d’accès direct au contenu de la page
- Raccourci d’accès à la navigation principale
- Raccourci d’accès au formulaire de recherche, s’il est présent dans la page
- Lien pour remonter en haut de page
Exemple d’utilisation sur les sites prostitutionetsociete.fr et cuisine-libre.fr.
Ce plugin est multilingue et propose donc automatiquement des intitulés correspondants à la langue de la page courante. Dans sa première version, le plugin est en partie traduit en 6 langues (de, en, es, fr, it, pt_br). N’hésitez pas à compléter.
Modification des ancres
Les liens d’accès rapide de SkipLink pointent par défaut vers les blocs principaux de la structure HTML des squelettes livrés avec SPIP, soit #contenu, #navigation et #recherche. Mais vous pouvez, pour chacun de ces raccourcis, indiquer une autre ancre, parmi celles présentes dans vos squelettes personnalisés, très simplement : en déclarant ces ancres via le panneau de configuration CFG du plugin.
De la même façon, il est possible d’ajouter un quatrième lien, vers un article, par exemple vers le plan de site. À utiliser avec parcimonie.
Pour des personnalisations plus avancées, il vous faudra copier le fichier raccourcis.html dans votre répertoire « squelettes » et en modifier le code selon vos besoins spécifiques.
Noisettes disponibles pour vos squelettes
Rappelons qu’il n’est pas nécessaire d’intervenir sur vos squelettes pour le bon fonctionnement de ce plugin. Mais si vous pouvez souhaiter personnaliser, voici les noisettes qui vous seront utiles :
* Insérez #INCLURE{fond=raccourcis} dans vos squelettes, là où vous souhaitez affichez les liens d’accès direct au contenu et à la navigation. Rappelez-vous que, pour qu’il soient réellement utiles, ces liens doivent être placé au tout début de la page HTML (avant le nom du site, son logo et toute autre chose).
Pour contraindre l’affichage du lien vers le formulaire de recherche, passez le critère {recherche=oui} (ou {recherche=non}) à l’inclusion, comme ceci : [(#INCLURE{fond=raccourcis}{recherche=oui})].
* Insérez #INCLURE{fond=remonter} dans vos squelettes, là où vous souhaitez afficher un picto permettant de remonter en haut de page. Pour changer l’image, placez un fichier graphique PNG, intitulé remonter.png, à la racine de votre dossier « squelettes ».
* Insérez #INCLURE{fond=descendre} dans vos squelettes, là où vous souhaitez afficher un picto permettant de descendre en pied de page. Pour changer l’image, placez un fichier graphique PNG, intitulé descendre.png, à la racine de votre dossier « squelettes ».
* Insérez #INCLURE{fond=yoyo} dans vos squelettes, là où vous souhaitez afficher les deux pictos précédents, pour « yoyoter » dans la page.
Conseils
Ces liens d’accès rapide contribuent un peu à améliorer l’accessibilité de votre site. Pour ne pas en perdre le bénéfice, placez-les au tout début de la page HTML (avant le titre et le logo de site) et de façon visible : ne les masquez pas par un display: none; ! Ces quelques liens ne constituent qu’un minimum qu’il conviendrait, pour bien faire, de compléter par d’autres liens d’évitement, spécifiques à la navigation dans votre site.
Pour de plus amples explications, on se référera à cet article d’Alsacreations : Les liens d’évitement.
Ce plugin apprécie beaucoup la compagnie du plugin Ancres douces.
skiplink-1.zip
Vos commentaires
# Le 14 février 2011 à 13:05, par E-cosystems
En réponse à : SkipLink
Bonjour,
Merci pour ce plugin ! (qui je pense devrait être de base dans Spip...)
Bref, petite remarque.
Quand on va vers « recherche » le plugin fait son boulot. Cependant, il n’est pas possible de taper quelque chose directement. N’est ce pas là un problème d’accessibilité ?
Est ce possible à intégrer ?
Merci à tous les contributeurs et contributrices !
# Le 14 février 2011 à 13:24, par E-cosystems
En réponse à : SkipLink
Re,
Je l’ai installé sur http://pap.giveet.org/ et j’ai un problème avec les langues.
Celui-ci ne change pas de langue, en fonction de la langue du site.
Pourtant, il me semble l’avoir vu changer de langue à un moment. Puis, plus rien...
Je l’ai réinstallé, au cas où, mais non, toujours pas.
Voilou, si quelqu’un-e à une solution, je suis preneur.
Répondre à ce message
# Le 18 août 2010 à 23:54, par Fil
En réponse à : SkipLink
Testé sur http://lmsi.net/ ce plugin affiche parfois les liens en anglais sur la page d’accueil (alors que le site est en français).
Par ailleurs il conflicte un peu avec un certain ZPIP qui donne une
margin-bottom: 1emaux paragraphes, ce qui m’a conduit à préciser la css dep#raccourcis.# Le 19 août 2010 à 10:39, par tetue
En réponse à : SkipLink
C’est normal d’ajuster les CSS ;-)
Ce n’est pas un conflit et ça ne risque pas puisque ce plugin n’insère pas de style.
Pour la langue ce sont de spipiennes
<:chaines_de_langue:>qui devraient donc s’accorder avec le contexte...# Le 19 août 2010 à 11:33, par Fil
En réponse à : SkipLink
Le bug de css est plutôt dans ZPIP alors, mais du coup ce n’est pas plug&play.
Pour les langues, ça dépend comment tu insères ces liens... visiblement c’est fait très tôt, c-à-dire à un moment où le contexte est encore donné par le navigateur.
# Le 19 août 2010 à 13:21, par tetue
En réponse à : SkipLink
Pour le CSS, ce n’est pas un bug, mais un fonctionnement normal : les éléments HTML héritent des styles qui les concernent, quelque soit leur provenance : autres plugins, feuille perso.css, etc. C’est le principe de la cascade. Le plug&play n’existe pas en la matière : il faut nécessairement ajuster quand ça plaît pas ;-)
Ce plugin n’impose aucun style afin, justement, de faciliter la personnalisation.
Ce qui est délicat, c’est surtout le positionnement de ces liens insérés par défaut car ils s’insèrent avant tout autre bloc de la page et donc en dehors de tout. Leur positionnement CSS est plus aisé lorsqu’ils sont manuellement inclus (par
#INCLURE{fond=raccourcis}) dans un des blocs des squelettes. Ce qui résout certainement le problème de langue.# Le 19 août 2010 à 16:09, par Shnoulle
En réponse à : SkipLink
Pour du plug & play, c’est impossible. Il faudrait que sur chaque thème on indique si : le thème est prévu pour inclure tel plugin. Dans la liste, on peut trouver au hasard , pour les plus évident : skiplink,nuage,agenda, .... Et les autres ????
Par contre, les thèmes sont en général sur la zone, donc libre à chacun d’ajouter la compatibilité pour tel plugin, etc ....
non ?
# Le 19 août 2010 à 17:24, par tetue
En réponse à : SkipLink
Mais ce n’est ni un bug, ni un problème de compatibilité, juste un fonctionnement normal des CSS :-P
Et comment quel plugin pourrait savoir que tel utilisateur veut d’un espace sous ses paragraphes, sauf ceux de SkipLink et ceux de MachinChose, mais que tel autre en vaut au contraire partout ??
Oui, les thèmes peuvent prévoir de styler les liens d’évitement du plugin SkipLink. Mais comment pourraient-ils le faire de manière fiable, sachant que l’inclusion peut être manuellement placée dans n’importe quel bloc de la page ?
# Le 19 août 2010 à 19:48, par Fil
En réponse à : SkipLink
Bon ben j’argumente pas, alors... toujours est-il qu’avec des squelettes qui ne prévoient pas de margin-bottom sur les p, il n’y a pas besoin de modifier les css pour que skiplink s’intègre correctement. Avec ZPIP, il faut les modifier. Bug ou pas, à toi de voir.
# Le 20 août 2010 à 16:24, par Shnoulle
En réponse à : SkipLink
Bin si , tu peut argumenter :), sinon c’est pas drôle ...
De mon coté, l’activation de skiplink avec le thème par défaut de zpip ou avec la dist me donne un comportement équivalent. En effet, la margin : 1em 0 est celui par défaut de firefox (chez moi). Le thème par défaut de zpip ou la dist ne forceant aucunement le margin.
Je me trompe (ne serais je pas à jour ???)
# Le 20 août 2010 à 17:28, par tetue
En réponse à : SkipLink
Dois-je comprendre que ce qui est interrogé ici est le choix d’une balise
<p>pour contenir ces liens ? ?C’est assez souvent le cas des liens d’évitement, qui déplaisent souvent, indépendamment de cela, comme par exemple ici. Et ça me semble cohérent d’encapsuler ainsi une telle ligne de texte.
Libre à chacun et à chaque thème de styler à sa guise.
# Le 20 août 2010 à 17:51, par Fil
En réponse à : SkipLink
Non, un
pc’est bien ; je dis juste que ZPIP style tous lespaveuglément, et que donc ce n’est pas p&p. Est-ce que je m’exprime si mal que ça ?# Le 20 août 2010 à 18:57, par tetue
En réponse à : SkipLink
Bin, c’est juste que je trouve ça :
En fait tu dis juste que c’est pas à ton goût perso, car si, c’est bien plug&play :-)
# Le 20 août 2010 à 19:04, par Shnoulle
En réponse à : SkipLink
Heu , c’est un bug du thème non plutôt ?
Parceque je vois vraiment pas dans quel fichier de zpip les marges sont forcées ? http://zone.spip.org/trac/spip-zone/browser/_squelettes_/zpip .
Par contre, su http://lmsi.net/sites/lmsi.rezo.net/squelettes/habillage.css les marges des p sont forcées à 0 avec l’*, puis reforcées juste en dessous. (ligne 21 et 31 du fichier). Mais ce fichier ne fait pas partie de zpip ...
J’ai vérifié le comportement de zpip et squelettes-dist au niveau des marges des paragraphes : il n’y a aucune différence.
# Le 20 août 2010 à 22:58, par Fil
En réponse à : SkipLink
hum... je me suis bien planté en effet : c’est le css user-agent par défaut. On efface tout :-)
# Le 20 août 2010 à 23:46, par tetue
En réponse à : SkipLink
Ah, faut signaler ça chez Mozilla alors...
Répondre à ce message
# Le 5 octobre 2009 à 22:58, par DD
En réponse à : Plugin SkipLink
Bonjour,
Ce plugin fonctionne très, très bien ! merci.
par contre je n’arrive pas à le supprimer de mon squelette d’impression. Les liens sont toujours visibles malgré l’ajout de
#raccourcis .skiplink { display: none; }dans la cssle code généré est
<p class="skiplink" id="raccourcis" style="z-index: 100;">comment l’enlever ?
merci
dd
# Le 26 mars 2010 à 20:42, par tetue
En réponse à : Plugin SkipLink
Ces liens sont automatiquement insérés dans tous les squelettes, mais un simple
display: none;suffit à les masquer lorsque c’est nécessaire, pour l’impression notamment.# Le 27 mars 2010 à 17:40, par Shnoulle
En réponse à : Plugin SkipLink
Une légére précision, pour le id/class comme ici, il faut coller l’id et la class
#raccourcis.skiplink { display: none; }Bon en même temps un .skiplink display : none ; suffit, non ?
Répondre à ce message
# Le 24 novembre 2009 à 22:32, par Valéry
En réponse à : Plugin SkipLink
En SPIP 2.0.10 sur la page Gestion des plugins j’ai le message :
sur fond rouge.
Le fichier plugin.xml me semble pourtant correct, je ne comprend pas l’origine de ce message.
Je voulais installer le plugin pour voir le code généré et le styler dans un thème Zspip : peut être le style de ces liens est-il à prévoir dans les conventions de nommage ? Où est-ce les rendre trop denses ?
# Le 25 novembre 2009 à 00:54, par tetue
En réponse à : Plugin SkipLink
Je n’arrive pas à reproduire le même comportement... (mais n’ai pas encore essayé ZPIP)
Répondre à ce message
# Le 21 mai 2009 à 22:41, par squirrel
En réponse à : Plugin SkipLink
Bonjour Têtue,
Plugins testé en 192h et j’ai tout compris !
Félicitations !
squirrel :D
Répondre à ce message