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 | mn.gov/mnit<http://mn.gov/mnit>

________________________________
From: Andrews, David B (DEED) <david.b.andrews@state.mn.us>
Sent: Wednesday, May 22, 2024 11:04 AM
To: Tangen, Michael H (MNIT) <michael.tangen@state.mn.us>
Cc: 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)


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>
Sent: Wednesday, May 22, 2024 10:22 AM
To: 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)



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

     *   Item 1A

     *   Item 1B

  1.  Item Two

     *   Item 2A

     *   Item 2B

  1.  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?

  1.  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 | mn.gov/mnit<http://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 michael.tangen@state.mn.us<mailto:michael.tangen@state.mn.us>. Learn why this is important<https://aka.ms/LearnAboutSenderIdentification>



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://www.w3.org/WAI/tutorials/menus/application-menus/#submenu-items




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://www.w3.org/WAI/tutorials/menus/application-menus-code/#main> 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