[whatwg] Have tabstrip / tab elements been discussed?
E.J. Zufelt
lists at zufelt.ca
Sat Aug 28 15:46:37 PDT 2010
On 2010-08-28, at 6:40 PM, Tab Atkins Jr. wrote:
> 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:
>
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).
> <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
More information about the whatwg
mailing list