RE: topic/question: navigating through submenu items with right and left arrows (outlying conditions) from Adam Cooper on 2024-05-24 (w3c-wai-ig@w3.org from April to June 2024)

From: Adam Cooper <cooperad@bigpond.com>
Date: Fri, 24 May 2024 17:29:31 +1000
To: "'Tangen, Michael H $MNIT$'" <michael.tangen@state.mn.us>, "'Karen Lewellen'" <klewellen@shellworld.net>
Cc: "'Jeremy Echols'" <jechols@uoregon.edu>, "'Andrews, David B $DEED$'" <david.b.andrews@state.mn.us>, <w3c-wai-ig@w3.org>
Message-ID: <000e01daadac$206ceac0$6146c040$@bigpond.com>
If you’re using Windows, open Explorer and use your keyboard to navigate/operate the menu … and that should clear up submenu behaviour using cursor keys ...  same for web sites and for web applications for people using keyboard or keyboard-like  input. 

 

Single pointer like mouse or touch will require activating a parent element to display/hide a (child) submenu.

 

I wasn’t really paying much attention to the original question so I am not sure what documentation you are referring to, but once in a child submenu, left- arrow (37) returns focus to the parent of the submenu and not to the top of the parent menu. 

 

The keyboard patterns are pretty clearly spelled out in the relevant ARIA examples, aren’t they?

 

In any case, I strongly disagree with the ARIA examples and commonplace opinion on the web that says using the set of ARIA menu roles and JavaScript to make navigation like operating system menus is unnecessary … the supposedly more accessible or progressively enhanced or out of the box alternatives are always worse … 

 

why should I learn fifty different ways of navigating web sites and applications and operating systems because of shortcomings in a designer’s or developer’s capability?

 

 

 

From: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us> 
Sent: Friday, May 24, 2024 3:31 PM
To: Karen Lewellen <klewellen@shellworld.net>; Adam Cooper <cooperad@bigpond.com>
Cc: 'Jeremy Echols' <jechols@uoregon.edu>; Andrews, David B (DEED) <david.b.andrews@state.mn.us>; w3c-wai-ig@w3.org
Subject: Re: topic/question: navigating through submenu items with right and left arrows (outlying conditions)

 

Please let's try to stay on topic. My questions were very specific, asking for specific required behavior in two scenarios, plus comparing behavior between an app menu and a website menu.

 

Thank you.  

 

 

 

Michael Tangen

Senior Interface Designer/Developer | Web Development

 

Minnesota IT Services | Partners in Performance

658 Cedar Street

Saint Paul, MN 55112

O: 651-201-1045

Information Technology for Minnesota Government |  <http://mn.gov/mnit> mn.gov/mnit

  _____  

From: Karen Lewellen <klewellen@shellworld.net>
Sent: Thursday, May 23, 2024 8:52 PM
To: Adam Cooper <cooperad@bigpond.com>
Cc: 'Jeremy Echols' <jechols@uoregon.edu>; Tangen, Michael H (MNIT) <michael.tangen@state.mn.us>; Andrews, David B (DEED) <david.b.andrews@state.mn.us>; w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: RE: topic/question: navigating through submenu items with right and left arrows (outlying conditions) 

 

YOu know something?
I have never once, used tab to navigate..at all..in more than 30 years of 
using a computer.
Granted most of my browsers employ  a links are numbered feature..why this 
is not  more common outside of Linux tools I have no idea.
speaking personally as well, I prefer not to remove my hands from the 
keyboard overly much..again why I love links are numbered features in 
browsers.
But tab and shift tab?
How is that efficient?
Kare



On Fri, 24 May 2024, Adam Cooper wrote:

