romy.tetue.net

Développement front et conception web
X-HTML, CSS, SPIP, sémantique et accessibilité

Paris-Web 2010, j’y vais ! (du 14 au 16 octobre).

Bidouiller des accesskey avec SPIP


10 octobre 2007,
3 mars,
par Romy Têtue

Partagez cet article : Voter pour cet artice sur hellocoton.fr Netvibes Yahoo myspace Technorati stumbleupon Digg Del.ico.us

Je ne discuterais pas ici du bien-fondé des accesskey [1], ce dispositif d’accessibilité qui permet à l’internaute d’activer un lien ou un formulaire via une combinaison de touches similaire aux raccourcis clavier logiciels... avec lesquels il peut rentrer en conflit.

Il se trouve qu’il m’est arrivé d’en faire usage, non sans agrément, si bien que je les mets en œuvre de façon systématique sur les sites SPIP qui me sont confiés, ce qui est l’occasion d’un petit bricolage rigolo, que voici.

Il n’existe pas de convention dans l’attribution des accesskey, qui reste donc arbitraire, variable d’un site à l’autre et... sujet à critiques. J’ai donc retenu ce qui semble faire consensus. Puis j’ai choisi de faire correspondre à chacun un article SPIP, parmi les 10 premiers, qui sont alors réservés à cet usage.

Correspondances des accesskey et numéros d’articles SPIP
accesskeyPage pointéearticle
0 Liste des raccourcis clavier utilisés. Cette liste peut se trouver en tête de la politique d’accessibilité du site, ou dans un document spécifique. Je prévois alors une page complète exposant les aides à la navigation, dont les accesskey font partie, éventuellement complétée de la politique d’accessibilité du site. 10
1  Retour en page d’accueil 1
2 Quoi de neuf ? Page d’actualités du site. 2
3 Plan de site 3
4 Champ de saisie du formulaire de recherche interne ou page où se trouve ce formulaire. 4
5 FAQ, glossaire, index thématique (tagcloud ?)... 5
6 Page d’aide à la navigation dans le site 6
7 Contact par e-mail, du webmestre ou responsable du site 7
8 Conditions d’utilisation, conditions de reproduction, crédits et autres mentions légales... 8
9 Livre d’or, feedback... 9

Il sera alors très simple de les lister, en écrivant :

où le numéro de l’accesskey est fabriqué de façon automatique à partir du numéro de l’article, grâce au filtre |substr{-1}, une fonction PHP qui nous permet ici de ne prélever que le dernier caractère. Un modèle qui permet de lister les accesskey dans un article est disponible dans ma trousse à têtue, prêt à l’emploi : <accesskey|>.

De même pour proposer les liens correspondants, qui doivent être présents dans chaque page du site (mais pas plus d’une fois chacun) :

Ce qu’il est surtout intéressant de retenir ici, indépendamment des accesskeys qui servent de prétexte, c’est la façon de réserver les premiers articles d’un site SPIP pour fabriquer des pages basiques, celles que l’on s’attend à trouver dans chaque site web.

À lire : Accesskey, l’essai non transformé de l’accessibilité, Laurent Denis, OpenWeb, 2004.

[1] Introduits par la spécification HTML4.0 en 1997, les accesskeys ont été rapidement implémentés par les navigateurs. Leur déploiement dans les pages web a été retenu en 1999 comme une technique d’accessibilité de niveau AAA dans le cadre des directives pour l’accessibilité des contenus web WCAG1.0.

Vos commentaires

  • Le 3 mai à 22:57, par ARTIE

    Bonjour,
    Au cas où :
    J’ai pu simplifier la question avec Champs Extra 2 j’ai crée un champs ACCESSKEY dans la fiche article, et je n’ai donc plus qu’à appelé accesskey="#ACCESSKEY" dans mon squelette

  • Le 4 mai à 13:41, par Romy Têtue

    C’est un peu dommage de créer des champs spéciaux (et dépendre pour ça d’un plugin), dédiés à un truc critiqué...

    Les accesskeys sont surtout, ici, un prétexte à poser une convention pour créer les pages annexes d’un site, à partir d’articles SPIP, sans module additionnel, justement.

Un message, un commentaire ?

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
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom



© 2000-2010 Romy Duhem-Verdière | Certains droits réservés | Qui suis-je ? | Contact | Aide | Top ↑
Vérifiez vous-même la qualité du code de cette page en la soumettant aux validateurs XHTML et CSS.