WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Question on keyboard interaction for tabs

for

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

From: Maraikayar Prem Nawaz
Date: Mon, Dec 17 2012 9:09PM
Subject: Question on keyboard interaction for tabs
No previous message | Next message →

Hi All ,

As per WAI Aria Best practices for TabPanel (
http://www.w3.org/TR/wai-aria-practices/#tabpanel ) and
http://dev.aol.com/dhtml_style_guide#tabpanel , down arrow and up arrow
navigation should behave the same way as right arrow and left arrow.

My Friend who is also a screen reader user says:
"it doesn't make sense to use both left/right and up/down arrows to move
between tabs. If you look at desktop *implementations, you will never up
and down arrows used to move between tabs, usually only left and right
arrows."*

Are these conflicting as the screen users would using up/down arrow for
navigation within the document.
Should this be split into two as guideline for Horizontal tabpanel and
Guideline for Vertical tabpanel. Because it for Horizontal tab it makes
sense to use left and right arrow and for vertical tabpanel to use up
and down arrow?

Please provide your inputs..


Regards
-Nawaz

From: Bryan Garaventa
Date: Mon, Dec 17 2012 10:17PM
Subject: Re: Question on keyboard interaction for tabs
← Previous message | Next message →

Hi,
Actually the difference between a horizontal and vertical tab list in a web
app, is simply the way the CSS is implemented.

Since CSS styling such as this is totally invisible for blind screen reader
users using JAWS or NVDA for example, the layout for a tab list is whatever
the blind person imagines it to be, since there is no way to know if the
layout is vertical or horizontal.

For this reason, I always include both up/left and right/down as valid
keystrokes, and leave the concept of the layout to be whatever the blind
person imagines it to be.

You can see an example of this at
http://whatsock.com/bootstrap
Where the main tab navigation, and the dynamically generated tabs on the
Tabs tab, are controlled in this manner.


----- Original Message -----
From: "Maraikayar Prem Nawaz" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Cc: "Victor Tsaran" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, December 17, 2012 8:09 PM
Subject: [WebAIM] Question on keyboard interaction for tabs


> Hi All ,
>
> As per WAI Aria Best practices for TabPanel (
> http://www.w3.org/TR/wai-aria-practices/#tabpanel ) and
> http://dev.aol.com/dhtml_style_guide#tabpanel , down arrow and up arrow
> navigation should behave the same way as right arrow and left arrow.
>
> My Friend who is also a screen reader user says:
> "it doesn't make sense to use both left/right and up/down arrows to move
> between tabs. If you look at desktop *implementations, you will never up
> and down arrows used to move between tabs, usually only left and right
> arrows."*
>
> Are these conflicting as the screen users would using up/down arrow for
> navigation within the document.
> Should this be split into two as guideline for Horizontal tabpanel and
> Guideline for Vertical tabpanel. Because it for Horizontal tab it makes
> sense to use left and right arrow and for vertical tabpanel to use up
> and down arrow?
>
> Please provide your inputs..
>
>
> Regards
> -Nawaz
> > >

From: Jared Smith
Date: Mon, Dec 17 2012 10:38PM
Subject: Re: Question on keyboard interaction for tabs
← Previous message | Next message →

On Mon, Dec 17, 2012 at 9:09 PM, Maraikayar Prem Nawaz wrote:

> Are these conflicting as the screen users would using up/down arrow for
> navigation within the document.

When on a tab panel, up/down arrow keys should never provide
navigation within the document. Supporting both up/down and left/right
arrow keys allows natural interaction behavior for vertically oriented
tab panels, which are fairly common.

Jared

From: Bryan Garaventa
Date: Tue, Dec 18 2012 12:49AM
Subject: Re: Question on keyboard interaction for tabs
← Previous message | Next message →

To clarify one thing that may not be clear, there are two modes of
navigation for screen readers like JAWS and NVDA, these being Virtual Buffer
navigation, and the other being Applications Mode or Forms Mode in JAWS.

When navigating using the Virtual Buffer, you use the arrow keys, such as up
and down, to navigate by line up and down the document.

However, for an ARIA Tab control, Applications Mode or Forms Mode is entered
when selecting a tab, then you can use the up and down or right and left
arrow keys to switch between tabs. Depending on how the tabs are configured,
you can press Space or Enter to activate a tab that has focus if it's
programmed to do this.

You can then press Escape or the NumPad+ key to exit Forms Mode in JAWS, or
Insert+Space in NVDA to do the same, and resume navigating the Virtual
Buffer using the up and down keys as before.

It helps to understand this behavior.

----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, December 17, 2012 9:38 PM
Subject: Re: [WebAIM] Question on keyboard interaction for tabs


> On Mon, Dec 17, 2012 at 9:09 PM, Maraikayar Prem Nawaz wrote:
>
>> Are these conflicting as the screen users would using up/down arrow for
>> navigation within the document.
>
> When on a tab panel, up/down arrow keys should never provide
> navigation within the document. Supporting both up/down and left/right
> arrow keys allows natural interaction behavior for vertically oriented
> tab panels, which are fairly common.
>
> Jared
> > >

From: Scott González
Date: Tue, Dec 18 2012 6:09AM
Subject: Re: Question on keyboard interaction for tabs
← Previous message | Next message →

If I remember correctly, the ARIA Authoring Practices will almost always
tell you to treat up/down the same as right/left inside a widget. As has
already been stated, since blind users won't know the orientation, it's
good to handle both. It's also worth noting that the tablist role does not
support aria-orientation.

To take this discussion a little further, there are cases where orientation
does matter, such as menus. If you think of a typical horizontal menubar,
left/right will move through the menu items, while up/down will move
through submenu items. However, the menu and menubar roles don't support
aria-orientation either and vertical menus are fairly common on the web.
Unfortunately, in this case the orientation is important, because you'll
want to change which keys perform which actions.

Then there are cases such as spinbutton, where the ARIA Authoring Practices
will tell you to treat up/down the same as right/left, even though it
doesn't make sense. For editable spinners, you definitely do not want to
override the left and right arrows since those are used to change cursor
position within the current value.




On Mon, Dec 17, 2012 at 11:09 PM, Maraikayar Prem Nawaz
< = EMAIL ADDRESS REMOVED = >wrote:

> Hi All ,
>
> As per WAI Aria Best practices for TabPanel (
> http://www.w3.org/TR/wai-aria-practices/#tabpanel ) and
> http://dev.aol.com/dhtml_style_guide#tabpanel , down arrow and up arrow
> navigation should behave the same way as right arrow and left arrow.
>
> My Friend who is also a screen reader user says:
> "it doesn't make sense to use both left/right and up/down arrows to move
> between tabs. If you look at desktop *implementations, you will never up
> and down arrows used to move between tabs, usually only left and right
> arrows."*
>
> Are these conflicting as the screen users would using up/down arrow for
> navigation within the document.
> Should this be split into two as guideline for Horizontal tabpanel and
> Guideline for Vertical tabpanel. Because it for Horizontal tab it makes
> sense to use left and right arrow and for vertical tabpanel to use up
> and down arrow?
>
> Please provide your inputs..
>
>
> Regards
> -Nawaz
> > > >

From: James Nurthen
Date: Tue, Dec 18 2012 2:06PM
Subject: Re: Question on keyboard interaction for tabs
← Previous message | No next message

Scott,

On Tue, Dec 18, 2012 at 5:09 AM, Scott González < = EMAIL ADDRESS REMOVED = >wrote:

>
> Then there are cases such as spinbutton, where the ARIA Authoring Practices
> will tell you to treat up/down the same as right/left, even though it
> doesn't make sense. For editable spinners, you definitely do not want to
> override the left and right arrows since those are used to change cursor
> position within the current value.
>
> Did you log this comment against the spec? It sounds like this should be
changed.

Regards,
James