WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: ARIA tab interface

for

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

From: Tom Livingston
Date: Thu, Oct 17 2019 1:13PM
Subject: ARIA tab interface
No previous message | Next message →

Hello list,

We have a design for a page with what I believe to be a tab interface.
A row of buttons that show/hide related content. The design, however,
isn't showing any tabs selected by default when the page initially
loads. Is this easy enough to do or would not having a tab and related
content visible on page load be wrong?

Thanks

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: Tom Livingston
Date: Thu, Oct 17 2019 1:23PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

Also, I'll add that this is the method I was looking to implement:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role



On Thu, Oct 17, 2019 at 3:13 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello list,
>
> We have a design for a page with what I believe to be a tab interface.
> A row of buttons that show/hide related content. The design, however,
> isn't showing any tabs selected by default when the page initially
> loads. Is this easy enough to do or would not having a tab and related
> content visible on page load be wrong?
>
> Thanks
>


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: glen walker
Date: Thu, Oct 17 2019 2:57PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

Seems a little odd to use a tab navigator but not have any of the tabs'
contents displayed by default. So the content panel is empty initially?

After a tab is selected, and content is displayed, can the user unselect
the tab and go to the initial state?


On Thu, Oct 17, 2019 at 1:23 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:

> Also, I'll add that this is the method I was looking to implement:
>
>
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
>
>
>
> On Thu, Oct 17, 2019 at 3:13 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Hello list,
> >
> > We have a design for a page with what I believe to be a tab interface.
> > A row of buttons that show/hide related content. The design, however,
> > isn't showing any tabs selected by default when the page initially
> > loads. Is this easy enough to do or would not having a tab and related
> > content visible on page load be wrong?
> >
> > Thanks
> >
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> > > > >

From: Tom Livingston
Date: Thu, Oct 17 2019 3:06PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

That was my initial thought as well, which is why I asked. I guess
what I was looking for was if it is a no-no from an accessibility
rules stand point. The design makes sense to look at it. They are more
like buttons that tabs - visually speaking - and they represent
choices. Once a choice is made, related content appears. I was reading
about aria-controls and the design doesn't lend itself to some of the
build recommendations suggested to make that a viable option. My
content is basically a tabbed interface, but like I said, didn't show
tab 1 on load.

So, is it a bad thing or just not the norm?



On Thu, Oct 17, 2019 at 4:58 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> Seems a little odd to use a tab navigator but not have any of the tabs'
> contents displayed by default. So the content panel is empty initially?
>
> After a tab is selected, and content is displayed, can the user unselect
> the tab and go to the initial state?
>
>
> On Thu, Oct 17, 2019 at 1:23 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Also, I'll add that this is the method I was looking to implement:
> >
> >
> > https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
> >
> >
> >
> > On Thu, Oct 17, 2019 at 3:13 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
> > >
> > > Hello list,
> > >
> > > We have a design for a page with what I believe to be a tab interface.
> > > A row of buttons that show/hide related content. The design, however,
> > > isn't showing any tabs selected by default when the page initially
> > > loads. Is this easy enough to do or would not having a tab and related
> > > content visible on page load be wrong?
> > >
> > > Thanks
> > >
> >

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: Jeremy Echols
Date: Thu, Oct 17 2019 3:48PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

Is there a reason not to show anything prior to choosing a tab? Users who are familiar with the tab panel pattern (either from other websites or just desktop apps) will expect something by default - that's just how tabbed panels historically are implemented. Additionally, the tab pattern has a good deal of overhead to implement it correctly (http://w3c.github.io/aria-practices/#tabpanel).

It makes sense in the context of things like a control panel or different facets of related data. But if you're doing something different enough that it won't even *look* like a tab panel, chances are you want to implement a different, and possibly simpler, pattern, such as the disclosure described at http://w3c.github.io/aria-practices/#disclosure. Or if the sections are mutually exclusive, maybe an accordion: http://w3c.github.io/aria-practices/#accordion.

A tabbed view might be perfectly valid in terms of WCAG, but it's nontrivial to implement a tab panel properly (if you declare it as a tab panel, it has to act like one or else it *will* fail WCAG), and your visuals might be confusing to users who are sighted but use a screen reader.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Tom Livingston
Sent: Thursday, October 17, 2019 14:06
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] ARIA tab interface

That was my initial thought as well, which is why I asked. I guess what I was looking for was if it is a no-no from an accessibility rules stand point. The design makes sense to look at it. They are more like buttons that tabs - visually speaking - and they represent choices. Once a choice is made, related content appears. I was reading about aria-controls and the design doesn't lend itself to some of the build recommendations suggested to make that a viable option. My content is basically a tabbed interface, but like I said, didn't show tab 1 on load.

So, is it a bad thing or just not the norm?



