Sus au <a href="#"> !
25 mar
Avec l’avènement des librairies Javascript, tout intégrateur HTML/CSS s’amuse à placer un peu partout des tas de petites fonctionnalités rigolotes telles que des carrousels, des accordéons voire des popins. Petit à petit est né le triangle des Bermudes de l’intégrateur.
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 formulairebutton type="reset": permet de réinitialiser un formulairebutton 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é :
Shemu.
- Catégorie
- Accessibilité
- Lien permanent
- #258
- Syndication
- RSS
