E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Greg Wocher
Date: Wed, Oct 02 2013 10:03AM
Subject: Tabbed interface on web pages
No previous message | Next message →

Hello all,
Where would be a good place to see how to create a tabbed interface on a
web page? I have looked thru doing a search with Google but there seems
to be several different ways of doing this. Also, what are everyone's
thoughts on this? I was listening to the latest episode of the Eyes On
Success podcast and it was mentioned in the podcast. It is something
that has intrigued me for some reason.

Thank you,
Greg Wocher

--
Follow me on Twitter @GWocher

From: Bryan Garaventa
Date: Wed, Oct 02 2013 10:54AM
Subject: Re: Tabbed interface on web pages
← Previous message | Next message →

You are welcome to test the following implementation if you like.
http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Tabs/ARIA%20Tabs%20(Internal%20Content)/demo.htm

----- Original Message -----
From: "Greg Wocher" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 02, 2013 9:03 AM
Subject: [WebAIM] Tabbed interface on web pages


> Hello all,
> Where would be a good place to see how to create a tabbed interface on a
> web page? I have looked thru doing a search with Google but there seems
> to be several different ways of doing this. Also, what are everyone's
> thoughts on this? I was listening to the latest episode of the Eyes On
> Success podcast and it was mentioned in the podcast. It is something
> that has intrigued me for some reason.
>
> Thank you,
> Greg Wocher
>
> --
> Follow me on Twitter @GWocher
>
> > >

From: Léonie Watson
Date: Thu, Oct 03 2013 2:09AM
Subject: Re: Tabbed interface on web pages
← Previous message | Next message →

Greg Wocher wrote:
"Where would be a good place to see how to create a tabbed interface on a
web page?"

The ARIA enhanced jQueryUI tabbed widget demonstrated here is a good
example:
http://hanshillen.github.io/jqtest/#goto_slider

Léonie.

From: Alastair Campbell
Date: Thu, Oct 03 2013 3:10AM
Subject: Re: Tabbed interface on web pages
← Previous message | Next message →

Jason Kiss's examples here are a good start (if the whatsock framework is
more than you were looking for):
http://accessibleculture.org/articles/2010/08/aria-tabs/

Worth reading this previous thread though, there are some usability
implications until people get used to the different interaction approach:
http://webaim.org/discussion/mail_thread?thread=5914

hth,

-Alastair

From: jason
Date: Thu, Oct 03 2013 4:00AM
Subject: Re: Tabbed interface on web pages
← Previous message | Next message →

Marco Zehe also has a nice, brief, and more recent account of ARIA tabs at http://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/. Also suggest reading through the comments.


Jason Kiss
= EMAIL ADDRESS REMOVED =
http://www.accessibleculture.org




On 3/10/2013, at 10:10 PM, Alastair Campbell < = EMAIL ADDRESS REMOVED = > wrote:

> Jason Kiss's examples here are a good start (if the whatsock framework is
> more than you were looking for):
> http://accessibleculture.org/articles/2010/08/aria-tabs/
>
> Worth reading this previous thread though, there are some usability
> implications until people get used to the different interaction approach:
> http://webaim.org/discussion/mail_thread?thread=5914
>
> hth,
>
> -Alastair
> > >

From: Bryan Garaventa
Date: Thu, Oct 03 2013 10:25AM
Subject: Re: Tabbed interface on web pages
← Previous message | No next message

That is a good article.

You can also use aria-expanded on an element with role=tab to indicate the
expanded state, which I've found to be more informative because it announces
"open" or "closed" for screen reader users.

There are also some important differences between accordions and tabs that
people need to be aware of, the lines of which seem to be blurred in the
comments. An ARIA tablist with role=tab should not be used on accordions.

----- Original Message -----
From: < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, October 03, 2013 3:00 AM
Subject: Re: [WebAIM] Tabbed interface on web pages


> Marco Zehe also has a nice, brief, and more recent account of ARIA tabs at
> http://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/.
> Also suggest reading through the comments.
>
>
> Jason Kiss
> = EMAIL ADDRESS REMOVED =
> http://www.accessibleculture.org
>
>
>
>
> On 3/10/2013, at 10:10 PM, Alastair Campbell < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Jason Kiss's examples here are a good start (if the whatsock framework is
>> more than you were looking for):
>> http://accessibleculture.org/articles/2010/08/aria-tabs/
>>
>> Worth reading this previous thread though, there are some usability
>> implications until people get used to the different interaction approach:
>> http://webaim.org/discussion/mail_thread?thread=5914
>>
>> hth,
>>
>> -Alastair
>> >> >> >
> > >