On Thu, Oct 17, 2019 at 4:58 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> Seems a little odd to use a tab navigator but not have any of the tabs'
> contents displayed by default. So the content panel is empty initially?
>
> After a tab is selected, and content is displayed, can the user
> unselect the tab and go to the initial state?
>
>
> On Thu, Oct 17, 2019 at 1:23 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Also, I'll add that this is the method I was looking to implement:
> >
> >
> > https://urldefense.com/v3/__https://developer.mozilla.org/en-US/docs
> > /Web/Accessibility/ARIA/Roles/Tab_Role__;!5W9E9PnL_ac!XDqCdOssKzTIif
> > imWzn88N0W7tnOhzkz_fNX66qGAasA2BBOfY-42A-hV8paAKlpcQ$
> >
> >
> >
> > On Thu, Oct 17, 2019 at 3:13 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
> > >
> > > Hello list,
> > >
> > > We have a design for a page with what I believe to be a tab interface.
> > > A row of buttons that show/hide related content. The design,
> > > however, isn't showing any tabs selected by default when the page
> > > initially loads. Is this easy enough to do or would not having a
> > > tab and related content visible on page load be wrong?
> > >
> > > Thanks
> > >
> >

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: glen walker
Date: Thu, Oct 17 2019 5:23PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

If you have a series of buttons, perhaps the "disclosure widget" would be a
better pattern.

https://www.w3.org/TR/wai-aria-practices/#disclosure


On Thu, Oct 17, 2019 at 3:06 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:

> That was my initial thought as well, which is why I asked. I guess
> what I was looking for was if it is a no-no from an accessibility
> rules stand point. The design makes sense to look at it. They are more
> like buttons that tabs - visually speaking - and they represent
> choices. Once a choice is made, related content appears. I was reading
> about aria-controls and the design doesn't lend itself to some of the
> build recommendations suggested to make that a viable option. My
> content is basically a tabbed interface, but like I said, didn't show
> tab 1 on load.
>
> So, is it a bad thing or just not the norm?
>
>
>

From: Tom Livingston
Date: Thu, Oct 17 2019 5:58PM
Subject: Re: ARIA tab interface
← Previous message | Next message →

I will look into this. Thanks for the help.



On Thu, Oct 17, 2019 at 7:24 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> If you have a series of buttons, perhaps the "disclosure widget" would be a
> better pattern.
>
> https://www.w3.org/TR/wai-aria-practices/#disclosure
>
>
> On Thu, Oct 17, 2019 at 3:06 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> > That was my initial thought as well, which is why I asked. I guess
> > what I was looking for was if it is a no-no from an accessibility
> > rules stand point. The design makes sense to look at it. They are more
> > like buttons that tabs - visually speaking - and they represent
> > choices. Once a choice is made, related content appears. I was reading
> > about aria-controls and the design doesn't lend itself to some of the
> > build recommendations suggested to make that a viable option. My
> > content is basically a tabbed interface, but like I said, didn't show
> > tab 1 on load.
> >
> > So, is it a bad thing or just not the norm?
> >
> >
> >
> > > > >
--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: Tom Livingston
Date: Fri, Oct 18 2019 8:13AM
Subject: Re: ARIA tab interface
← Previous message | Next message →

I looked into disclosure. I cannot construct the source to be inline
with the examples and suggested methods. My design does not lend
itself to having the hidden content be the next item in the source. My
buttons are in a row - like tabs - which is why I started down that
path. I think we will be able to default to the first item being
disclosed on load.

As a second part to my issue, is it difficult or even a bad thing to
have a tab system inside of another? The content of my first 'tab' is
another tabbed interface.



On Thu, Oct 17, 2019 at 7:24 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> If you have a series of buttons, perhaps the "disclosure widget" would be a
> better pattern.
>
> https://www.w3.org/TR/wai-aria-practices/#disclosure
>
>
> On Thu, Oct 17, 2019 at 3:06 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> > That was my initial thought as well, which is why I asked. I guess
> > what I was looking for was if it is a no-no from an accessibility
> > rules stand point. The design makes sense to look at it. They are more
> > like buttons that tabs - visually speaking - and they represent
> > choices. Once a choice is made, related content appears. I was reading
> > about aria-controls and the design doesn't lend itself to some of the
> > build recommendations suggested to make that a viable option. My
> > content is basically a tabbed interface, but like I said, didn't show
> > tab 1 on load.
> >
> > So, is it a bad thing or just not the norm?


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: glen walker
Date: Fri, Oct 18 2019 11:28AM
Subject: Re: ARIA tab interface
← Previous message | No next message

If tabs are semantically constructed, you can have a nested tab. It's not
any more difficult than building your main tab.

Whether it's "bad" is more about usability. There are lots of "bad"
designs out there. I don't think having a tab in a tab is automatically a
bad thing.

On Fri, Oct 18, 2019 at 8:14 AM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:

> As a second part to my issue, is it difficult or even a bad thing to
> have a tab system inside of another? The content of my first 'tab' is
> another tabbed interface.
>
>
>