E-mail List Archives
Thread: Any ARIA conforming tab panels out there in the wild?
Number of posts in this thread: 9 (In chronological order)
From: Detlev Fischer (TK)
Date: Fri, May 18 2018 9:14AM
Subject: Any ARIA conforming tab panels out there in the wild?
No previous message | Next message →
Hi,
I am searching for a good example of a ARIA tab panel in the wild (i.e.,
one on a public, production-type web site or web app, *not* one of the
best-practice examples out there). The example should conform (more or
less) to the implementation recommended in the WAI-ARIA Authoring
Practices 1.1
https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
having either a manual or automatic activation of the panel.
Most examples I have come across 'in the wild' have implemented tabbing
to tabs (I am aware of the debate around that, and the pros and cons)
but here, I am explicitly looking for an example that uses arrow keys to
focus the tabs.
Can any of you point to good implementations?
Best,
Detlev
--
---------------------------------------------------------------
Detlev Fischer PhD
Testkreis
http://testkreis.de
Telefon: +49-40-43 18 75-25
Mobile: +49-157 57 57 57 45
Fax: +49-40-43 18 75-45
E-Mail: = EMAIL ADDRESS REMOVED =
Anschrift: Werderstr. 34, 20166 Hamburg
Amtsgericht Hamburg HRB 58 167
---------------------------------------------------------------
From: glen walker
Date: Fri, May 18 2018 9:38AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
https://www.sas.com/en_us/software/visual-analytics/demo/banking-and-risk-insights/sample-report.html
You tab (key) to the tab control and it's one tab stop. You use left/right
arrow keys to navigate among the tabs and press enter to select/load the
contents of the tab.
It's using the tablist, tab, and tabpanel roles.
Glen
On Fri, May 18, 2018 at 9:14 AM, Detlev Fischer (TK) <
= EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I am searching for a good example of a ARIA tab panel in the wild (i.e.,
> one on a public, production-type web site or web app, *not* one of the
> best-practice examples out there). The example should conform (more or
> less) to the implementation recommended in the WAI-ARIA Authoring Practices
> 1.1
>
> https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
>
> having either a manual or automatic activation of the panel.
>
> Most examples I have come across 'in the wild' have implemented tabbing to
> tabs (I am aware of the debate around that, and the pros and cons) but
> here, I am explicitly looking for an example that uses arrow keys to focus
> the tabs.
>
> Can any of you point to good implementations?
>
> Best,
>
> Detlev
>
> --
> ---------------------------------------------------------------
> Detlev Fischer PhD
> Testkreis
> http://testkreis.de
>
> Telefon: +49-40-43 18 75-25
> Mobile: +49-157 57 57 57 45
> Fax: +49-40-43 18 75-45
> E-Mail: = EMAIL ADDRESS REMOVED =
>
> Anschrift: Werderstr. 34
> <https://maps.google.com/?q=Werderstr.+34&entry=gmail&source=g>, 20166
> Hamburg
> Amtsgericht Hamburg HRB 58 167
> ---------------------------------------------------------------
>
> > > > >
From: Steve Green
Date: Fri, May 18 2018 10:13AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
That example works ok with keyboard navigation but it's not a great user experience with JAWS. In common with most, but not all, examples of tabbed interfaces it's necessary to use the hideous Alt+Insert+M shortcut to get to the tabpanel.
I find this to be the most difficult of all the JAWS shortcuts and I would be interested to know what JAWS users think of it. In fact, I wonder how many JAWS users ever use it, other than professionals like the people on this forum. Has anyone done any user testing with tabbed interfaces? I am tempted to include this example in the next project we do even though it's unrelated to anything we will be working on.
Regards,
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: 18 May 2018 16:38
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Any ARIA conforming tab panels out there in the wild?
https://www.sas.com/en_us/software/visual-analytics/demo/banking-and-risk-insights/sample-report.html
You tab (key) to the tab control and it's one tab stop. You use left/right arrow keys to navigate among the tabs and press enter to select/load the contents of the tab.
It's using the tablist, tab, and tabpanel roles.
Glen
On Fri, May 18, 2018 at 9:14 AM, Detlev Fischer (TK) < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I am searching for a good example of a ARIA tab panel in the wild
> (i.e., one on a public, production-type web site or web app, *not* one
> of the best-practice examples out there). The example should conform
> (more or
> less) to the implementation recommended in the WAI-ARIA Authoring
> Practices
> 1.1
>
> https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
>
> having either a manual or automatic activation of the panel.
>
> Most examples I have come across 'in the wild' have implemented
> tabbing to tabs (I am aware of the debate around that, and the pros
> and cons) but here, I am explicitly looking for an example that uses
> arrow keys to focus the tabs.
>
> Can any of you point to good implementations?
>
> Best,
>
> Detlev
>
> --
> ---------------------------------------------------------------
> Detlev Fischer PhD
> Testkreis
> http://testkreis.de
>
> Telefon: +49-40-43 18 75-25
> Mobile: +49-157 57 57 57 45
> Fax: +49-40-43 18 75-45
> E-Mail: = EMAIL ADDRESS REMOVED =
>
> Anschrift: Werderstr. 34
> <https://maps.google.com/?q=Werderstr.+34&entry=gmail&source=g>, 20166
> Hamburg Amtsgericht Hamburg HRB 58 167
> ---------------------------------------------------------------
>
> > > archives at http://webaim.org/discussion/archives
> >
From: glen walker
Date: Fri, May 18 2018 11:43AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
How JAWS decided to implement aria-controls is somewhat tangential. It
certainly helps being a piano player to hit JAWS+alt+m to get to the
controlled element, but if JAWS had chosen an easier combination, the
navigation would be much better. But that doesn't really affect how this
example implemented the authoring practice recommendation for tabs, which
is what was asked for.
Other examples can be seen on
https://www.sas.com/en_us/software/visual-analytics/demo.html
All the examples seem to have a focusable element in the tab panel so that
after selecting a tab, instead of using JAWS+alt+m, you can just tab once
and you're in the tab panel.
On Fri, May 18, 2018 at 10:13 AM, Steve Green <
= EMAIL ADDRESS REMOVED = > wrote:
> That example works ok with keyboard navigation but it's not a great user
> experience with JAWS. In common with most, but not all, examples of tabbed
> interfaces it's necessary to use the hideous Alt+Insert+M shortcut to get
> to the tabpanel.
>
> I find this to be the most difficult of all the JAWS shortcuts and I would
> be interested to know what JAWS users think of it. In fact, I wonder how
> many JAWS users ever use it, other than professionals like the people on
> this forum. Has anyone done any user testing with tabbed interfaces? I am
> tempted to include this example in the next project we do even though it's
> unrelated to anything we will be working on.
>
> Regards,
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
From: Birkir R. Gunnarsson
Date: Fri, May 18 2018 1:19PM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
The priary problem for screen reader users is the arrow key behavior
of tabs that requires atomatically switching to
application/forms/interactive modes.
To do this Jaws maps tabs to a combobox widget (you can navigate to
tabs with the c shortcut key), Voiceover maps it to radiobuttons (at
least last time I tested).
Sure users can use arrow keys to navigate between tabs, but once they
select a tab they're stuck in the wrong mode for exploration and have
to get out of it manually (pressing the escape ke twice or
NVDAKey-spacebar or Jawskey-;).
In a recent tab implementation we made the tabpanel element ocusable
to enable users to tab out of the tabs and force the mode switching,
but it adds an additional tab stop with no function which people could
find equally confusing.
I'll post a URL of a page where we use this on Monday. I am on
vacation for a few days and trying to take it seriously. The arrow key
behavior causes extra JavaScript coding for developers and confusion
for screen reader users. I quite frankly don't think it's very
effective.
I think a more effective tab recommendation would be to keep al tabs
focusable and require implementing a keyboard shortcut (like page
down) o get from the selected tab to the associated tab panel.
I am not going to recommend dropping the tab implementation altogether
and fake it with links, there is important info in knowing that a set
of elements controls display of dynamic content on the page, but I
think the implementation could be simplified.
All that being said the aria-controls attribute is only supported in
Jaws and requires the complex keyboard shortcut JawsKey-alt-m. There
is an article out there explaining how aria-controls is useless. I
wouldn't quite go that far but I agree with the premise of the
article, aria-oontrol is badly supported and often has little
practical value.
It primarily has value when an element controls content that Is not
inline (next to it in the kcontent order), when updating quantity or
price of an item in a shopping cart updates the total amount.
On 5/18/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> How JAWS decided to implement aria-controls is somewhat tangential. It
> certainly helps being a piano player to hit JAWS+alt+m to get to the
> controlled element, but if JAWS had chosen an easier combination, the
> navigation would be much better. But that doesn't really affect how this
> example implemented the authoring practice recommendation for tabs, which
> is what was asked for.
>
> Other examples can be seen on
> https://www.sas.com/en_us/software/visual-analytics/demo.html
>
> All the examples seem to have a focusable element in the tab panel so that
> after selecting a tab, instead of using JAWS+alt+m, you can just tab once
> and you're in the tab panel.
>
>
> On Fri, May 18, 2018 at 10:13 AM, Steve Green <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> That example works ok with keyboard navigation but it's not a great user
>> experience with JAWS. In common with most, but not all, examples of tabbed
>> interfaces it's necessary to use the hideous Alt+Insert+M shortcut to get
>> to the tabpanel.
>>
>> I find this to be the most difficult of all the JAWS shortcuts and I would
>> be interested to know what JAWS users think of it. In fact, I wonder how
>> many JAWS users ever use it, other than professionals like the people on
>> this forum. Has anyone done any user testing with tabbed interfaces? I am
>> tempted to include this example in the next project we do even though it's
>> unrelated to anything we will be working on.
>>
>> Regards,
>> Steve Green
>> Managing Director
>> Test Partners Ltd
>>
>>
> > > > >
--
Work hard. Have fun. Make history.
From: glen walker
Date: Fri, May 18 2018 2:14PM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
Discussing the tab control is a fascinating subject. Truly. But we're
getting off topic. The original question was for an example that
implemented the authoring practice's recommendation, which I posted.
If we want to talk about improvements to the tab control, we can certainly
start another thread.
With regards to Birkir's tab comments, he was involved with 3 others in a
rebuttal type blog post regarding the tab control. You can read that at
https://medium.theuxblog.com/danger-testing-accessibility-with-real-people-4515f72db648
With regards to the aria-controls article, that is at
http://www.heydonworks.com/article/aria-controls-is-poop
With regards to JAWS mapping tabs to a combobox, I think it's more accurate
to say it lumps the tabs with other controls. The ctrl+ins+c dialog in
JAWS says it's for "ARIA Controls, comboboxes, listboxes, or treeviews".
So it's not really considered a combobox with respect to the accessibility
tree, but it is lumped with some other objects so you can navigate to it
with the C shortcut. I can also navigate to listboxes and treeviews with
the C key, but I don't think of them as comboboxes. I just didn't want
things to get (more) confusing if we start talking about tabs as comboboxes.
Glen
From:
Date: Sat, May 19 2018 5:58AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
The website of the UK Government uses tabpanels. An example of their
implementation is here:
https://www.gov.uk/apply-renew-passport
Léonie.
On 18/05/2018 21:14, glen walker wrote:
> Discussing the tab control is a fascinating subject. Truly. But we're
> getting off topic. The original question was for an example that
> implemented the authoring practice's recommendation, which I posted.
>
> If we want to talk about improvements to the tab control, we can certainly
> start another thread.
>
> With regards to Birkir's tab comments, he was involved with 3 others in a
> rebuttal type blog post regarding the tab control. You can read that at
> https://medium.theuxblog.com/danger-testing-accessibility-with-real-people-4515f72db648
>
> With regards to the aria-controls article, that is at
> http://www.heydonworks.com/article/aria-controls-is-poop
>
> With regards to JAWS mapping tabs to a combobox, I think it's more accurate
> to say it lumps the tabs with other controls. The ctrl+ins+c dialog in
> JAWS says it's for "ARIA Controls, comboboxes, listboxes, or treeviews".
> So it's not really considered a combobox with respect to the accessibility
> tree, but it is lumped with some other objects so you can navigate to it
> with the C shortcut. I can also navigate to listboxes and treeviews with
> the C key, but I don't think of them as comboboxes. I just didn't want
> things to get (more) confusing if we start talking about tabs as comboboxes.
>
> Glen
> > > > >
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem
From: KellyFord
Date: Sat, May 19 2018 7:16AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | Next message →
Just for reference purposes, newer versions of JAWS have added the apostrophe key as a hotkey to move to tabs specifically in web environments. They remain part of what the c key will navigate to as well but apostrophe now goes to just tabs.
Kelly
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Léonie Watson
Sent: Saturday, May 19, 2018 6:58 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; glen walker < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Any ARIA conforming tab panels out there in the wild?
The website of the UK Government uses tabpanels. An example of their implementation is here:
https://www.gov.uk/apply-renew-passport
Léonie.
On 18/05/2018 21:14, glen walker wrote:
> Discussing the tab control is a fascinating subject. Truly. But we're
> getting off topic. The original question was for an example that
> implemented the authoring practice's recommendation, which I posted.
>
> If we want to talk about improvements to the tab control, we can certainly
> start another thread.
>
> With regards to Birkir's tab comments, he was involved with 3 others in a
> rebuttal type blog post regarding the tab control. You can read that at
> https://medium.theuxblog.com/danger-testing-accessibility-with-real-people-4515f72db648
>
> With regards to the aria-controls article, that is at
> http://www.heydonworks.com/article/aria-controls-is-poop
>
> With regards to JAWS mapping tabs to a combobox, I think it's more accurate
> to say it lumps the tabs with other controls. The ctrl+ins+c dialog in
> JAWS says it's for "ARIA Controls, comboboxes, listboxes, or treeviews".
> So it's not really considered a combobox with respect to the accessibility
> tree, but it is lumped with some other objects so you can navigate to it
> with the C shortcut. I can also navigate to listboxes and treeviews with
> the C key, but I don't think of them as comboboxes. I just didn't want
> things to get (more) confusing if we start talking about tabs as comboboxes.
>
> Glen
> > > > >
--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem
From: Detlev (testkreis)
Date: Sun, May 20 2018 4:47AM
Subject: Re: Any ARIA conforming tab panels out there in the wild?
← Previous message | No next message
Thanks for these examples, Glen and Léonie, I'll explore these more fully once back at a PC. I just note that on an iPad with keyboard, I run into trouble on both; Glenâs page seems to endlessly load a âBanking & Risk Insights Interactive Demo" (not sure if the tabpanel is in there, or used for the main navigation, I think not), while on the gov.uk tab panel, when turning on VoiceOver and using arrow key navigation with option & control pressed, I can advance into panel content, but once I have activated a tab, I'm unable to arrow into the panel contents (left arrow moves focus straight to the âlast updated" link after the panel) - maybe there is a command for VoiceOver on iOS to return to reading mode that I am to lazy to look up right now...
Best,
Detlev
Von meinem iPad gesendet
> Am 19.05.2018 um 15:16 schrieb KellyFord < = EMAIL ADDRESS REMOVED = >:
>
> Just for reference purposes, newer versions of JAWS have added the apostrophe key as a hotkey to move to tabs specifically in web environments. They remain part of what the c key will navigate to as well but apostrophe now goes to just tabs.
>
> Kelly
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Léonie Watson
> Sent: Saturday, May 19, 2018 6:58 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; glen walker < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Any ARIA conforming tab panels out there in the wild?
>
> The website of the UK Government uses tabpanels. An example of their implementation is here:
> https://www.gov.uk/apply-renew-passport
>
>
> Léonie.
>
>> On 18/05/2018 21:14, glen walker wrote:
>> Discussing the tab control is a fascinating subject. Truly. But we're
>> getting off topic. The original question was for an example that
>> implemented the authoring practice's recommendation, which I posted.
>>
>> If we want to talk about improvements to the tab control, we can certainly
>> start another thread.
>>
>> With regards to Birkir's tab comments, he was involved with 3 others in a
>> rebuttal type blog post regarding the tab control. You can read that at
>> https://medium.theuxblog.com/danger-testing-accessibility-with-real-people-4515f72db648
>>
>> With regards to the aria-controls article, that is at
>> http://www.heydonworks.com/article/aria-controls-is-poop
>>
>> With regards to JAWS mapping tabs to a combobox, I think it's more accurate
>> to say it lumps the tabs with other controls. The ctrl+ins+c dialog in
>> JAWS says it's for "ARIA Controls, comboboxes, listboxes, or treeviews".
>> So it's not really considered a combobox with respect to the accessibility
>> tree, but it is lumped with some other objects so you can navigate to it
>> with the C shortcut. I can also navigate to listboxes and treeviews with
>> the C key, but I don't think of them as comboboxes. I just didn't want
>> things to get (more) confusing if we start talking about tabs as comboboxes.
>>
>> Glen
>> >> >> >> >>
>
> --
> @LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem
> > > > >
> > > >