SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 259 visiteurs en ce moment

Accueil > Navigation > Hyperliens > SkipLink > SkipLink

SkipLink

21 mai 2009 – par tetue – 30 commentaires

14 votes

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.

Voir en ligne : http://plugins.spip.net/skiplink

Dernière modification de cette page le 7 avril 2015

Retour en haut de la page

Vos commentaires

  • Le 3 octobre 2014 à 16:59, par Ysabeau En réponse à : SkipLink

    Bonjour,

    cela semble intéressant, sauf que... il les insère où ces liens ? Si je comprends bien je n’ai pas à manipuler le squelette pour que les liens s’affichent. Mais je ne vois absolument rien de neuf !

    (j’ai essayé toutes les pratiques magiques habituelles).

    Merci.

    Répondre à ce message

  • Le 9 novembre 2012 à 10:48, par Ben En réponse à : SkipLink

    Bonjour,

    Il me semble que sous spip 3, il n’y a plus le lien vers CFG pour configurer les raccourcis.

    Même si du coup, on peut toujours utiliser raccourcis.html...

    Merci en tout cas à Mme tétue pour toutes les contribs !

    Répondre à ce message

  • Le 31 août 2012 à 18:34, par Loiseau2nuit En réponse à : SkipLink

    Hello :)

    Juste pour prévenir : En version SVN 2.1.1 sur SPIP 3, le comportement de focus.css est forcé, bien que l’option soit explicitement désactivée dans la page de config du plugin. Du coup, l’effet d’hyper-constraste ne peut pas être annulé.

    Je pensais à une incompat avec un autre plugin mais ca n’est pas le cas apparemment. Je continue de tâtonner...

    Bon week end à tous

    • Le 31 août 2012 à 19:39, par tetue En réponse à : SkipLink

      La feuille focus.css, présente dans la version de développement, très expérimentale, n’était pas vouée à persister. Elle ne fait pas (ne devrait pas faire) partie de la dernière version stable distribuée de ce plugin, que je te recommande plutôt d’utiliser. Le présent article documente la version 1.0.2 pour SPIP 2.

    • Le 3 septembre 2012 à 10:04, par Loiseau2nuit En réponse à : SkipLink

      OK.

      Bon en même temps, en utilisant un _trunk, je m’attendais bien à ce qu’il y ait quelques pétouilles en cours. Il parait qu’on avance pas sans bugs et beta tests ;)

      Je crois me souvenir que la v 1.0.2. ne tourne pas sur SPIP 3 du coup, je vais quand même devoir garder celle ci sous le coude et si j’arrive à avancer un peu le portage au pire ca sera toujours ça de pris ;)
      (EDIT : Non mais en fait j’ai vraiment une mémoire de merde. Pardon pour le bruit ^^)

      Merci pour ta réponse en tout cas.

    Répondre à ce message

  • Le 9 août 2012 à 09:38, par Maïeul En réponse à : SkipLink

    Salut,

    j’ai vu que tu avais une version en cours de dev. Quelle serait ta liste des tâches ? En effet, j’aimerais m’en servir, car c’est la seule version qui pour le moment est compatible au niveau de l’interface de config avec SPIP 3 (en tt cas le tags ne propose pas le formulaire).

    Alors autant finir le dev pour publier. Je veux bien donner un coup de main.

    ++

    • Le 31 août 2012 à 19:46, par tetue En réponse à : SkipLink

      Toutes mes contribs ont leur doc préalable, ici sous la forme d’un article en cours de rédaction, avec sa todolist. Attention, la version en cours de dev était très expérimentale, ne se souciant pas de compatibilité.

    • Le 3 septembre 2012 à 10:07, par Loiseau2nuit En réponse à : SkipLink

      Je me souviens de cet article oui, j’avais même dû troller un peu les commentaires à l’époque mais là, le lien renvoit une 404 (sans doute une conséquence de la mig spip-contrib.net vers contrib.spip.net ?)

    Répondre à ce message

  • 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: 1em aux paragraphes, ce qui m’a conduit à préciser la css de p#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 p c’est bien ; je dis juste que ZPIP style tous les p aveuglé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 :

      1. normal : il n’y a ici ni bug ni conflit, mais un fonctionnement normal des CSS,
      2. indépendant de SkipLink : puisque ne stylant rien, celui-ci ne peut être contrariant,
      3. et bien, concernant ZPIP et autres thèmes, car inversement c’est drôlement pas pratique, voire emmerdant, quand les p ne sont pas un minimum stylés par défaut.

      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

      Non, un p c’est bien ; je dis juste que ZPIP style tous les p aveuglément, et que donc ce n’est pas p&p. Est-ce que je m’exprime si mal que ça ?

      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 css

    le 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 :

    / !\ <plugin> manquant dans le fichier de définition : skiplink</plugin.xml>

    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

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

  • Configurer Sparkpost

    25 avril – 18 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

Ça spipe par là