ARIA Tab Example

PHOTO EMBED

Tue Mar 22 2022 16:47:41 GMT+0000 (UTC)

Saved by @BlackandYellow ##html ##accessibile #componets

<div id="tabs">

  <!-- Instructions for keyboard users -->

  <div
    class="sr-only tabs__instructions"
    id="tabs-keyboard-only-instructions"
  >
    Use arrow keys to choose tabs. Content for the chosen tab will be revealed below.
  </div>

  <!-- Here are the tabs -->

  <ul
    class="enable-tablist"
    data-keyboard-only-instructions="tabs-keyboard-only-instructions"
  >
    <li>
      <a
        href="#heading__jamaican-ska"
        class="enable-tab"
        data-owns="tabpanel__jamaican-ska"
      >
        Jamaican Ska
      </a>
    </li>
    <li>
      <a
        href="#heading__two-tone"
        class="enable-tab"
        data-owns="tabpanel__two-tone"
      >
        2 Tone
      </a>
    </li>
    <li>
      <a
        href="#heading__third-wave"
        class="enable-tab"
        data-owns="tabpanel__third-wave"
      >
        Third Wave
      </a>
    </li>
  </ul>
  <div
    class="enable-tabpanel"
    id="tabpanel__jamaican-ska"
  >
    <h2
      tabindex="-1"
      id="heading__jamaican-ska"
    >
      Jamaican Ska
    </h2>
    <div
      class="tab__content"
    >
      <p>
        Ska's origins are from 1960s Jamaica. One theory about the origin of ska is that Prince
        Buster created it during the inaugural recording session for his new record label Wild Bells.
      </p>
      <p>
        Artists include:
      </p>
      <ol>
        <li>
          The Skatellites
        </li>
        <li>
          Prince Buster
        </li>
        <li>
          Desmond Dekker
        </li>
        <li>
          Millie Small
        </li>
        <li>
          Byron Lee and the Dragonaires
        </li>
        <li>
          Laurel Aitken
        </li>
        <li>
          The Wailers
        </li>
        <li>
          Jimmy Cliff
        </li>
        <li>
          Eric "Monty" Morris
        </li>
      </ol>
      <a
        href="https://jamaicansmusic.com/learn/origins/ska"
      >
        More information about Jamaican Ska
      </a>
    </div>
  </div>
  <div
    class="enable-tabpanel"
    id="tabpanel__two-tone"
  >
    <h2
      tabindex="-1"
      id="heading__two-tone"
    >
      2 Tone Ska
    </h2>
    <div
      class="tab__content"
    >
      <p>
        The 2 Tone genre, which began in the late 1970s in the Coventry area of UK, was a fusion of Jamaican ska rhythms and melodies with punk rock's more aggressive guitar chords and lyrics.[24] Compared to 1960s ska, 2 Tone music had faster tempos, fuller instrumentation, and a harder edge. The genre was named after 2 Tone Records, a record label founded by Jerry Dammers of The Specials.
      </p>
      <p>
        Artists include:
      </p>
      <ol>
        <li>
          The Specials
        </li>
        <li>
          Madness
        </li>
        <li>
          Bad Manners
        </li>
        <li>
          The Selector
        </li>
        <li>
          The Beat (a.k.a. "The English Beat" in the U.S.)
        </li>
        <li>
          The Body Snatchers
        </li>
        <li>
          Akrylykz
        </li>
      </ol>
      <a
        href="https://www.theguardian.com/music/2021/apr/30/a-blur-of-legs-arms-and-adrenaline-the-astonishing-history-of-two-tone"
      >
        More information about 2 Tone Ska
      </a>
    </div>
  </div>
  <div
    class="enable-tabpanel"
    id="tabpanel__third-wave"
  >
    <h2
      tabindex="-1"
      id="heading__third-wave"
    >
      Third Wave
    </h2>
    <div
      class="tab__content"
    >
      <p>
        Third-wave ska originated in the punk scene in the late 1980s and became commercially successful in the 1990s. Although some third-wave ska has a traditional 1960s sound, most third-wave ska is characterized by dominating guitar riffs and large horn sections.
      </p>
      <ol>
        <li>
          The Toasters
        </li>
        <li>
          Fishbone
        </li>
        <li>
          No Doubt
        </li>
        <li>
          The Mighty Mighty Bosstones
        </li>
        <li>
          Streetlight Manifesto
        </li>
        <li>
          The Hotknives
        </li>
        <li>
          Hepcat
        </li>
        <li>
          The Slackers
        </li>
        <li>
          Sublime
        </li>
        <li>
          Suicide Machines
        </li>
        <li>
          Voodoo Glow Skulls
        </li>
        <li>
          Reel Big Fish
        </li>
        <li>
          Less Than Jake
        </li>
        <li>
          Bim Skala Bim
        </li>
      </ol>
      <a
        href="https://en.wikipedia.org/wiki/Ska#Third_wave_ska"
      >
        More information about Third Wave Ska
      </a>
    </div>
  </div>
</div>
content_copyCOPY

Step#1 Create basic DOM for users without JavaScript

https://www.useragentman.com/enable/tabs.php