E-mail List Archives

Search E-mail List Archives for

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

From: Farough, David (CFP/PSC)
Date: Mon, Jul 22 2019 12:57PM
Subject: what to do in scenario where you have two sets of tabs in each direction?
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > / Tel: 819-420-8418

From: Steve Green
Date: Mon, Jul 22 2019 1:23PM
Subject: Re: what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

This design sounds like it is effectively the same as Miller Columns, which are nested tablists. See https://en.wikipedia.org/wiki/Miller_columns

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

From: Brian Lovely
Date: Mon, Jul 22 2019 1:51PM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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 ADDRESS 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.org_wiki_Miller-5Fcolumns&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=ZXxx0zHjUYr_CfYj4Ky4ckzYoQBMhtiXSbxUIqeW_WA&s=PBn8k_opscOmMm1K6oAD19IakaiDtLS-_Fpwlg-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
>
>
>
>

From: Steve Green
Date: Mon, Jul 22 2019 3:12PM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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

From: Mallory
Date: Tue, Jul 23 2019 1:33AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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
>
>
>

From: Steve Green
Date: Tue, Jul 23 2019 2:36AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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

From: Mallory
Date: Tue, Jul 23 2019 3:07AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

>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
>
>
>

From: Steve Green
Date: Tue, Jul 23 2019 3:19AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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

From: Isabel Holdsworth
Date: Fri, Jul 26 2019 5:22AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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 ADDRESS 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
>
>
>

From: Farough, David (CFP/PSC)
Date: Fri, Jul 26 2019 7:26AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | Next message →

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.

From: Laura Fathauer
Date: Fri, Jul 26 2019 7:51AM
Subject: Re: [External Sender]what to do in scenario where you have two sets of tabs in each direction?
← Previous message | No next message

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 ADDRESS 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.
>