W3C home > Mailing lists > Public > whatwg@whatwg.org > August 2010

[whatwg] Have tabstrip / tab elements been discussed?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 28 Aug 2010 15:40:34 -0700
Message-ID: <AANLkTimpBM+AGsACUL_CEMr2KjdrABioQHd8w-ntz-HZ@mail.gmail.com>
On Sat, Aug 28, 2010 at 3:32 PM, E.J. Zufelt <lists at zufelt.ca> wrote:
> It is important to provide semantic markup for complex UI controls where they are common, tabstrip/tab is one example of a common UI component that requires markup. ?This way meaningful information about the role of the component can be communicated to UAs. ?Particularly important for users who access the web non-visually, and who cannot rely upon the visual affordances of styled lists made to look like a tabstrip.

The semantics of a tab strip is simply "several sections with
headers".  That is, the following:

<cardstack>
  <tabs>
    <tab>First one</tab>
    <tab>Second one</tab>
    <tab>Third one</tab>
  </tabs>
  <cards>
    <card>I'm the first card</card>
    <card>I'm the second card</card>
    <card>I'm the third card</card>
  </cards>
</cardstack>

...is semantically equivalent to one or the other of the following:

<section>
  <h1>First one</h1>
  I'm the first card.
</section>
<section>
  <h1>Second one</h1>
  I'm the second card
</section>
<section>
  <h1>Third one</h1>
  I'm the third one
</section>

<nav>
  <ul>
    <li><a href=#one>First one</a></li>
    <li><a href=#two>Second one</a></li>
    <li><a href=#three>Third one</a></li>
  </ul>
</nav>
<section id=one>I'm the first one</section>
<section id=two>I'm the second one</section>
<section id=three>I'm the third one</section>


You can choose which is more appropriate for your particular usage.
Turning either of those into a cardstack visually is the job of CSS.

~TJ
Received on Saturday, 28 August 2010 15:40:34 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:00 UTC