Cómo crear pestañas (tabs) accesibles en HTML / CSS / JQUERY

Una parte fundamental de la maquetación web es el uso de pestañas (tabs). Nos las han pedido en infinidad de proyectos.

Con el fin de ahorraros tiempo os traemos varios sistemas de pestañas muy fáciles de implementar y sobre todo de modificar con los que solemos trabajar.

Aria Tabs de Dan Smith (HTML / CSS / JQUERY).

See the Pen Aria Tabs by Dan Smith (@dapacreative) on CodePen.

Es nuestro favorito ya que cumple con todos los requisitos que te pueden pedir.

Al ser un sistema de pestañas accesible, destaca por su facilidad para implementarlo, modificarlo y entender su funcionamiento.

Pure CSS Tabs de Mark Caron (HTML / CSS).

See the Pen Pure CSS Tabs by Mark Caron (@markcaron) on CodePen.

Este sistema de pestañas sólo utiliza HTML y CSS, es fácil de implementar y modificar para que se ajuste con el diseño de tu web.

Por último si necesitáis unas pestañas que estén hechas en JavaScript os recomendamos las de w3Schools como curiosidad comentaros que las pestañas están hechas con botones usando la etiqueta HTML <button>.

Como siempre os animamos a compartir vuestros recursos de este tipo en los comentarios.