Le fourvoiement originel

Attiré par la facilité de mise en place de tels gadgets, l’intégrateur contemporain s’est sournoisement détourné de son ineffable vérité : Faire du code HTML propre et sémantique.

Hé oui ! La perversité des RIA a poussé nos intégrateurs à disséminer des boutons d’action au gré de leurs errements pour pouvoir manipuler des composants interactifs. Or, ces boutons d’action se révèlent être un pure incarnation virtuelle des aiguilles vaudou plantées dans la poupée figurant l’accessibilité.

Toi intégrateur ! Regarde-moi dans les yeux et dis moi à quoi est destinée une balise a ! À pointer vers une page externe ou vers un contenu interne à une page sera ta réponse. Et en prononçant ces mots tu commenceras à prendre conscience de ton égarement.

Dans son souci d’avoir des boutons d’action réactifs et tabulables au clavier, l’intégrateur voyait en la balise a son sauveur. Sophisme ! Aveuglé par l’habitude et la facilité, l’intégrateur a oublié sa mission fondamentale : celle de réfléchir d’abord à la structuration des données… En représailles, la balise a affublée d’un dièse orphelin a envoyé aux oubliettes tous les infortunés sans-Javascript.

Avec un peu de réflexion, accordez-moi le fait que la balise a n’est pas faite pour animer des fanfreluches.

Fi de a, mais à présent ?

Heureusement, le Glazman Dieu du HTML avait bien fait les choses dès le départ. Au 4ème jour du HTML, il créa la balise button et l’interrupteur fut.

Cette balise button autant utilisée que négligée voyait en l’arrivée triomphale des animations Javascript son salut. Que nenni ! Elle fût cantonnée à de rares apparitions et ne fût qu’employée par de sages architectes. Pourtant, à l’instar de sa sÅ“ur jumelle, l’adulée balise input, elle offre les mêmes possibilités :

• button type="submit" : permet de valider un formulaire
• button type="reset" : permet de réinitialiser un formulaire
• button type="button" : ne fait rien d’autre qu’être un bouton

Mais ce n’est pas tout ! La balise button n’est pas auto-fermante comme sa fesse-mathieu de sÅ“ur. Elle peut accueillir en son sein toutes les balises in-line souhaitant se rallier à sa cause.

Son seul défaut pourrait résider en son physique un peu ingrat. Souvent grise et replette, son apparence sans fard en a effarouché plus d’un. Pourtant, il suffit de l’endimancher avec un border:none; background:none pour qu’elle soit transfigurée.

Distinguez l’Ajax et les animations

Si les animations faites en Javascript fonctionnent avec des boutons d’action, ce n’est pas le cas de l’Ajax. Lorsque l’on met en place de telles requêtes, il va de soi que l’on doit partir d’un lien classique. Nulle question de placer des button à brûle-pourpoint.

Le dit Web 2.0 regroupe principalement deux éléments : l’Ajax et les animations Javascript mais ceux-ci sont bien distincts l’un de l’autre. Un balisage approprié serait : a pour l’Ajax et button pour les animations.

Quels bénéfices pour l’accessibilité ?

Au-delà de donner une structuration plus correcte au contenu HTML, bannir l’utilisation des <a href="#"> va permettre d’améliorer l’accessibilité en plusieurs points :

• Une quantité moindre de liens dans la page.
• Des éléments toujours tabulables malgré le changement de structuration.
• Une navigation par liste de liens épurée dans une synthèse vocale.

Devenez des parangons d’intégrateurs

Après avoir lu ce pamphlet qui aura – j’espère – piqué au vif votre qualité d’intégrateur perfectionniste, de grâce ne commettez plus cette erreur.

Pour celer ce pacte, voici quelques exemples d’<a href="#"> pouvant être évité  :