- From: E.J. Zufelt <lists@zufelt.ca>
- Date: Sat, 28 Aug 2010 18:46:37 -0400
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
Received on Saturday, 28 August 2010 15:46:37 UTC