Re: [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:
> 
> 
>   
> First one
> Second one
> Third one
>   
>   
> I'm the first card
> I'm the second card
> I'm the third card
>   
> 
> 
> ...is semantically equivalent to one or the other of the following:
> 
> 
>   First one
>   I'm the first card.
> 
> 
>   Second one
>   I'm the second card
> 
> 
>   Third one
>   I'm the third one
> 
> 
> 
>   
> First one
> Second one
> Third one
>   
> 
> I'm the first one
> I'm the second one
> I'm the third one

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.   `._.-(,_..'--(,_..'`-.;.'

Re: [whatwg] Have tabstrip / tab elements been discussed?

[E.J. Zufelt]

On 2010-08-28, at 7:00 PM, Benjamin Hawkes-Lewis wrote:

> 
> On 28 Aug 2010, at 23:39, E.J. Zufelt wrote:
>> I am suggesting that a different tab page would not be "navigation" in the 
>> common sense, as the user is not leaving the current page, just switching 
>> contexts within the application.
> 
> But the draft is explicit that links in a "nav" element might only switch 
> contexts within the current page:
> 
> "The nav element represents a section of a page that links to other pages or 
> to parts within the page"
> 
> http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element
> 
> It's not idiosyncratic to call tabpage-switching "navigation". Here's an 
> example from the Yahoo! Design Pattern Library:
> 
> http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html
> 
I believe that there is a cognitive difference between a list of navigation 
links, a list of controls that make up a "menu" and a list of controls that 
make up a tablist (to borrow terminology from ARIA).  A web application, for 
example, may be on a page with header and footer navigation, and the 
application itself may have a menu system and make use of a tablist.  These 
different lists of components are so frequently styled differently than one 
another that it is easy to infer a difference in meaning that is being 
communicated.  A menu may have items to save, restore, get help, change program 
settings.  A tabstrip may allow a user to switch between several currently open 
documents.

Thanks,
Everett

Re: [whatwg] Have tabstrip / tab elements been discussed?

[Benjamin Hawkes-Lewis]

On 28 Aug 2010, at 23:39, E.J. Zufelt wrote:
> I am suggesting that a different tab page would not be "navigation" in the 
> common sense, as the user is not leaving the current page, just switching 
> contexts within the application.

But the draft is explicit that links in a "nav" element might only switch 
contexts within the current page:

"The nav element represents a section of a page that links to other pages or to 
parts within the page"

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

It's not idiosyncratic to call tabpage-switching "navigation". Here's an 
example from the Yahoo! Design Pattern Library:

http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html

> Another example might be where a tabstrip is used informationally, without 
> attached behavior, to indicate perhaps which step of a process a user is 
> currently on.

I can imagine this being styled to look like a tabstrip, but I would not call a 
UI component that did not actually allow users to switch contexts to be a 
tabstrip.

I'd suggest simply using a list here like so:


Order progress

Name and address
Current step: Order details
Payment information




With CSS, the "span" can be hidden (e.g. offscreen) and the current step marked 
with different colors and bold text, for example.

> A list of tabs differs from a list of links, because when selecting a tab the 
> user expects the change to stay within a greater context.  If I am logged 
> into a CMS and viewing a blog article, tabs may be View, Edit, Track Changes, 
> etc.  As a tabstrip I expect these actions to be meaningful within the 
> current context of the article.

These sound more like commands in a toolbar than a tablist. Couldn't you use 
the "menu" element?

http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus

--
Benjamin Hawkes-Lewis

Re: [whatwg] Have tabstrip / tab elements been discussed?

[E.J. Zufelt]

On 2010-08-28, at 6:40 PM, Tab Atkins Jr. wrote:

> On Sat, Aug 28, 2010 at 3:32 PM, E.J. Zufelt  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).

> 
>  
>First one
>Second one
>Third one
>  
>  
>I'm the first card
>I'm the second card
>I'm the third card
>  
> 
> 
> ...is semantically equivalent to one or the other of the following:
> 
> 
>  First one
>  I'm the first card.
> 
> 
>  Second one
>  I'm the second card
> 
> 
>  Third one
>  I'm the third one
> 
> 
> 
>  
>First one
>Second one
>Third one
>  
> 
> I'm the first one
> I'm the second one
> I'm the third one
> 
> 
> 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

Re: [whatwg] Have tabstrip / tab elements been discussed?

[Tab Atkins Jr.]

On Sat, Aug 28, 2010 at 3:32 PM, E.J. Zufelt  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:


  
First one
Second one
Third one
  
  
I'm the first card
I'm the second card
I'm the third card
  


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


  First one
  I'm the first card.


  Second one
  I'm the second card


  Third one
  I'm the third one



  
First one
Second one
Third one
  

I'm the first one
I'm the second one
I'm the third one


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

Re: [whatwg] Have tabstrip / tab elements been discussed?

[E.J. Zufelt]

On 2010-08-28, at 6:25 PM, Benjamin Hawkes-Lewis wrote:

> On 28 Aug 2010, at 06:10, E.J. Zufelt wrote:
>> 1. nav is for navigation, but in a web app selecting a tab may nave nothing 
>> to do with "navigation", it may have to do with switching UI pages, which 
>> could potentially be considered "navigation".
> 
> I can't grok this sentence. You say it may have nothing to do with 
> navigation, but then give an example of navigation. What's an example of a 
> tablist tab that does not switch to (i.e. navigate to) a different tabpage?

