Accessible Vertical Tabs in JavaScript

Creating accessible vertical tabs in JavaScript is crucial for providing a user-friendly and inclusive experience for all website visitors. This tutorial will guide you through the process of building vertical tabs with accessibility in mind, ensuring that your content is easily navigable and understandable for everyone, including those using assistive technologies.

Set Up Your Document

Include necessary assets or libraries here.

Create the HTML Structure

This section defines the basic HTML structure for the vertical tabs. It includes a main container, a header for the section, a list of index elements acting as tab triggers, and a list containing the tab content.

<main>
  <header>
    <h2><span>Table</span> of content</h2>
  </header>
  <section>
    <ul class='indexes'>
      <li data-index='0'>01</li>
      <li data-index='1'>02</li>
      <li data-index='2'>03</li>
      <li data-index='3'>04</li>
    </ul>
    <ul class='tabs'>
      <li class='tab'>
        <article class='tab-content'>
          <h3>Midnight Station</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa
          voluptate blanditiis nemo magnam sit modi architecto officia
          maiores magni. Necessitatibus, iste aut.</p>
          <button>Read More</button>
        </article>
        <div class='tab-image'><img src='https://picsum.photos/id/345/1000/600'></div>
      </li>
      <li class='tab'>
        <article class='tab-content'>
          <h3>The Hitchhiker</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa
          voluptate blanditiis nemo magnam sit modi architecto officia
          maiores magni. Necessitatibus, iste aut.</p>
          <button>Read More</button>
        </article>
        <div class='tab-image'><img src='https://picsum.photos/id/352/1000/600'></div>
      </li>
      <li class='tab'>
        <article class='tab-content'>
          <h3>Missing Pages</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa
          voluptate blanditiis nemo magnam sit modi architecto officia
          maiores magni. Necessitatibus, iste aut.</p>
          <button>Read More</button>
        </article>
        <div class='tab-image'><img src='https://picsum.photos/id/444/1000/600'></div>
      </li>
      <li class='tab'>
        <article class='tab-content'>
          <h3>Uninvited Guests</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa
          voluptate blanditiis nemo magnam sit modi architecto officia
          maiores magni. Necessitatibus, iste aut.</p>
          <button>Read More</button>
        </article>
        <div class='tab-image'><img src='https://picsum.photos/id/451/1000/600'></div>
      </li>
    </ul>
  </section>
</main>
    <script  src="./script.js"></script>

Style with CSS

Use CSS to define the presentation of the HTML elements. This includes layout, colors, fonts and animations to create the desired visual experience and make the vertical tabs responsive.

:root {
  --primary: rgb(211,38,38);
  --overlay: rgba(211,38,38,0.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: black;
  color: rgba(255,255,255,0.85);
}

main {
  width: 600px;
  height: 300px;
  font: 0.7rem impact,sans-serif;

  & header {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 2.25rem;
    color: white;

    & span {
      color: var(--primary);
    }
  }

  & section {
    display: flex;
    gap: 2rem;
  }
}

.indexes, .tabs { list-style-type: none; }

.indexes {
  font-size: 1rem;

  & li {
    padding: 1rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
}

.tabs { position: relative; }

.tab {
  position: absolute;
  display: flex;
  width: 530px;
  height: 225px;
  opacity: 0; 
  background-color: black;
  overflow: hidden;
}

.tab-content {
  position: relative;
  z-index: 5;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(-5rem);

  & h3 {
    font-family: helvetica;
    font-weight: 900;
    font-size: 1rem;
    border-bottom: 1.5px solid white;
    padding-bottom: 1rem;
  }

  & p {
    font-family: helvetica;
    font-weight: 100;
    line-height: 2;
    color: rgba(255,255,255,0.7);
  }

  & button {
    width: fit-content;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    font-size: 0.7rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
  }
}

@keyframes content {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-image {
  position: absolute;
  right: 1rem;
  width: 200px;
  height: 200px;
  opacity: 0;
  transform: translateX(2rem);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--overlay);
    mix-blend-mode: multiply;
  }

  & img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    filter: grayscale(100%);
  }
}

@keyframes image {
  100% {
    opacity: 1;
    width: 300px;
    transform: translateX(0);
  }
}

.active .tab          { opacity: 1; z-index: 5; }
.active .tab-content  { animation: content 0.9s ease-out 0.4s forwards; }
.active .tab-image    { animation: image 1s ease-out forwards; }

Add JavaScript Functionality

This is where the interactivity is added with JavaScript. The script handles tab switching and accessibility by dynamically showing and hiding content and appropriately styling the active tab.

const indexes = document.querySelectorAll('.indexes li');
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

function reset() {
  for (let i = 0; i < tabs.length; i++) {
    indexes[i].style.borderColor = 'transparent';
    tabs[i].style.zIndex = 0;
    tabs[i].classList.remove('active');
    contents[i].classList.remove('active');
  }
}

function showTab(i) {
  indexes[i].style.borderColor = 'rgba(211,38,38,0.6)';
  tabs[i].style.opacity = 1;
  tabs[i].style.zIndex = 5;
  tabs[i].classList.add('active');
  contents[i].classList.add('active');
}

function activate(e) {
  if (!e.target.matches('.indexes li')) return;
  reset();
  showTab(e.target.dataset.index);
}

const init = () => showTab(0);

window.addEventListener('load',init,false);
window.addEventListener('click',activate,false);

Footer Assets

Include external JavaScript libraries, if any, just before the closing `body` tag for optimal page loading.

By following these steps, you’ve successfully created accessible vertical tabs in JavaScript, enhancing the usability and accessibility of your web content. Remember to test your implementation thoroughly with different browsers and assistive technologies to ensure optimal performance.