WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?

for

From: Farough, David (CFP/PSC)
Date: Jul 26, 2019 7:26AM


I thought that I would update you on progress made so far on this app .

This is a single page app developed using an open-source environment using angular components.
This app presents material that will be used to evaluate management candidates for the Canadian federal government.
The top navigation tabs are: instructions, background and inbox.
The tabs on the left hand side are populated based on selections made in the top navigation area.
In order to make navigating this application easier we are also including next and previous buttons in the tab panel content, making this application behave more like a wizard.
Needless to say focus management is a major concern and lots of testing with different browsers and screen readers is being done.
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Isabel Holdsworth
Sent: Friday, July 26, 2019 07:23 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [External Sender] Re: what to do in scenario where you have two sets of tabs in each direction?

Warning! Stream of consciousness ramble imminent :-)

A menu with submenus probably would have been the way to go - shame
that's not possible.

Screen reader users tend to understand trees in the Windows
environment, for example in File Explorer. They may well be able to
generalise that knowledge to a tree on a website if it's properly
marked up.

But how about sighted keyboard users if the tablists remain as
distinct visual entities? How would they intuit how to operate the
keyboard on two distinct option groups that are behaving like a single
group?

In a tree, DownArrow moves through the branches and Right/LeftArrow
opens and closes a sub-branch. Blind users wouldn't realise that the
focus is moving across rather than down the horizontal tablist, but
sighted users would.

Is there such thing as a horizontal tree?

Taking something that visually looks like one type of control and
marking it up as something else can in certain scenarios be the only
way to provide an accessible UI. But it can have its down sides.

Could these not just be left as tablists, with each child tablist
being assigned a label that links it to its parent in the horizontal
tablist? Or perhaps each child tablist could be a set of navigation
links with a suitable label?

Cheers, Isabel