I could have been more clear.  I am suggesting that a different tab page would 
not be "navigation" in the common sense, as the user is not leaving the current 
page, just switching contexts within the application.  Another example might be 
where a tabstrip is used informationally, without attached behavior, to 
indicate perhaps which step of a process a user is currently on.

A list of tabs differs from a list of links, because when selecting a tab the 
user expects the change to stay within a greater context.  If I am logged into 
a CMS and viewing a blog article, tabs may be View, Edit, Track Changes, etc.  
As a tabstrip I expect these actions to be meaningful within the current 
context of the article.

> 
>> 2. Unless a list item can receive a selected attribute, then we would still 
>> have no method of presenting information about the selected tab through 
>> markup alone.  Commonly the selected tab is given a class such as 
>> "tab-selected" and this meaning is communicated through style alone.
> 
> So basically you want an HTML5 native equivalent of "aria-selected='true'"?
> 
> http://www.w3.org/WAI/PF/aria/complete#aria-selected
> 
Yes, as a matter of fact a tabstrip element could contain list items, one of 
which could be selected.  Tabstrips are essentially a different type of list, 
and there is currently no method of communicating this in html5.

Thanks,
Everett

Re: [whatwg] Have tabstrip / tab elements been discussed?

[E.J. Zufelt]

On 2010-08-28, at 6:10 PM, Tab Atkins Jr. wrote:

> On Fri, Aug 27, 2010 at 9:54 PM, E.J. Zufelt  wrote:
>> Good evening,
>> 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.
>> My definition for a tabstrip is a collection of items (tabs) of which one is
>> "active" or "selected", each tab usually will perform an action when
>> activated.
>> Possible markup for tabs with no function (informational only).
>> 
>>   Apple
>>   Orange
>>   Peach
>> 
>> For active elements like links anchor or buttons could be used within each
>> tab.
> 
> This is a CSS issue, not an HTML one.  Hiding temporarily-inactive
> panes is just a matter of display:none'ing some of them.  There is
> additional plumbing you have to hook up so that clicking on a tab sets
> the active one appropriately, but that should be pursued as a new
> ability in CSS.  I know it's been discussed in the group a few times,
> though no draft has come out of it yet.

Note that I am not talking about behavior here (scripting what happens), or 
style (what is visible and what it looks like), I am talking about markup for 
the UI component itself.  In the same way that a button is a UI component in 
markup (even though all button functions and appearance could be achieved 
without a button in markup.

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.

Thanks,
Everett


> 
> ~TJ

Re: [whatwg] Have tabstrip / tab elements been discussed?

[Benjamin Hawkes-Lewis]

On 28 Aug 2010, at 06:10, E.J. Zufelt wrote:
> 1. nav is for navigation, but in a web app selecting a tab may nave nothing 
> to do with "navigation", it may have to do with switching UI pages, which 
> could potentially be considered "navigation".

I can't grok this sentence. You say it may have nothing to do with navigation, 
but then give an example of navigation. What's an example of a tablist tab that 
does not switch to (i.e. navigate to) a different tabpage?

> 2. Unless a list item can receive a selected attribute, then we would still 
> have no method of presenting information about the selected tab through 
> markup alone.  Commonly the selected tab is given a class such as 
> "tab-selected" and this meaning is communicated through style alone.

So basically you want an HTML5 native equivalent of "aria-selected='true'"?

http://www.w3.org/WAI/PF/aria/complete#aria-selected

--
Benjamin Hawkes-Lewis

Re: [whatwg] Have tabstrip / tab elements been discussed?

[Tab Atkins Jr.]

On Fri, Aug 27, 2010 at 9:54 PM, E.J. Zufelt  wrote:
> Good evening,
> 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.
> My definition for a tabstrip is a collection of items (tabs) of which one is
> "active" or "selected", each tab usually will perform an action when
> activated.
> Possible markup for tabs with no function (informational only).
> 
>   Apple
>   Orange
>   Peach
> 
> For active elements like links anchor or buttons could be used within each
> tab.

This is a CSS issue, not an HTML one.  Hiding temporarily-inactive
panes is just a matter of display:none'ing some of them.  There is
additional plumbing you have to hook up so that clicking on a tab sets
the active one appropriately, but that should be pursued as a new
ability in CSS.  I know it's been discussed in the group a few times,
though no draft has come out of it yet.

~TJ

Re: [whatwg] Have tabstrip / tab elements been discussed?

[E.J. Zufelt]

On 2010-08-28, at 12:59 AM, Nils Dagsson Moskopp wrote:

> "E.J. Zufelt"  schrieb am Sat, 28 Aug 2010 00:54:06
> -0400:
> 
>> […]
>> 
>> 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.
>> 
>> […]
> 
> In your opinion, what is wrong with using  and (nested) list
> elements?

Using nav with a nested list has two problems that I can see.

1. nav is for navigation, but in a web app selecting a tab may nave nothing to 
do with "navigation", it may have to do with switching UI pages, which could 
potentially be considered "navigation".

2. Unless a list item can receive a selected attribute, then we would still 
have no method of presenting information about the selected tab through markup 
alone.  Commonly the selected tab is given a class such as "tab-selected" and 
this meaning is communicated through style alone.

Thanks,
Everett

Re: [whatwg] Have tabstrip / tab elements been discussed?

[Nils Dagsson Moskopp]

"E.J. Zufelt"  schrieb am Sat, 28 Aug 2010 00:54:06
-0400:

> […]
> 
> 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.
> 
> […]

In your opinion, what is wrong with using  and (nested) list
elements?

-- 
Nils Dagsson Moskopp // erlehmann



signature.asc
Description: PGP signature