Native <tab> elements

[Dan503]

Why?

Tabs are a very popular interface component found in both applications and web pages.

Making Tabs accessible can be a difficult task for developers resulting in many implementations being inaccessible.

How tabs are supposed to function via keyboard can also vary from site to site resulting in a confusing and inconsistent user experience for keyboard users in general.

The W3C has outlined what they feel makes for ideal tabs here: (manual switching) https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

And here: (automatic switching) https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

Those two example demonstrate how much code it takes to make this highly common interface component.

There have been usability issues identified with the W3C recommendations though: https://simplyaccessible.com/article/danger-aria-tabs/#acc-heading-2

If tabs became native elements, it would:

• Standardize the keyboard navigation behavior for tabs across websites so users would become less confused.
• Make it easy for developers to implement fully accessible tabs making the web in general more accessible for all users.
• Save developers time by not requiring them to code up custom tab interfaces all the time.

Proposed markup

<tabcontainer aria-label="Entertainment">

  <tablist>
    <tab selected>Nils Frahm</tab>
    <tab>Agnes Obel</tab>
    <tab>Joke</tab>
  </tablist>

  <tabpanel>
    <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
  </tabpanel>

  <tabpanel>
    <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
  </tabpanel>

  <tabpanel>
    <p>Fear of complicated buildings:</p>
    <p>A complex complex complex.</p>
  </tabpanel>

</tabcontainer>

Equivalent to writing this:

<div class="tabs">

  <div role="tablist" aria-label="Entertainment">
    <a href="#nils" role="tab" aria-selected="true" aria-controls="nils" id="nils-tab">
      Nils Frahm
    </a>
    <a href="#agnes" role="tab" aria-selected="false" aria-controls="agnes" id="agnes-tab" tabindex="-1">
      Agnes Obel
    </a>
    <a href="#joke" role="tab" aria-selected="false" aria-controls="joke" id="joke-tab" tabindex="-1">
      Joke
    </a>
  </div>

  <div tabindex="-1" role="tabpanel" id="nils" aria-labelledby="nils-tab">
    <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
  </div>

  <div tabindex="-1" role="tabpanel" id="agnes" aria-labelledby="agnes-tab" hidden>
    <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
  </div>

  <div tabindex="-1" role="tabpanel" id="joke" aria-labelledby="joke-tab" hidden>
    <p>Fear of complicated buildings:</p>
    <p>A complex complex complex.</p>
  </div>

</div>

Proposed functionality

Use the Automatic activation tabs as a basis for the default functionality: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

Two small exceptions:

• Pressing [enter] or [space] on a <tab> element should then send focus to the associated <tabpanel>
• <tabpanel> elements should not be included in keyboard [tab] sequence. They are not interactive elements so it doesn't make sense for them to attract keyboard focus.

If a manual="true" attribute is added to the <tabcontainer> element, it has functionality more reminiscent of the manual example: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html (same 2 exceptions apply)

If a selected attribute is not used on one of the <tab> elements, the first <tab> should be selected by default.

A :selected CSS psudo selector will need to be introduced to allow authors to style the active tab element.

How does the browser know what panel belongs to what tab?

If there is only one <tabpanel> in the <tabcontainer> it is considered always active and is associated with whatever the active <tab> is at the time. This is so that people who want to dynamically load in the tab content can do so easily.

If there are an equal number of <tabpanel> to <tab> elements inside the <tabcontainer>, the 1st <tab> will control the 1st <tabpanel>, the 2nd <tab> will control the 2nd <tabpanel>, and so on until all tabs and tab panels are accounted for.

If there is more than one <tabpanel> element but the number of <tabpanel> to <tab> elements is not equal to one another, it is considered invalid HTML.

It is also considered invalid if there is no <tablist>, <tab>, or <tabpanel> element present.

[prlbr]

First of all, I would really like a native tab interface as proposed by you. 👍

What's your opinion on a syntax that groups the tabs' names with their content though:

<tabcontainer aria-label="Entertainment">

  <tabpanel>
    <tab selected>Nils Frahm</tab>
    <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
  </tabpanel>

  <tabpanel>
    <tab>Agnes Obel</tab>
    <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
  </tabpanel>

  <tabpanel>
    <tab>Joke</tab>
    <p>Fear of complicated buildings:</p>
    <p>A complex complex complex.</p>
  </tabpanel>

</tabcontainer>

I understand why the tab names are placed first for accessibility in a non-native solution, but that should not be an issue in a native solution and I think grouping together what belongs together makes the source clearer and easier managable for authors. For example changing the tab order would require a single copy&paste then.

[Dan503]

That's an interesting idea.

The issue I see with that approach is how difficult it will be to apply custom styles to it.

Since it isn't as simple as applying some default styles to elements, it means that it will involve shadow DOM and psudo-element selectors. That isn't too bad, but is just something to be aware of.

It might look something like this:

tabcontainer {
  /* outer container styles */
}

tabcontainer::list {
  /* wrapper around the tab buttons styles */
}

tabcontainer::tab {
  /* tab button styles */
}

tabcontainer::panel {
  /* tab panel styles */
}

[Dan503]

I would also probably put the selected attribute on the <tabpanel> element rather than the <tab> element if your idea was implemented.

Parent 》 child relationships tend to be easier to work with / better performance than child 》 parent relationships.

[Dan503]

Actually I'm going to close this issue as a duplicate of https://github.com/whatwg/html/issues/1809

There is a much larger conversation of the problem happening over in that issue.