[whatwg] Have tabstrip / tab elements been discussed?

[Ian Hickson]

On Sat, 28 Aug 2010, E.J. Zufelt wrote:
> 
> I am rather new to this list and am curious if anytime recently there 
> has been discussion about adding tabstrip and tab elements to the html5 
> spec?  The concept of a tabstrip is a rather commonly used UI component 
> on the web (web-applications, content management systems, facetted 
> searches) and it would be particularly useful for accessibility if we 
> could communicate the semantics of the tabstrip through markup.

It has been considered in the past, but on reflection, it seems that tabs 
are really just a presentational overflow mechanism, rather than a core 
part of an application or document.

For example, there's really no meaningful difference between these two 
pages, and so you could imagine using alternative style sheets to make 
the same underlying HTML document render either way:

   +-------------------+
   | .------._______   |  using tabs,
   |_| Food |_Drink_|__|  with the two sections
   |                   |  behind each other.
   |  (o) Pizza        |
   |  ( ) Calzone      |
   |                   |
   |                   |
   +-------------------+

   +-----------------+-+
   | Food            |A|  using a scrollbar,
   | ----            | |  with the two sections
   |  (o) Pizza      |#|  below each other.
   |  ( ) Calzone    | |
   |                 | |
   | Drinks          | |
   | ------          |V|
   +-----------------+-+

On Sat, 28 Aug 2010, Tab Atkins Jr. wrote:
> 
> 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>

Indeed.


On Sat, 28 Aug 2010, E.J. Zufelt wrote:
>
> I would disagree with this.  There is a meaning in a tabstrip greater 
> than a list of elements.  Namely, 1. tabs act within an inferred context 
> (a list item may completely change the context), 2. A single tab is 
> selected (possibly 0 to many, but usually 1).

Conceptually, a tab strip is just an overflow mechanism, which section is 
selected is not a meaningful UI decision beyond the visual. That is, a 
user should not be worried that opening a different tab is going to change 
what happens.

As such, it's always equivalent to just showing all the tab panels one 
after each other with a heading.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'