> hooray! Thank you Jeremy. A menu is a compound widget that can be efficiently bypassed when tabbing and not an endless list of hyperlinks … how does one navigate to the very last link in the very last menu dropdown? One doesn’t because it’s incredibly frustrating. So for all those developers who think that menus are merely nested lists of hyperlinks that are ‘more accessible’ because they can be navigated using TAB, you are sorely misguided. Use JS and ARIA as per the Authoring Practices Guide and as per the model provided by operating systems for more than a quarter of a century.
>
>
>
>
>
> From: Jeremy Echols <jechols@uoregon.edu>
> Sent: Friday, May 24, 2024 12:36 AM
> To: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us>; Andrews, David B (DEED) <david.b.andrews@state.mn.us>
> Cc: w3c-wai-ig@w3.org
> Subject: RE: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
> For what it’s worth, my preference when I’m needing to be in keyboard-only mode is that the entire menu is a single tab stop so I can quickly bypass it just via tab (as opposed to switching to the tools I have to let me jump to regions / headings). But either approach seems to be valid.
>
>
>
> W3C has examples of doing this both ways: see their disclosure navigation <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FARIA%2Fapg%2Fpatterns%2Fdisclosure%2Fexamples%2Fdisclosure-navigation%2F <https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281300898%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=fiG8Ouq%2F7%2BxUkpBMOqPpiuiSO2YpYdy%2BM%2BYZcXJziWM%3D&reserved=0>  and menubar navigation <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FARIA%2Fapg%2Fpatterns%2Fmenubar%2Fexamples%2Fmenubar-navigation%2F <https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281308014%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=nED%2BySTJEE9PmAGwtdVMnEdfI2oZmXNmUaKk97ekkRg%3D&reserved=0>  examples.
>
>
>
> One sticking point in my opinion is that keyboard focus shouldn’t automatically open submenus, as that makes tabbing past big deep menu trees really obnoxious.
>
>
>
> From: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us <mailto:michael.tangen@state.mn.us> >
> Sent: Wednesday, May 22, 2024 12:38
> To: Andrews, David B (DEED) <david.b.andrews@state.mn.us <mailto:david.b.andrews@state.mn.us> >
> Cc: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org>
> Subject: Re: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
> It's fine, I appreciate your input on this. I may just have to use my best instinctual judgment and if I reach either end of the menu, proceed to its opposite end with child menus.
>
>
>
> One question for you Dave that I would love your input on that you didn't respond to.  Should or do website menus typically behave the same or similarly to application menus, where the assistive technology (AT) overrides the tabbing ability inside the menu, requiring the AT user to use their arrow keys?  Or is website navigation altogether different from browsing an application menu?
>
>
>
>
>
>
>
> Michael Tangen
>
> Senior Interface Designer/Developer | Web Development
>
>
>
> Minnesota IT Services | Partners in Performance
>
> 658 Cedar Street
>
> Saint Paul, MN 55112
>
> O: 651-201-1045
>
> Information Technology for Minnesota Government |  <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__http%3A%2Fmn.gov%2Fmnit__%3B!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDE5VBBQI%24 <https://urldefense.com/v3/__http:/mn.gov/mnit__;!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDE5VBBQI$> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281312892%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=Jul0YCdeAOkRAgC2b5ZIesMsPJsBsdSTadUWjYMgsrk%3D&reserved=0> mn.gov/mnit
>
>  _____
>
> From: Andrews, David B (DEED) <david.b.andrews@state.mn.us <mailto:david.b.andrews@state.mn.us> >
> Sent: Wednesday, May 22, 2024 11:04 AM
> To: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us <mailto:michael.tangen@state.mn.us> >
> Cc: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org>  <w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> >
> Subject: RE: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
> OK, I hope I made sense. I didn’t get into the help menu backwards for forwards.
>
>
>
> Dave
>
>
>
>
>
>
>
> From: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us <mailto:michael.tangen@state.mn.us> >
> Sent: Wednesday, May 22, 2024 10:22 AM
> To: Andrews, David B (DEED) <david.b.andrews@state.mn.us <mailto:david.b.andrews@state.mn.us> >
> Cc: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org>
> Subject: Re: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
> Hi David!  Nice to hear from you!  I hope you are well!
>
>
>
> I fear my original post to the W3 was a bit detailed and on the bleeding edge case of navigational issues.  Maybe I can try to simplify or restate my questions:
>
>
>
> Let's assume the following list is the basic structure of my menu:
>
> 1.    Item One
>
> a.    Item 1A
>
> b.    Item 1B
>
> 2.    Item Two
>
> a.    Item 2A
>
> b.    Item 2B
>
> 3.    Item Three (no child options)
>
> My original question had to do with the use of the right and left arrow keys for navigating through an application menu, specifically in two different scenarios:
>
> 1.    Using the left arrow key [documentation says "close the submenu and select the first item of the previous top-level menu item"]:  If I am in the Item Two submenu and am hitting the left arrow key, I expect it to send me to Item 1A under Item One.  But if I'm in the Item One submenu and press the left arrow key, what is the behavior supposed to be?  Does it go to Item 2A, to the Item Three top level item, or not move at all?
>
> 2.    Using the right arrow key [documentation says "close the submenu and select the first item of the next top-level menu item"]:  So here the scenario is almost identical to using the left arrow key but flipped.  If I am in the Item One submenu and press the right arrow key, it should close the submenu and go to Item 2A in the adjacent menu.  But if I am in the Item Two Submenu and hit the right arrow key, does it skip past Item Three (which has no submenu items) and onto Item 1A, does it move focus to Item Three, or not move at all?
>
> Sorry if this was really verbose — but the documentation just wasn't clear enough for my liking, leaving a couple of scenarios unaddressed.
>
>
>
> One last question for you Dave (or anyone else on the W3 list), when a screenreader interacts with a website menu, do you expect it to behave similarly to an application menu, where the tab key only allows you to initially tab into the menu and the rest of the navigation is handled with the arrow keys, and the enter/space bar?  Or do you expect website menus to work differently than application menus, in that you only need to navigate using the tab and shift+tab keys for traversing the menu and space/enter to toggle the submenu visibility?  I'd really appreciate your perspective on this.
>
>
>
> Thank you!
>
>
>
>
>
> Michael Tangen
>
> Senior Interface Designer/Developer | Web Development
>
>
>
> Minnesota IT Services | Partners in Performance
>
> 658 Cedar Street
>
> Saint Paul, MN 55112
>
> O: 651-201-1045
>
> Information Technology for Minnesota Government |  <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__http%3A%2Fmn.gov%2Fmnit__%3B!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDE5VBBQI%24 <https://urldefense.com/v3/__http:/mn.gov/mnit__;!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDE5VBBQI$> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281316851%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=Uy9XRlDdNSGrTnw%2FQmRXSnMbAfBbeZi%2FmNs06U2P7IU%3D&reserved=0> mn.gov/mnit
>
>
>
>  _____
>
> From: Andrews, David B (DEED) <david.b.andrews@state.mn.us <mailto:david.b.andrews@state.mn.us> >
> Sent: Monday, May 20, 2024 2:42 PM
> To: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us <mailto:michael.tangen@state.mn.us> >
> Subject: RE: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
> Hi Michael,
>
>
>
> Sorry I didn’t respond sooner.  Long time, no talk, hope you are well.
>
>
>
> I see what you are saying. When you are in the message system, you are put into “Applications Mode” and arrows are all that work basically.
>
>
>
> Tab takes me away from the whole menu system.
>
> When I am in it, I can’t seem to get to help from either direction.
>
>
>
> I may be misunderstanding, so please feel free to call me so we can talk it through!
>
>
>
> My number is 651-539-2294.
>
>
>
> Dave
>
>
>
>
>
>
>
>
>
> From: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us <mailto:michael.tangen@state.mn.us> >
> Sent: Tuesday, May 14, 2024 1:04 PM
> To: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org>
> Subject: topic/question: navigating through submenu items with right and left arrows (outlying conditions)
>
>
>
>
> You don't often get email from  <mailto:michael.tangen@state.mn.us> michael.tangen@state.mn.us.  <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2Faka.ms%2FLearnAboutSenderIdentification__%3B!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXD3LnKFwY%24 <https://urldefense.com/v3/__https:/aka.ms/LearnAboutSenderIdentification__;!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXD3LnKFwY$> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281320747%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=x7i09y9Idp7gSDMa%2FNZ4M3iALb8uIAbgjTCX5OhlKDo%3D&reserved=0> Learn why this is important
>
>
>
>
>
>
> This message may be from an external email source.
>
> Do not select links or open attachments unless verified. Report all suspicious emails to Minnesota IT Services Security Operations Center.
>
>
>
>  _____
>
> Good day everyone, I have a couple related question on the topic of navigating through submenu items with the right and left arrow keys, and it relates to the key mapping in the documentation here:  https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2Ftutorials%2Fmenus%2Fapplication-menus%2F%23submenu-items <https://www.w3.org/WAI/tutorials/menus/application-menus/#submenu-items> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281324681%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=srxoB1ut2KXIJcO6773kubdMA%2BrX%2FtOfYD2KWHIy3BM%3D&reserved=0 <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2Fwww.w3.org%2FWAI%2Ftutorials%2Fmenus%2Fapplication-menus%2F*submenu-items__%3BIw!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXD4YwNaS8%24 <https://urldefense.com/v3/__https:/www.w3.org/WAI/tutorials/menus/application-menus/*submenu-items__;Iw!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXD4YwNaS8$> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281328389%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=mhuIhaHbPSfB72JgvM2zyatuAfZ2bt9sZq1aGR3d25I%3D&reserved=0>
>
>
>
>
> right →
>
> Close the submenu, select the first item of the next top-level menu item.
>
>
> left ←
>
> Close the submenu, select the first item of the previous top-level menu item.
>
> For ease of communicating, I am using this application menu <https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2Fwww.w3.org%2FWAI%2Ftutorials%2Fmenus%2Fapplication-menus-code%2F*main__%3BIw!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDQ7Tp8rc%24 <https://urldefense.com/v3/__https:/www.w3.org/WAI/tutorials/menus/application-menus-code/*main__;Iw!!C5qS4YX3!FD3lEx03RRKLv_mTwPbiOtc61Rr4BtmbcOxT0Z3E5DeIp7uRVdwj0IovTF-m3PDd8S7qtXQYUszjDpc-Fn1c1FXDQ7Tp8rc$> &data=05%7C02%7Cmichael.tangen%40state.mn.us%7C2267720a5a664e6fa26c08dc7b941cd7%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C638521123281332261%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=Kx4%2FtrCiPb3cHNN9uNf8g1O3EaZJNIXqfi93Hkv70u8%3D&reserved=0>  in the W3 documentation as an example. While I understand what to do when there is a next or previous top-level menu item, when the conditions aren't met for a next or previous top-level menu item with a child menu present, the example menu does not behave as I might expect.
>
>
>
> Scenario A:  If my focus is on "New" under "File" and I press the left arrow key, "View" gets the focus. Because the documentation says "select the first item of the previous top-level menu item", shouldn't the first item under "View (which is the item "100%") get the focus and the "View" submenu expanded?  My instincts tell me that either "File" should get the focus because you're going up one level to the parent, or "View" should be expanded and the first item under "View" gets the focus.
>
>
>
> Scenario B:  If my focus is on the submenu item "100%" under "View" and I press the right arrow key, "File" gets the focus. Similarly to Scenario A, my instincts are expecting the top-level item "Help" to get the focus, or that "File" should be expanded and the first submenu item ("New") gets the focus.
>
>
>
> Are my instincts wrong and the behavior of the example menu correct?  Or is it possible that under these two scenarios that the example menu is not behaving correctly?
>
>
>
> Your thoughts are much appreciated.  Thank you!
>
>
>
> Warmest regards,
>
> Michael
>
>
>
>
>
>
>
>
>
>
>
> Michael Tangen
>
> Senior Interface Designer/Developer | Web Development
>
>
Received on Friday, 24 May 2024 07:29:43 UTC