Après pas mal d'années à rouler ma bosse en tant que freelance sautant de code en code, de sites en sites et d'une plateforme web à une autre, j'ai croisé quelques lignes inspirées qui valaient bien une petite mention, un billet spécial.
Une fois n'est pas coutume, faisons un brin de HTML, comme on ferait un brin de toilette. Voici une petite sélection des plus étranges écriture en HTML. Mais au fait, "Cé esse esse, c'est quoi ?"
Un faux bouton qui ne fait rien, déguisé en lien.
C'est l'internaute qui va user le clic pour rien.
Qu'en comprendre ?
Il y a une mauvaise utilisation de l'élément button. Il sera inutile de rappeler qu'il existe un élément permettant de créer des liens vers des sites externes . Il vaut mieux ne pas changer la sémantique native, sauf s’il est impossible de faire autrement.
Il est possible de créer des liens vers des pages sans JavaScript.
L'attribut title est redondant.
L'attribut tabindex est redondant et un bouton n'en a pas besoin, il est activable par défaut.
Comment faire quelque chose de propre ?
CSS :
#alink {
height: 40px;
width: 80px;
background-image:url('img/alink_1.png') no-repeat;
display:block;
...
}
HTML :
Une boîte div qui joue le rôle d'un bouton, sans en être un.
On se demande pourquoi faire ?
…
Qu'en comprendre ?
Définir explicitement une sémantique pour les boutons n'est pas nécessaire, il y a un élément pour cela : button
Nous n'avons pas besoin de l'attribut tabindex puisque nous utiliserons un bouton. Les boutons HTML sont activables par défaut.
Pour le SEO, il manque une alternative textuelle pour l'icône.
Comment faire quelque chose de propre ?
CSS :
#button_run {
height: 40px;
width: 80px;
background-image:url('img/bk_bt1.png') no-repeat;
}
HTML :
JAVASCRIPT :
document.getElementById('button_run').onclick = function(event) {
...
}
Le cas très classique d'une image qui joue elle aussi au bouton.
Comment fait du bon quand on peut faire du mauvais ?
Qu'en comprendre ?
L'élément HTML a, normalement, pour but d'afficher des images et non d'exécuter du JavaScript.
Un événement de clic sur une balise img se déclenche uniquement au clic via le déclencheur onclick.
Attention, pour le SEO, Il n'y a pas d'alternative textuelle pour l'image.
Comment faire quelque chose de propre ?
CSS :
#button1, #button2 {
height: 40px;
width: 40px;
}
#button1 { background-image:url('img/bk_bt1.png') no-repeat; }
#button2 { background-image:url('img/bk_bt2.png') no-repeat; }
HTML :
JAVASCRIPT :
document.getElementById('button1').onclick = function(event) {
...
}
document.getElementById('button2').onclick = function(event) {
...
}
Un bouton lié, wahoo !
On est en droit de se demander comment est-ce qu'un navigateur va interpréter ça.
Qu'en comprendre ?
En imbriquant un bouton dans un lien, on envoie deux messages au navigateur web :
C’est un bouton, mais c’est aussi un lien.
Selon le navigateur et sa version, cela risque, de provoquer des différences de comportement et surtout des actions non souhaitées
Comment faire quelque chose de propre ?
CSS :
.ah_button {
/* Utilisons CSS pour appliquer des styles de type bouton au lien */
...
}
HTML :
Inscrition
Un truc, une tentative d'écriture synthétique
Le gars aura au moins essayé de faire truc...
Connexion
Qu'en comprendre ?
Ce serait un lien vers une ancre dans la même page, qui se voudrait être un bouton.
En ajoutant le code role = "button" à un lien, on indique qu’il s’agit d’un bouton, même s’il s’agit d’un lien. Mais dans l'utilisateur qui est fait du lien, cela ne sert à rien.
aria-haspopup = "true" suggère l’existence d’une fenêtre contextuelle, mais elle n’existe pas.
Enfin plutôt que d'utiliser des espaces encodés, mieux vaux se servir d'un padding en CSS
Comment faire quelque chose de propre ?
CSS :
.button {
/* Utilisons CSS pour appliquer des styles de type bouton au lien */
...
padding:3px 5px 7px 5px;
}
HTML :
Connexion
Autant le dire, un code bien écrit est un code qui sera bien interprété. Mais ce sera aussi un code compatible multi plateforme et bien vu par les moteurs de recherche.