5

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?

4
  • 1
    No, para ese caso no; más que nada es compatibilidad con los browser y versiones, en especial para IE y la versión nativa de android browser.
    – Kleith
    Commented el 14 mar. 2018 a las 15:07
  • Comprobando caniuse.com parece que no hay problemas de compatibilidad (no funcionaría en IE6, pero ese ya no cuenta).
    – Alvaro Montoro
    Commented el 14 mar. 2018 a las 15:21
  • Respecto a las ventajas, además de lo ya dicho por @Kleith, quizas abría que considerar web crawlers que no soportan JS. 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).
    – Marcos
    Commented el 14 mar. 2018 a las 15:22
  • No sabría contestar categóricamente a eso pero yo personalmente para montar un sistema de pestañas con CSS utilizaría la pseuso-clase :target y cambiaría los radiobutons por enlaces. Creo que sería más semántico y posiblemente más accesible
    – user7176
    Commented el 14 mar. 2018 a las 15:59

1 respuesta 1

2

Voy a aportar mis dos centavos:

En cuanto a accesibilidad, si bien la versión con JavaScript incluye botones "nativos" <button>, lo cual es recomendado, en términos de accesibilidad un lector de pantalla debería entender perfectamente el contexto de la solución con solo CSS si se utiliza role="button":

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" role="button" />
<input type="radio" name="pestana" id="seccion-2-box" role="button" />

<section id="seccion-1">Soy la sección 1</section>
<section id="seccion-2">Soy la sección 2</section>

Algo de referencia al respecto: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role


No conozco una definición detallada sobre si es una buena práctica o no usar solo CSS para estas tareas "menores", sin embargo, existen menús de navegación (en móviles principalmente) que utilizan solo CSS para su "toggling".

Aunque no en el mismo contexto que estamos discutiendo aquí, Google dice (sobre las animaciones con CSS y JS):

Usa CSS cuando tienes estados más pequeños e independientes para los elementos de IU. Las transiciones y animaciones de CSS son ideales para incorporar un menú de navegación desde el lateral o para mostrar información sobre herramientas. Tal vez necesites usar JavaScript para controlar los estados, pero las animaciones estarán en tu CSS.

Fuente: https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript

Si bien en teoría podría ser mejor la solución CSS, dependiendo la forma como se utilicen los selectores podría tener un rendimiento similar, mejor o peor que la solución de JS. (Aunque teniendo en cuenta lo pequeño de este contexto en la pregunta, sería despreciable la diferencia entre JS y CSS).

2
  • Parece que label no admite role o aria-role (da fallo al validar)
    – Alvaro Montoro
    Commented el 14 mar. 2018 a las 17:53
  • 2
    Bueno, el label no tendría el rol en este caso, sino que sería el radio, que es el que se convertiría en botón finalmente, o al menos intento basarme en la forma como lo interpretan la mayoría de lectores de pantalla.
    – Shaz
    Commented el 14 mar. 2018 a las 17:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.