Limpiando el código de un sitio web que estoy desarrollando, me encontré con que tengo un widget en una barra lateral que tiene un sistema de pestañas para mostrar pequeñas secciones con datos relacionados.
El widget está desarrollado con HTML + JS + CSS y funciona más o menos así (ejemplo simplificado para demo):
var pestanas = document.querySelectorAll(".pestana");
for (var x = 0; x < pestanas.length; x++) {
pestanas[x].addEventListener("click", function() {
var pestanaActiva = document.querySelector("section.activa");
if (pestanaActiva) { pestanaActiva.classList.toggle("activa"); }
document.querySelector(this.dataset.target).classList.toggle("activa");
});
}
section {
display: none;
}
section.activa {
display: block;
}
<button class="pestana" data-target="#seccion-1">Mostrar sección 1</button>
<button class="pestana" data-target="#seccion-2">Mostrar sección 2</button>
<section id="seccion-1">Soy la sección 1</section>
<section id="seccion-2">Soy la sección 2</section>
Pero podría realizar algo similar utilizando solamente HTML y CSS, sin nada de JavaScript:
section {
display: none;
}
input[name=pestana] {
display: none;
}
#seccion-1-box:checked ~ #seccion-1,
#seccion-2-box:checked ~ #seccion-2 {
display: block;
}
<label for="seccion-1-box">Mostrar sección 1</label>
<label for="seccion-2-box">Mostrar sección 2</label>
<input type="radio" name="pestana" id="seccion-1-box" />
<input type="radio" name="pestana" id="seccion-2-box" />
<section id="seccion-1">Soy la sección 1</section>
<section id="seccion-2">Soy la sección 2</section>
La funcionalidad en estos dos snippets es la misma (las secciones se muestran y esconden como deben) y las dos versiones son HTML válido. Comprendo que se podría decir que la versión sin JavaScript no es ideal porque se está usando etiquetas y estilos para realizar una acción y ese no es su objetivo principal (aunque esa acción es básicamente aplicar unos estilos u otros).
¿Existe alguna ventaja de usar una versión sobre la otra (especialmente desde el punto de vista de la accesibilidad web)? ¿O alguna definición de buenas prácticas sobre esto?
web crawlers
que no soportanJS
. Respecto a la accesibilidad te diría que te esta faltando agregar todo lo que respecta a dicha característica. Respecto a las buenas prácticas... creo que eso se basa en opiniones (dado que ambas funcionan exactamente como lo necesitas).:target
y cambiaría los radiobutons por enlaces. Creo que sería más semántico y posiblemente más accesible