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.