Avoid tabs for complex content

The primary use case for tabs is when one set of information is far more important than others and does not need to be compared.

Typical example that causes barriers

Tabs can be mistakenly used for scenarios where people need to compare details across tabs.

Example
HTML
Nunjucks

<span class="govuk-caption-l">Original version</span>
<h1 class="govuk-heading-l">
  Bank details
</h1>
<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#current-account">
        Current account
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#savings-account">
        Savings account
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#credit-card">
        Credit card
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="current-account">
    <h2 class="govuk-heading-m">Current account balance</h2>
    <p class="govuk-body">Your balance is £1,929.32</p>
    <p class="govuk-body">Last updated 1 January 2025</p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="savings-account">
    <h2 class="govuk-heading-m">Savings account balance</h2>
    <p class="govuk-body">Your balance is £532.43</p>
    <p class="govuk-body">Last updated 1 January 2025</p>
    <p class="govuk-body">This account has a 5% AER interest rate</p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="credit-card">
    <h2 class="govuk-heading-m">Current account balance</h2>
    <p class="govuk-body">Your balance is -£231.99</p>
    <p class="govuk-body">Last updated 1 January 2025</p>
    <p class="govuk-body">This account has a 9% AER interest rate</p>
  </div>
</div>

<span class="govuk-caption-l">Original version</span>

<h1 class="govuk-heading-l">
  Bank details
</h1>

{{ govukTabs({
  items: [
    {
      label: "Current account",
      id: "current-account",
      panel: {
        html: '<h2 class="govuk-heading-m">Current account balance</h2><p class="govuk-body">Your balance is £1,929.32</p><p class="govuk-body">Last updated 1 January 2025</p>'
      }
    },
    {
      label: "Savings account",
      id: "savings-account",
      panel: {
        html: '<h2 class="govuk-heading-m">Savings account balance</h2><p class="govuk-body">Your balance is £532.43</p><p class="govuk-body">Last updated 1 January 2025</p><p class="govuk-body">This account has a 5% AER interest rate</p>'
      }
    },
    {
      label: "Credit card",
      id: "credit-card",
      panel: {
        html: '<h2 class="govuk-heading-m">Current account balance</h2><p class="govuk-body">Your balance is -£231.99</p><p class="govuk-body">Last updated 1 January 2025</p><p class="govuk-body">This account has a 9% AER interest rate</p>'
      }
    }
  ]
}) }}

Tabs, like accordions, can be a symptom of unstructured content design. It also does not act as a tab in mobile view so is a unequal experience.

<span class="govuk-caption-l">Improved version</span>
<h1 class="govuk-heading-l">
  Bank details
</h1>
<p class="govuk-body">
  Last updated 1 January 2025
</p>
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
<h2 class="govuk-heading-m">
  Current account balance
</h2>
<p class="govuk-body">
  Your balance is £1,929.32
</p>
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
<h2 class="govuk-heading-m">
  Savings account balance
</h2>
<p class="govuk-body">
  Your balance is £532.43
</p>
<p class="govuk-body">
  This account has a 5% AER interest rate
</p>
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
<h2 class="govuk-heading-m">
  Credit card balance
</h2>
<p class="govuk-body">
  Your balance is -£231.99
</p>
<p class="govuk-body">
  This account has a 9% AER interest rate
</p>

<span class="govuk-caption-l">Improved version</span>

<h1 class="govuk-heading-l">
  Bank details
</h1>

<p class="govuk-body">
  Last updated 1 January 2025
</p>

<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">

<h2 class="govuk-heading-m">
  Current account balance
</h2>

<p class="govuk-body">
  Your balance is £1,929.32
</p>

<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">

<h2 class="govuk-heading-m">
  Savings account balance
</h2>

<p class="govuk-body">
  Your balance is £532.43
</p>

<p class="govuk-body">
  This account has a 5% AER interest rate
</p>

<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">

<h2 class="govuk-heading-m">
  Credit card balance
</h2>

<p class="govuk-body">
  Your balance is -£231.99
</p>

<p class="govuk-body">
  This account has a 9% AER interest rate
</p>

Using a definition list means that what is visually shown on the page is more aligned with what is read out on a screen reader.