On 23/07/2019, Steve Green < <EMAIL REMOVED> > wrote:
> Has anyone done any user testing on a tree? The last time I did was so long
> ago that ARIA hadn't even been thought of, so the results were
> unsurprisingly poor. But I am far from convinced that average screen reader
> users (let alone those below average) would be able to understand a tree and
> use it effectively unless it was on a website they visit frequently.
>
> Steve
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Mallory
> Sent: 23 July 2019 10:07
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] [External Sender] Re: what to do in scenario where you
> have two sets of tabs in each direction?
>
>>A big difference is that it's easy to navigate up and down the tree in a
>> terminal, but it's not easy to navigate up a tree in nested tablists.
>
> Just as it is difficult for many to perform the basics of drag and drop. But
> the more successful interfaces offered more than one way to do the task-- so
> I wondered if a straight-up tree as an additional navigation mechanism would
> be better than making everyone try to make nested tablists work.
>
> cheers,
> Mallory
>
> On Tue, Jul 23, 2019, at 10:36 AM, Steve Green wrote:
>> A big difference is that it's easy to navigate up and down the tree in
>> a terminal, but it's not easy to navigate up a tree in nested tablists.
>>
>> It's another example of a cool new user interface concept getting
>> promoted without any user research having been done (that I am aware
>> of) to assess the usability and accessibility. This is one reason why
>> both usability and accessibility of websites have been getting worse
>> for so many years.
>>
>> Steve
>>
>>
>> -----Original Message-----
>> From: Mallory < <EMAIL REMOVED> >
>> Sent: 23 July 2019 08:34
>> To: Steve Green < <EMAIL REMOVED> >; WebAIM Discussion
>> List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] [External Sender] Re: what to do in scenario
>> where you have two sets of tabs in each direction?
>>
>> This almost seems like something like a breadcrumb would help. I
>> selected a main category, then a sub category, and now maybe I'm in a
>> sub-sub cat tree. Something I could ask for wherever I was to check
>> my place.
>>
>> Maybe, like drag and drop, it's feasable to offer another navigation
>> method people can choose, something that's basically just one big tree.
>> Pretty much every developer in a terminal does this without graphical
>> representation and if your prompt shows your current position in the
>> filesystem, that helps the short-term memory issues (and like
>> exploring these with a screen reader, in a terminal you generally
>> don't have the option of seeing all the other possibilities of the
>> groups you've
>> passed-- you have to navigate back up to see what other
>> options/folders there are).
>>
>> cheers,
>> Mallory
>>
>> On Mon, Jul 22, 2019, at 11:13 PM, Steve Green wrote:
>> > Even with instructions, it's difficult to form a mental model of
>> > this sort of design. While it's not too difficult to navigate down a
>> > branch of the tree, it's really difficult to navigate back up again.
>> > That's fine if you are only trying to do one thing and your first
>> > attempt is successful, but if that is not the case I expect screen
>> > reader users to find this design very frustrating.
>> >
>> > Steve
>> >
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
>> > Of Brian Lovely via WebAIM-Forum
>> > Sent: 22 July 2019 20:52
>> > To: WebAIM Discussion List < <EMAIL REMOVED> >
>> > Cc: Brian Lovely < <EMAIL REMOVED> >
>> > Subject: Re: [WebAIM] [External Sender] Re: what to do in scenario
>> > where you have two sets of tabs in each direction?
>> >
>> > Yeah, the only thing I could think of was some kind of off-screen
>> > instructions.
>> >
>> > On Mon, Jul 22, 2019 at 3:23 PM Steve Green
>> > < <EMAIL REMOVED> >
>> > wrote:
>> >
>> > > This design sounds like it is effectively the same as Miller
>> > > Columns, which are nested tablists. See
>> > > https://urldefense.proofpoint.com/v2/url?u=https-3A__en.wikipedia.
>> > > or
>> > > g_
>> > > wiki_Miller-5Fcolumns&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3Ac
>> > > HN
>> > > JU
>> > > 0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr
>> > > _C
>> > > fY
>> > > j4Ky4ckzYoQBMhtiXSbxUIqeW_WA&s=PBn8k_opscOmMm1K6oAD19IakaiDtLS-_Fp
>> > > wl
>> > > g-
>> > > kRvs&e=
>> > >
>> > > My expectation is that both Miller Columns and your design will be
>> > > incomprehensible to people who cannot see them, even if they are
>> > > marked-up perfectly. Perhaps the most highly experienced screen
>> > > reader users would be able to understand it, but the other 99% won't.
>> > >
>> > > We have started doing internal research with screen reader users
>> > > and I will include an example of Miller Columns in our next
>> > > session on Friday to see if my suspicions are supported. I would
>> > > love to hear if anyone else has done user testing on Miller Columns or
>> > > any form of nested tablists.
>> > >
>> > > I don't understand why your developer thinks this would be
>> > > difficult to implement unless he is using a particular JavaScript
>> > > framework that makes it difficult.
>> > >
>> > > Steve Green
>> > > Managing Director
>> > > Test Partners Ltd
>> > >
>> > >
>> > >
>> > > -----Original Message-----
>> > > From: WebAIM-Forum < <EMAIL REMOVED> > On
>> > > Behalf Of Farough, David (CFP/PSC)
>> > > Sent: 22 July 2019 19:58
>> > > To: WebAIM Discussion List < <EMAIL REMOVED> >
>> > > Subject: [WebAIM] what to do in scenario where you have two sets
>> > > of tabs in each direction?
>> > >
>> > > First set of tabs horizontal across top of application; Next in
>> > > tab sequence A second set of vertical tabs in side navigation
>> > > which selects content based on selection from top tabs; Next in
>> > > tab sequence the main content based on selection from content
>> > > selected from both sets of tabs
>> > >
>> > > How to do this so that it will be obvious to users.
>> > >
>> > > I suggested using either a toolbar with buttons, or a horizontal
>> > > menu structure for the top navigation.
>> > >
>> > > The developer indicates that this would be difficult to implement.
>> > >
>> > > Does anyone have any suggestions?
>> > >
>> > >
>> > > David Farough
>> > > Application Accessibility Co-ordinator Information Technology
>> > > Services Directorate Public Service Commission of Canada /
>> > > Government of Canada
>> > > <EMAIL REMOVED> <mailto:
>> > > <EMAIL REMOVED> > / Tel: 819-420-8418
>> > >
>> > >
>> > >
>> > > >> > > >> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.or
>> > > g_
>> > > &d
>> > > =DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-
>> > > FW
>> > > X0
>> > > bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr_CfYj4Ky4ckzYoQBMhtiXSb
>> > > xU Iq eW_WA&s=TaC_hQKGhY4VKwOBF64sIPQo1UC_Xzz-w7LONYlBVsI&e=
>> > > List archives at
>> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_dis
>> > > cu
>> > > ss
>> > > ion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJ
>> > > E&
>> > > r=
>> > > MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr_CfYj4Ky4
>> > > ck
>> > > zY
>> > > oQBMhtiXSbxUIqeW_WA&s=Q8vJM_c-74UnulliVWp10nX0HG4W9XLHGfXs1sm-UHg&
>> > > e= >> > > >> > > >> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.or
>> > > g_
>> > > &d
>> > > =DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-
>> > > FW
>> > > X0
>> > > bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr_CfYj4Ky4ckzYoQBMhtiXSb
>> > > xU Iq eW_WA&s=TaC_hQKGhY4VKwOBF64sIPQo1UC_Xzz-w7LONYlBVsI&e=
>> > > List archives at
>> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_dis
>> > > cu
>> > > ss
>> > > ion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJ
>> > > E&
>> > > r=
>> > > MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr_CfYj4Ky4
>> > > ck
>> > > zY
>> > > oQBMhtiXSbxUIqeW_WA&s=Q8vJM_c-74UnulliVWp10nX0HG4W9XLHGfXs1sm-UHg&
>> > > e= >> > >
>> >
>> >
>> > --
>> > *Brian Lovely*
>> > Capital One Digital Accessibility
>> > 804.389.1064
>> > >> >
>> > The information contained in this e-mail is confidential and/or
>> > proprietary to Capital One and/or its affiliates and may only be
>> > used solely in performance of work or services for Capital One. The
>> > information transmitted herewith is intended only for use by the
>> > individual or entity to which it is addressed. If the reader of this
>> > message is not the intended recipient, you are hereby notified that
>> > any review, retransmission, dissemination, distribution, copying or
>> > other use of, or taking of any action in reliance upon this
>> > information is strictly prohibited. If you have received this
>> > communication in error, please contact the sender and delete the
>> > material from your computer.
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >