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: Laura Fathauer
Date: Jul 26, 2019 7:51AM

Have you considered having the top area operate like regular links
(simulate page reload, update title, code as links; shift focus
appropriately) then have the left side operate as a proper ARIA tab
list? It might separate the compound user interface into two distinct
familiar operations.

Laura

On Fri, Jul 26, 2019 at 9:26 AM Farough, David (CFP/PSC)
< <EMAIL REMOVED> > wrote:
>
> 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
> > > > > > > > > > > >
> > > > > > > >