Skip to content
Home / Blog / Pure CSS Tabs

Pure CSS Tabs: Accessible and Keyboard Friendly

Interactive tabs components are often created with JavaScript but using Flexbox along with some radio buttons we can code a pure CSS tabs component that’s accessible and keyboard friendly.

The HTML skeleton for the tabs component will look like this:

<div class="tabs"> <!-- tab 1 --> <input class="radiotab" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked"> <label class="label" for="tabone">Tab One</label> <div class="panel" tabindex="1"> <h2>Tab One Content</h2> <p>Tab content...</p> </div> <!-- tab 2 --> <input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabtwo"> <label class="label" for="tabtwo">Tab Two</label> <div class="panel" tabindex="1"> <h2>Tab Two Content</h2> <p>Tab content...</p> </div> <!-- tab 3 --> <input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabthree"> <label class="label" for="tabthree" >Tab Three</label> <div class="panel" tabindex="1"> <h2>Tab Three Content</h2> <p>Tab content...</p> </div> </div>
Code language: HTML, XML (xml)

Notice there are three tabs, each one including a radio input and associated label. You can include more tabs, just make sure to change the sizing in the CSS to fit as needed.

Here’s the basic CSS needed for the interactive functionality:

.tabs { display: flex; flex-wrap: wrap; } .radiotab { position: absolute; opacity: 0; } .label { width: 100%; background: #e5e5e5; cursor: pointer; } .label:active { background: #ccc; } .panel { display: none; width: 100%; } .input:checked + .label + .panel { display: block; }
Code language: CSS (css)

Again, this is a stripped down version of the CSS that doesn’t include the CSS added for aesthetic reasons. Notice the following features in the above CSS:

  • Uses Flexbox for the tab layout
  • The radio buttons are positioned out of the flow of the page (absolute) and are not visible (but still accessible)
  • The labels take precedence and are visible using colors
  • All panels are display: none by default, except the one that’s associated with the currently “checked” radio button

The extra CSS in the demo below is to help with the rounded corners, background colors, padding, and so forth. You can change the styles to fit your needs. The CSS also includes some styles in a media query to convert the tabs to a vertical accordion on smaller screens.

Try using the keyboard in the demo to navigate. The left/right or up/down arrow keys iterate through the tabs when the tab component is focused.

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets
Louis Lazaris
Show Comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2023

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

30 Best Free WordPress Themes for 2023 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2023 Compared & Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2023

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...