Bonjour,
Depassage a écrit :
La contrainte serait plutôt d'avoir un site accessible sans JS. Ne pas utiliser JS pour remplacer les scripts par différents hack n'est pas une très bonne idée.
Aussi ne pas oublier que comme pour les css on peut tout à fait "dégrader" l'aspect d'un site sans javascript. C'est ce qu'il faut avoir en tête si on veut rendre son contenu accessible (ainsi que pour la partie le SEO).
Je n'arrête pas de penser à ces deux remarques depuis hier. Dans un premier temps, je me suis dit qu'effectivement, les solutions html+css sans JS pourraient être une "très mauvaise idée".
Mais bon, c'était assez intuitif comme jugement. Et j'ai voulu en avoir confirmation en reprenant l'exemple de papyJP : un input (bouton dans son cas) qui montre ou cache un texte (un titre dans son cas).
J'ai donc fait 2 versions, une avec et une sans javascript, en essayant d'être impartial . Si vous êtes pressé, voir :
https://jsfiddle.net/h35urodz/ pour la version sans JS,
https://jsfiddle.net/jbcfwxqo/ pour la version avec JS.
Dans les deux cas, j'ai considéré un html simple. J'aurais pu rajouté un <label> ou des attributs variés pour rendre la navigation plus claire pour les utilisateurs ayant des problèmes d'accessibilité, mais quelque soit ces ajouts, ils sont en gros les mêmes avec et sans JS.
Premier constat : on voit que le code est ultra simple dans les deux cas, voire un peu plus complexe avec JS, car il faut rajouter un attribut "onclick".
Le code html sans JS :
<div id="a">
<input type="checkbox">
<span>Lorem ipsum</span>
</div>
Le code html avec JS :
<div id="a">
<input type="checkbox" onclick="magic(this);">
<span>Lorem ipsum</span>
</div>
Pour le css, j'ai séparé le code en deux parties, une partie "mécanisme de base" (core mecanism) et une partie "décoration" (decoration). J'ai fait à peu près la même chose pour la partie "decoration" dans les deux cas bien qu'il soit probable qu'on puisse faire plus court avec du JS (mais pas forcément plus clair).
Deuxième constat : on voit que le code avec ou sans JS a à peu près la même complexité. Le mécanisme de base est ultra simple dans les deux cas.
Le code css sans JS :
/* core mecanism */
#a span {
display: none;
}
#a input:checked~span {
display: inline-block;
}
/* decoration */
#a {
box-sizing: border-box;
position: relative;
min-height: 2rem;
line-height: 2rem;
background: #eee;
}
#a input {
width: 2rem;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#a input::-ms-check {
display: none;
}
#a input:before,
#a input:after {
position: absolute;
display: block;
top: 0;
left: 0;
width: 2rem;
height: 2rem;
color: transparent;
background-color: #ccc;
background-size: 50% 50%;
background-position: center;
background-repeat: no-repeat;
}
#a input:before {
content: "+";
z-index: 1;
background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent), linear-gradient(to right, transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}
#a input:checked:after {
content: "-";
z-index: 2;
background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}
Le code css avec JS :
/* core mecanism */
#a span {
display: none;
}
#a.checked span {
display: inline-block;
}
/* decoration */
#a {
box-sizing: border-box;
position: relative;
min-height: 2rem;
line-height: 2rem;
background: #eee;
}
#a input {
width: 2rem;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#a input::-ms-check {
display: none;
}
#a input:before,
#a input:after {
position: absolute;
display: block;
top: 0;
left: 0;
width: 2rem;
height: 2rem;
color: transparent;
background-color: #ccc;
background-size: 50% 50%;
background-position: center;
background-repeat: no-repeat;
}
#a input:before {
content: "+";
z-index: 1;
background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent), linear-gradient(to right, transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}
#a.checked input:after {
content: "-";
z-index: 2;
background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}
Enfin, pour la version avec JS, il faut un bout de code (on aurait pu imaginer plein d'autres solutions évidemment pour ce code) :
function magic(e) {
var a = e.parentNode;
if (e.checked) {
a.className = "checked";
} else {
a.className = "";
}
}
Ma conclusion sur tout ceci, c'est que dans pas mal de cas (même si je n'ai certes pris qu'un exemple ici), il est probable que les versions sans javascript ne seront pas plus tordues (plus "hackeuses") que les solutions avec JS, et donc de ce fait pas forcément moins accessibles.
Par ailleurs, il n'est pas clair que pour l'accessibilité en général, ainsi que pour le référencement, les versions avec JS soient meilleures. Dans le cas général, j'ai de gros doutes sur les solutions consistant à mettre du JS pour espérer tant une meilleure accessibilité qu'un meilleur référencement ! Le JS est selon moi dans les 2 cas une difficulté supplémentaire à surmonter plus qu'une aide.
Amicalement,
