Tabindex automatiques

Comme 5000 autres adhérents, je me suis déclaré sur Opquast. Ce site propose une grille d’évaluation de bonnes pratiques. Pour un site naissant, PriceMister s’en tire assez bien, j’ai validé la moitié des questions. Pourtant, je pêche sur la cinquième, qui dit que  » La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier ». Soit sans manipuler la souris.

Il existe heureusement des attributs html qui permettent de naviguer avec la touche tabulation, ou des combinaisons de touches du type alt+lettre. C’est pourtant simple de passer cette 5me étape !

Oui et non

WordPress ne gère pas les tabindexs ni les accesskeys en php. Les coder en dur est une solution, mais bien que le PriceMister est épuré, il reste touffu en petits modules (formulaires & groupes de liens). Par exemple, sur certaines pages, Il peut y avoir :

  • le power search dans l’en-tête
  • les pages dans l’en-tête
  • la navigation dans la barre latérale
  • la gestion du compte dans la barre latérale
  • l’upload d’images et le formulaire de commentaires dans le corps de la page

Avec autant d’élément, il est difficile de coder en dur les attributs tabindex de chaque champ. De plus, il n’existe pas de plugin WordPress pour celà, c’est pourquoi je propose le mien. Il suffit d’insérer ce bout de code dans le fichier function.php de votre thème.

function tabindex($arg='') {
if(is_int($arg)) {
$_SESSION['$tabindex'] = $arg;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
} else {
$_SESSION['$tabindex']++;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
}
}
function tabindexStart() {
$_SESSION['$tabindex'] = 0;
}
add_action ('init','tabindexStart');

Une variable de session $_SESSION[‘$tabindex’] qui permet de garder une information persistante. C’est dans cette fonction que je stocke la dernière occurence de ma boucle.
Elle est réinitialisé lors du chargement de la page. Ensuite, à chaque appels de la fonction, elle s’incrémente d’une unité. Il suffit alors de l’intègrer dans mes fichiers de templates ainsi :



qui sera rendu ainsi :



Cette méthode fonctionne parfaitement pour les pages structurées logiquement. En cliquant sur la touche tabulation, le focus saute sur l’élément qui suit dans la page.

La fonction peut accepter comme argument un nombre entier, afin de mentionner l’ordre de recherche par tabulateur. En effet, en passant d’un élément à l’autre avec le tabulateur, c’est d’abord l’élément avec le plus petit chiffre tabindex qui sera trouvé, puis le deuxième…

Par exemple, ma page est structurée ainsi :

  1. en-tête : un power search, des pages annexes,
  2. corps de texte avec un formulaire de commentaires
  3. barre de navigation comporte la réelle navigation

Dans cet exemple, je souhaite que la navigation soit discontinue, donc j’applique ces fonctions dans le 1er éléments de chaque partie :

  1. power search > tabindex(« 1 »);
  2. navigation > tabindex(« 10 »);
  3. pages annexes > tabindex(« 100 »);
  4. formulaire de commentaire > tabindex(« 200 »);

Et là c’est magique !