E-mail List Archives
Thread: Keyboard menu access\ARIA
Number of posts in this thread: 7 (In chronological order)
From: Joe Chidzik
Date: Tue, Jul 03 2012 2:13AM
Subject: Keyboard menu access\ARIA
No previous message | Next message →
I appreciate the value of using ARIA to make drop down menus more naturally accessible by accepting arrow key navigation. This can reduce the amount of keystrokes required, and typically more closely matches standard desktop application behaviour.
A good example is the main menu on the IBM site: http://www.ibm.com/us/en/
You can tab to the first item, then arrow leftright to select, and enter to expand the menu. Similar, one within the expanded menu, you can tab between menus, and arrow updown within the menus.
(As an aside, within JAWS, the main menu is announced as "toolbar", and the sub menus announced as "menu". Using NVDA, the main menu items are just announced "button" with the submenu items announced as "link"; a shortcoming in NVDA, imho, but I assume it will be fixed. Though my question is about keyboard accessibility for sighted users.)
Whilst this ARIA based approach is more accessible as keyboard users don't need to tab through every item, they can instead quickly arrow to the required menu link, is there a danger of some users, who are familiar with the tabenter paradigm of keyboard accessibility on the web, perhaps not realising that the arrow keys can be used? Or is it safe to assume that users will be familiar with this approach, which is similar to Windows (and I assume Mac and other platform) applications, where keyboard access is granted by tabenter and arrow key presses?
I've typically recommended that site's put something on their accessibility page telling keyboard users how to access the site e.g. use arrow keys to switch between items, and enter to expand.
I'm using the IBM site as an example here. I've found it well done generally, but have seen other sites using ARIA in a less well implemented way, where it might be less obvious that you need to use a combination of arrow keystabenter to get around.
Would be interested in other's opinions on this.
Kind regards
Joe
From: Steve Faulkner
Date: Tue, Jul 03 2012 3:57AM
Subject: Re: Keyboard menu access\ARIA
← Previous message | Next message →
Hi Joe,
the unfamiliarity of this type of keyboard interaction on the web may be an
issue.
Note that this interaction will be come more common as the HTML5 menu
element [1] is implemented in browsers.
A possible method to overcome the unfamiliarity is to provide pseudo
tooltip [2] that is displayed when the first item receives focus. this can
be used to include brief instructions to the user such as "use arrow keys
to navigate" or some such.
[1] http://dev.w3.org/html5/spec/the-menu-element.html#the-menu-element
[2] http://hanshillen.github.com/jqtest/#goto_tooltip
regards
SteveF
On 3 July 2012 09:13, Joe Chidzik < = EMAIL ADDRESS REMOVED = > wrote:
> I appreciate the value of using ARIA to make drop down menus more
> naturally accessible by accepting arrow key navigation. This can reduce the
> amount of keystrokes required, and typically more closely matches standard
> desktop application behaviour.
>
> A good example is the main menu on the IBM site:
> http://www.ibm.com/us/en/
>
> You can tab to the first item, then arrow leftright to select, and enter
> to expand the menu. Similar, one within the expanded menu, you can tab
> between menus, and arrow updown within the menus.
>
> (As an aside, within JAWS, the main menu is announced as "toolbar", and
> the sub menus announced as "menu". Using NVDA, the main menu items are just
> announced "button" with the submenu items announced as "link"; a
> shortcoming in NVDA, imho, but I assume it will be fixed. Though my
> question is about keyboard accessibility for sighted users.)
>
> Whilst this ARIA based approach is more accessible as keyboard users don't
> need to tab through every item, they can instead quickly arrow to the
> required menu link, is there a danger of some users, who are familiar with
> the tabenter paradigm of keyboard accessibility on the web, perhaps not
> realising that the arrow keys can be used? Or is it safe to assume that
> users will be familiar with this approach, which is similar to Windows
> (and I assume Mac and other platform) applications, where keyboard access
> is granted by tabenter and arrow key presses?
>
> I've typically recommended that site's put something on their
> accessibility page telling keyboard users how to access the site e.g. use
> arrow keys to switch between items, and enter to expand.
>
> I'm using the IBM site as an example here. I've found it well done
> generally, but have seen other sites using ARIA in a less well implemented
> way, where it might be less obvious that you need to use a combination of
> arrow keystabenter to get around.
>
> Would be interested in other's opinions on this.
>
> Kind regards
> Joe
> > > >
--
with regards
Steve Faulkner
Technical Director - TPG
www.paciellogroup.com | www.HTML5accessibility.com |
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
From: Joe Chidzik
Date: Tue, Jul 03 2012 6:26AM
Subject: Re: Keyboard menu access\ARIA
← Previous message | Next message →
> A possible method to overcome the unfamiliarity is to provide pseudo
> tooltip [2] that is displayed when the first item receives focus. this can be
> used to include brief instructions to the user such as "use arrow keys to
> navigate" or some such.
>
>
> [1] http://dev.w3.org/html5/spec/the-menu-element.html#the-menu-
> element
> [2] http://hanshillen.github.com/jqtest/#goto_tooltip
>
> regards
> SteveF
[Joe Chidzik]
Hi Steve,
Thanks for your reply and the links. Really like the idea of using pseudo tooltips to alert keyboard users with instructions, will see if I can get an example put together for this.
Cheers
Joe
From: Jesse Hausler
Date: Thu, Jul 05 2012 10:50AM
Subject: Re: Keyboard menu access\ARIA
← Previous message | Next message →
I've found that when properly using ARIA for keyboard accessible menus, AT such as Jaws and VoiceOver will announce the correct keyboard instructions. How much instruction one hears depends the verbosity settings.
Jesse
On 7/3/12 5:26 AM, "Joe Chidzik" < = EMAIL ADDRESS REMOVED = > wrote:
> A possible method to overcome the unfamiliarity is to provide pseudo
> tooltip [2] that is displayed when the first item receives focus. this can be
> used to include brief instructions to the user such as "use arrow keys to
> navigate" or some such.
>
>
> [1] http://dev.w3.org/html5/spec/the-menu-element.html#the-menu-
> element
> [2] http://hanshillen.github.com/jqtest/#goto_tooltip
>
> regards
> SteveF
[Joe Chidzik]
Hi Steve,
Thanks for your reply and the links. Really like the idea of using pseudo tooltips to alert keyboard users with instructions, will see if I can get an example put together for this.
Cheers
Joe
From: Steve Faulkner
Date: Thu, Jul 05 2012 11:26AM
Subject: Re: Keyboard menu access\ARIA
← Previous message | Next message →
Hi Jesse, the issue is not for screen reader users that support ARIA, its
for keyboard only users that do not use AT.
regards
steve
On 5 July 2012 17:50, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> I've found that when properly using ARIA for keyboard accessible menus, AT
> such as Jaws and VoiceOver will announce the correct keyboard instructions.
> How much instruction one hears depends the verbosity settings.
>
> Jesse
>
>
> On 7/3/12 5:26 AM, "Joe Chidzik" < = EMAIL ADDRESS REMOVED = > wrote:
>
> > A possible method to overcome the unfamiliarity is to provide pseudo
> > tooltip [2] that is displayed when the first item receives focus. this
> can be
> > used to include brief instructions to the user such as "use arrow keys to
> > navigate" or some such.
> >
> >
> > [1] http://dev.w3.org/html5/spec/the-menu-element.html#the-menu-
> > element
> > [2] http://hanshillen.github.com/jqtest/#goto_tooltip
> >
> > regards
> > SteveF
>
> [Joe Chidzik]
> Hi Steve,
>
> Thanks for your reply and the links. Really like the idea of using pseudo
> tooltips to alert keyboard users with instructions, will see if I can get
> an example put together for this.
>
> Cheers
> Joe
> > > >
> > > >
--
with regards
Steve Faulkner
Technical Director - TPG
www.paciellogroup.com | www.HTML5accessibility.com |
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
From: Ryan E. Benson
Date: Thu, Jul 05 2012 7:12PM
Subject: Re: Keyboard menu access\ARIA
← Previous message | Next message →
Hi Joe
> is there a danger of some users, who are familiar with the tabenter paradigm of keyboard
> accessibility on the web, perhaps not realising that the arrow keys can be used?
As somebody who has been nearly keyboard-only for 15+ years, it comes
down to two things: knowledge and UI. Obviously you have no control on
how much knowledge a user has, however you can dictate what the UI
does. The key point is controlling focus. If I tab to a nav menu, I
expect to hit a sub menu or the second main link. If neither happens,
I decide how important it is to me to get the menu. If it is, I will
try arrows, and other things. If you clearly define focus, I can tell
I am on the second menu item, in the content/somewhere else, or still
in your /lovely/ menu system (and the JS doesn't recognize focus) and
I have to use the mouse or watch the status bar and hope that you have
pretty URLs.
--
Ryan E. Benson
On Tue, Jul 3, 2012 at 4:13 AM, Joe Chidzik
< = EMAIL ADDRESS REMOVED = > wrote:
> I appreciate the value of using ARIA to make drop down menus more naturally accessible by accepting arrow key navigation. This can reduce the amount of keystrokes required, and typically more closely matches standard desktop application behaviour.
>
> A good example is the main menu on the IBM site: http://www.ibm.com/us/en/
>
> You can tab to the first item, then arrow leftright to select, and enter to expand the menu. Similar, one within the expanded menu, you can tab between menus, and arrow updown within the menus.
>
> (As an aside, within JAWS, the main menu is announced as "toolbar", and the sub menus announced as "menu". Using NVDA, the main menu items are just announced "button" with the submenu items announced as "link"; a shortcoming in NVDA, imho, but I assume it will be fixed. Though my question is about keyboard accessibility for sighted users.)
>
> Whilst this ARIA based approach is more accessible as keyboard users don't need to tab through every item, they can instead quickly arrow to the required menu link, is there a danger of some users, who are familiar with the tabenter paradigm of keyboard accessibility on the web, perhaps not realising that the arrow keys can be used? Or is it safe to assume that users will be familiar with this approach, which is similar to Windows (and I assume Mac and other platform) applications, where keyboard access is granted by tabenter and arrow key presses?
>
> I've typically recommended that site's put something on their accessibility page telling keyboard users how to access the site e.g. use arrow keys to switch between items, and enter to expand.
>
> I'm using the IBM site as an example here. I've found it well done generally, but have seen other sites using ARIA in a less well implemented way, where it might be less obvious that you need to use a combination of arrow keystabenter to get around.
>
> Would be interested in other's opinions on this.
>
> Kind regards
> Joe
> > >
From: Joe Chidzik
Date: Fri, Jul 06 2012 2:00AM
Subject: Re: Keyboard menu access\ARIA
← Previous message | No next message
> As somebody who has been nearly keyboard-only for 15+ years, it comes
> down to two things: knowledge and UI. Obviously you have no control on
> how much knowledge a user has, however you can dictate what the UI does.
> The key point is controlling focus. If I tab to a nav menu, I expect to hit a sub
> menu or the second main link. If neither happens, I decide how important it
> is to me to get the menu. If it is, I will try arrows, and other things. If you
> clearly define focus, I can tell I am on the second menu item, in the
> content/somewhere else, or still in your /lovely/ menu system (and the JS
> doesn't recognize focus) and I have to use the mouse or watch the status bar
> and hope that you have pretty URLs.
>
> --
> Ryan E. Benson
[Joe Chidzik] Hi Ryan,
Thanks for that, that's useful feedback and good to know a user-perspective on keyboard menu interaction.
I completely take your point about having a clearly visible focus - in fact, I'm going to take SteveF's suggestion, and try and implement an instructional tooltip for keyboard users. However it's good to know that you yourself would fall back to using arrow keys if tabenter did not work in the first instance.
As Steve pointed out too, it should become more commonplace for sites to be using an enhanced keyboard interaction model as time goes on, and HTML5 (and ARIA I guess) become more prevalent on websites, so users will necessarily adapt.
Thanks again
Joe