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).
- Un video antiguo pero útil que muestra el proceso de "rendering" del layout: https://www.youtube.com/watch?v=ZTnIxIA5KGw
- Una presentación de 2016 en donde se explican algunos factores interesantes a la hora de trabajar con CSS: http://sarahetter.com/slides/cssbrowser