- From: <Dorothy.Bass@wellsfargo.com>
- Date: Thu, 12 Nov 2020 18:21:47 +0000
- To: <public-aria@w3.org>
- CC: <Carolyn_MacLeod@ca.ibm.com>
- Message-ID: <e2c46b9e62f24fc296f58664a92ee54c@wellsfargo.com>
Sorry I sent that to you only. Just hit reply last time.
I think the only one that is offensive is the one where <menu<https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html>> Is used as navigation. The function applied and announced by the screen reader and the application of menu is where it falls apart. Not just because of browser and Jaws non-support, but it’s changes the pattern.
All documentation says:
Navigation selection
Navigation is a selection to move to new section of page(anchor), new page or new site
Good example of navigation: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html
If you land on a (<nav><ul> <li> <a href=) list, the out of box function is to use the up and down arrow no matter if it is horizontal styled. The announcement includes how many items are in the list. Each item is counted out. The functionality and pattern is set.
Even this Menu demo uses <nav> and list items to for Flyout menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_flyout_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=SZcebaUtKgV16o-HCIrdYqpnFzsApMOyTYsQxdwJXps&e=>
Menu selection:
Menu is a selection/action to apply or change and is related to tool bars.
Good example of menu: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
None of the functionality.
Bad example of menu as navigation: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
original definition command or control - menuitem As a child of a <menu> element whose type attribute is in the popup menu state.
A <menuitem> element that uses one or more of the type, label, icon, disabled, checked, and radiogroup attributes defines a new command.
· The Command state The element represents a normal command with an associated action.
· The Checkbox state The element represents a state or option that can be toggled.
· The Radio state The element represents a selection of one item from a list of items.
NOTE: NO mention of a navigation link taking you to a new page.
Caution: Works ok – love to say YES, but – not for horizontal navigation without dropdowns: https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html
The demo provided has a horizontally list of selection each selection has a dropdown. When you land on the first item in the horizontal list, it tells you to use down arrows to navigate. Combination of shortcut keys and announcements are a little hard to understand if you can’t see. I would say this is a block when you think about using the tab key to take you out of the navigation, It did not take me to a logical location. Left and right arrow were usable but I can see where I am.
BUT now let’s say there is no dropdown included in the horizontal navigation. If you land on it, it still says use up and down arrows. Most of the implementation I have seen with remain nameless (worst offender – working with them now to possibly stop using menu) sites has been a horizontal link navigation items taking you to a new page… Yet all announce - use up and down arrow to navigate…. Yet this functionality does not work… I ask is this fair to the user?
View the multitude of examples provided for navigation marked up as “list” inside a <nav> or “role=navigation” landmark (links provided in emails below).
P.S.
I have also seen an issue with developer applying roving tabindex=”=1” to these menu items. Tabindex=-1 will removed links from the “Tab” key flow and the “Link List” dialog box making that insert+F7 worthless if only a few links are visible. The roving tabindex option leaving the discretion of link visibility to the developer/designer not the user. So who will be suing next? The person that was offended because they did not see the link tell them important info. May not be important to me or you, but to them, much so.
What I am seeing is that everything on a page is a list or a menu(even if it only one link). The only way to navigate page is the up and down arrow and or to read every word on the page. This new trend is making complicated pages more difficult to navigate.
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Sent: Thursday, November 12, 2020 9:18 AM
To: Bass, Dorothy [CX INTERACTION DESIGNER] <Dorothy.Bass@wellsfargo.com>
Subject: RE: Menu vs Nav - APPLICATION VS. WEB PAGE
Hi again, Dorothy.
I see that you just sent this to me, and not the group.
Were you intending for it to go to everyone?
Or did you want me to add this info to the github issue?
I think the most accessible Navigation example in the APG is the Disclosure<https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html> one.
I see that you tested that one, too - what did you think?
Thanks for your feedback,
Carolyn
----- Original message -----
From: <Dorothy.Bass@wellsfargo.com<mailto:Dorothy.Bass@wellsfargo.com>>
To: <Carolyn_MacLeod@ca.ibm.com<mailto:Carolyn_MacLeod@ca.ibm.com>>
Cc:
Subject: [EXTERNAL] RE: Menu vs Nav - APPLICATION VS. WEB PAGE
Date: Mon, Nov 9, 2020 3:46 PM
Thank you for adding this for me Carolyn. I am blocked at the office to enter things in GitHub.
I think the problem is how we loosely use the word “menu” and we do not really say “navigate to” as much. It’s more like chose from the navigation menu.
I had been attending the weekly APG meetings till the first of the year when WF decided to stop donating to the cause. My access seemed to be removed at some point. I am still dedicated to make the world a better place.
I was a little shocked to see that an example of menu as navigation existed. As soon as I discovered it I of course started to test it to set my expectations for future testing. This also gives me a chance to see how it is implemented in the markup and I can share with developer.
Sad to see/hear it was implemented badly. Maybe not badly as much as not supported correctly yet.
More disturbing was to test it with inconsistent results (yep, Chromium is not consistent on browser refresh. Eek! Bad, to worse, to better, back to bad, each refresh a different experience) giving me a bad taste in my mouth over non-similarities e.g. Menu vs Navigation. It’s still an apple not an orange no matter the argument, its sill an apple.
The fact is this example give anyone the argument “see the example”? If they can do it and say it can be done I’m doin it and no one can say anything about it. I’m not a tester and I’m using the example so… bam! Publish the broken experience and enter a bug that will be ignored for the next 2 years or we implement a new version.
The results: Not operable, not perceivable who cares? ME! I can’t sleep at night.
Is it a sandwich? yep!
I want to say slices of bread make a good sandwich platforms and crackers do not. Even though both are flat and made of mostly same ingredients they don’t really function in the preferred way when you’re hungry. Go to a homeless shelter and make some peanut butter and jelly sandwiches on crackers and see what the response would be. Both can work, but one is kludgy. Grumble.
Yes, it works. No, it doesn’t work. Both answer are correct but live in the gray area.
How this came about
While I was researching accessibility on a new product or should I say testing accessibility, it was failing miserably.
Standard test checklists and methods for testing hit one block after another. Because of blocks I start to document my experience and start researching solutions. This research was title menu vs navigation. Past knowledge of navigating and menu come into play and I look for links to solidify my argument of one over the other.
The new product example I am testing: Visually - it is navigation styled as a bar of links taking you to a new page in the site like we see every day. But to my surprise it is implemented as a menu.
Home | about us | anther page link | etc.
NOTE: Keyboard Interaction
The following description of keyboard behaviors assumes:
1. A horizontal menubar containing several menuitem elements.
2. All items in the menubar have child submenus that contain multiple vertically arranged items.
3. Some of the menuitem elements in the submenus have child submenus with items that are also vertically arranged.
No sub-menu child items ARE PRESENTED in the new product example unless you want to say that home is the main menu item and all other page links are children/sub-menu-items…
but then again you are navigating away from the home page if you click another item. So not really a menu selection to alter home.
When landing on Home(tab to it): the instructions say “To navigate thru items use up and down arrow”
Clicking the up and down arrows - nothing happens.
Just thinking of patterns and api navigation instructions and expectations.
Let’s add http://www.w3.org/TR/wai-aria-1.1/#toolbar<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23toolbar&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=W37sTDFt4ctXn77q-G5zauFa5Ncc3h59P8yxfbH1nBA&e=> to the mix.
Even better… this is implement with <span>tags instead of the native nav ul li tags… and to top it off, tabindex=”-1” was added to each link so none of the other links are in the flow or show up in the Links List dialog box.
Maybe the title should say APPLICATION vs. WEB PAGE
The documentation presented is definitive by saying MENU acts like a common desktop application menu.
Choice of ice-cream “strawberry, chocolate, vanilla ”, or copy paste, save, delete.
Combo box dropdown like interaction to make a selection Not, navigate to a new page in the site. Are you sure you want to navigate away from this page?
W3.org Application Menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_application-2Dmenus_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=oR8PUrvnXaBx0ZKSBruQz1whmDDys4AOz13R5b6GFXI&e=>: Add specific markup and keyboard behavior to resemble desktop application menus.
Navigation<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_Accessibility_ARIA_Roles_Navigation-5FRole-23Examples&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=24jpdHASiy6j-TMkaiKMgzrEnwyyYMsa96k-aDRmnh0&e=>: landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.
<nav> To include Flyout menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_flyout_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=SZcebaUtKgV16o-HCIrdYqpnFzsApMOyTYsQxdwJXps&e=>
Examples provided are in conflict
3.15 Menu or Menu bar<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23menu&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=KNRyWxUY-KGkFnb3UMUdMaLhUQ9OaCbALlzZWkKyCKA&e=>
A menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23menu&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=gF3CJve7aK2XtfcnqNcrK8uuNUhdQkSFaL1peOpXTlo&e=> is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices_-23menubutton&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=GThgY5uQ5L92hBHIQ3RETz67SCWjOta5GiFcTBz-5kQ&e=>, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
A menu that is visually persistent is a menubar<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23menubar&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=kmQ2t6QAzyUYV_NOHrB_3YUdNfOZrgRlaxvv_xI1HLk&e=>. A menubar is typically horizontal and is often used to create a menu bar similar to those found near the top of the window in many desktop applications, offering the user quick access to a consistent set of commands.
A common convention for indicating that a menu item launches a dialog box is to append "…" (ellipsis) to the menu item label, e.g., "Save as …".
Examples
Navigation Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=HfczsBh4zMSjjdXsCgZgS2UUYwGY5_mYypFaS6EOC8s&e=>: Demonstrates a menubar that provides site navigation.
1. This example is not consistent with any information provided above.
2. It does not function as expected in all browsers.
3. It does not fit web accessibility conformance.
If in the future it will be common place then I will be willing to rethink menu, but then I would drop nav as navigation… inconsistent patterns sucks. Don’t make me learn how to use your page over anther using a different navigation system.
Isn’t one of the criteria for menu is that a menu has a child… if it is a link to another page it has no children hence the instructions to use the up and down arrow is unresolved. Of course this is a good argument in writing 4000 lines of code to alter native language.
REMOVE till supported.
By adding a non-working example of a menu that acts like nav is confusing and there are wars being fought based on it.
Its sorta like me typing in numbers and indenting the content for the list above… the view is correct the implementation is not. You can see it is a list but someone that is listening to it is NOT told it is a list or how many items are in that list. As they key to it will say the number but is that a good experience? The ordered list functionality is lost.
Editor Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices_examples_menubar_menubar-2D2_menubar-2D2.html&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=_nch1CLJZYKNX-QGy0kY8EN1mWdVe-bL6Bs58dQ0O10&e=>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.
This work, and the reason it works is there is a bar with options and the options have children
So it’s looking like the link you provided is saying nav = navigation.
The problem still seems to be menu equaling menu. Why try to now change nav to menu. Menu has been defined, navigation has been defined.
I do not believe this makes it better for a user and most certainly does not make it easier to implement when the only option is to re-program native function and/or context.
Not even MDN web docs is willing to put up the ARIA: menu as an example for navigation.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_Accessibility_ARIA_Roles&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=jbdkyQ4eRqiR_wdNCmwgQERdMCQ_ajy8uOy4t0N2f2U&e=>
but if you do a search on menu
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_HTML_Element_menu&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=WeMbgerqvt_c90Flp4FiO08kJwtX7QpkPTn2YXuLKXc&e=>
The HTML <menu> element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_HTML_Element_menu-23Context-5Fmenu&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=ry_OjB9dt5jpr6gwG5lBpadgepEh9CCsqMCf0rTgpvI&e=>, such as those that might appear underneath a button after it has been clicked.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Mozilla_Add-2Dons_WebExtensions_user-5Finterface_Context-5Fmenu-5Fitems&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=a-frKkPZ3Qs5Vdh4lb6gNpehSqrmjWVXfYszsRM4e2A&e=>
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Mozilla_Add-2Dons_WebExtensions_API_menus&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=p7XzUVC9XQxOm3iqSwpq5qB-D8fl1-Nocc5uukMFtfM&e=>
Now search navigation
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_Accessibility_ARIA_Roles_Navigation-5FRole&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=w0jAdQR2Bkephi77tA_FEG6SoZVm7fn2yGcM9HuVAzc&e=>
It is preferable to use the HTML5 <nav> element<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_HTML_Element_nav&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=CBGxXKuS-sPRLNe_WrVWQB9cpenCdU4t_Cxfbdo16PY&e=> to define a navigation landmark. If the HTML5 nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark.
Every other example of navigation:
MDN web docs
https://developer.mozilla.org/en-US/docs/Web/HTML<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_HTML&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=3fKrFP5aesVc5X0J1PpuSiTYBkH2eIM8WVOz1q67E3w&e=>[Leaving Wells Fargo] - Resources for developers, by developers
< nav ><https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_HTML_Element_nav&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=CBGxXKuS-sPRLNe_WrVWQB9cpenCdU4t_Cxfbdo16PY&e=>[Leaving Wells Fargo]
________________________________
WHATWG community
https://html.spec.whatwg.org/<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=3Wgz9_Tt6NhGMFmoagUF9DAMMABvLGT31ngy4uHnKFg&e=>[Leaving Wells Fargo] - HTML Living Standard
4.3.4 The nav element<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_html51_sections.html-23the-2Dnav-2Delement&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=Jkn4jRgXER1k6EyFj1j4LKoJNuPYSqbdedbODo-_pN4&e=>[Leaving Wells Fargo]
________________________________
Accessible Rich Internet Applications (WAI-ARIA) 1.1
http://www.w3.org/TR/wai-aria-1.1/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=_2kKOmDpUxnYwpXoYJRlVpatY5wjJUgAA9Y4t4BSGF8&e=>[Leaving Wells Fargo] - W3C Recommendation
navigation<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23navigation&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=NpdZbThyVZrjvJSTZ7fX4jwt8K1noCbYeZ7Z09WIRAo&e=>[Leaving Wells Fargo]
HTML nav<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_html5_sections.html-23the-2Dnav-2Delement&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=E0NMFu8IwhiyA8QAefqj7oA_-Osm370LTKZbsdz91E4&e=>[Leaving Wells Fargo]
________________________________
WAI-ARIA Authoring Practices 1.1
http://www.w3.org/TR/wai-aria-practices-1.1/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=bFX4fk1gEe3JIHt0jSED-WadBw99XYMtPSHy4YUxgzk&e=>[Leaving Wells Fargo] - W3C Working Group
5.3.4 Accessible Name Guidance by Role<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23naming-5Frole-5Fguidance&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=XD3FpyIizi5qTwi-RZhL8xPbJBcTea-Qh2raRn7Y6Jo&e=>[Leaving Wells Fargo]
navigation<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23navigation&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=NpdZbThyVZrjvJSTZ7fX4jwt8K1noCbYeZ7Z09WIRAo&e=>[Leaving Wells Fargo]
________________________________
Using ARIA
http://www.w3.org/TR/using-aria/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_using-2Daria_&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=dVVWIMLkEbZwzbANVVVzkarNKr2G5eaEgqqk86Hmk3Q&e=>[Leaving Wells Fargo] W3C Working Draft
Aria Roles and Properties Not Available as Features in HTML<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_using-2Daria_-23html-2Daria-2Dgaps&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=eZ5-2xkPctwj5BmLZLlk0hRTkyvpss_DUFdrOPt3FVY&e=>[Leaving Wells Fargo]
________________________________
What’s even funnier is to see menu placed inside <nav> landmark.
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com<mailto:Carolyn_MacLeod@ca.ibm.com>>
Sent: Wednesday, November 4, 2020 5:24 PM
To: Bass, Dorothy [CX INTERACTION DESIGNER] <Dorothy.Bass@wellsfargo.com<mailto:Dorothy.Bass@wellsfargo.com>>
Cc: public-aria@w3.org<mailto:public-aria@w3.org>
Subject: Re: Menu vs Nav - YES please click on each link for full understanding
Hi, Dorothy!
I've pasted a link to this email thread into GitHub issue #353<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_353&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=G1dmIB_b6FFQ2BGlXqoAiGrRp3RX6wRbCBmzJkdp_F0&e=> in order to keep the conversation all in one place. :)
Please note that a section called Navigation Systems for Sites and Apps<https://urldefense.proofpoint.com/v2/url?u=https-3A__raw.githack.com_w3c_aria-2Dpractices_issue89-2Dnavigation-2Dsystems_aria-2Dpractices.html-23navigation-2Dsystems&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=verdHi-GIPw3zEzyWR-a0fCR-kp2aoKw0UDlyif9nx8&e=> is currently being drafted for the APG.
Review comments are welcome in GitHub pull request #1492<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_pull_1492&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=ArfhAjpyUYg4by8b3dh0ix03D9J-PRrG5Acl0IhxDoA&e=>.
Please also note that the problem you observed in JAWS is JAWS bug #415<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_FreedomScientific_VFO-2Dstandards-2Dsupport_issues_415&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=qvwb6LG58fCHbPUbeNt21iDONJ-tnYxNpEmfSbz0XDY&e=>. NVDA correctly says "submenu" when a focused menuitem has a submenu. There's also JAWS bug #411<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_FreedomScientific_VFO-2Dstandards-2Dsupport_issues_411&d=DwMGaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=1qzqKFaTlFvA6Tj-oVsbgXQrgiY0iD2h85SuRgDiFNk&s=iqC6aDFAGkcm2KPUPPeULcZvy4k4EH9-yYqdjjA_4cw&e=> that is asking for left/right arrow instructions to open submenus.
Hope this is helpful!
Carolyn
----- Original message -----
From: <Dorothy.Bass@wellsfargo.com<mailto:Dorothy.Bass@wellsfargo.com>>
To: <public-aria@w3.org<mailto:public-aria@w3.org>>
Cc:
Subject: [EXTERNAL] Menu vs Nav - YES please click on each link for full understanding
Date: Wed, Nov 4, 2020 3:59 PM
https://www.w3.org/TR/wai-aria-practices-1.1/#menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23menu&d=DwQFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=LS7BVCuGMMSnZnc5uc-ikOOBV4ttGxrs04bBV79pIRg&e=>
Navigation Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iffhLxkvQLZpLKwp4HzsKRP6wOC0zM6CmZzwnT8Zjg0&e=> FAILED
See below for details
Used edge-chromium with JAWS
Stop trying to say its ok to have a menubar as navigation when it is a list of links across a page that navigate you to a diff page.
Is this A11Y Navigation Style Guide example<https://urldefense.proofpoint.com/v2/url?u=https-3A__a11y-2Dstyle-2Dguide.com_style-2Dguide_section-2Dnavigation.html-23kssref-2Dnavigation-2Dnavigation-2Ddropdown&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=adAIR3CEhcNBtYjVZGswQDPX9GhJB4et1YANSvNNhFw&e=> wrong?
Does it conform to all these Success Criteria:
* 2.4.3 Focus Order:<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_WCAG21_quickref_-23focus-2Dorder&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=suhLSqDK4Yfwaxcmoh3DLrhicF7Jx7zfEtr4f92I_CE&e=> If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
* 2.4.5 Multiple Ways:<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_WCAG21_quickref_-23multiple-2Dways&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=7KBc56aI2GWPiLFaJr3Xms0eqTZjPCZ_r7T4G11neH4&e=> 2.4.5 More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)
* 2.4.7 Focus Visible:<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_WCAG21_quickref_-23focus-2Dvisible&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=GWNoQyiwy25vJyx2qM7M2CCfMBh59DzXR7Kp07U2mmo&e=> Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
* 2.4.8 Location:<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_WCAG21_quickref_-23location&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=YbrvAKi4RrS_TJqWItZ7PwUvF4vdtqleuBAk_ZLF1ZU&e=> Information about the user's location within a set of Web pages is available. (Level AAA)
navigation assumptions
Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.
Menus (used loosely) are used for navigation and to provide functionality which are critical parts of web page operability.
* Structure<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_structure_&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=isCqqCaF-dZopudZA9Pk9MxSZy--3RRj8I_1sJICGzU&e=>: Mark up menus in a way that reflects their structure and appropriately labels them.
* Styling<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_styling_&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=_9K1B6Zc_-Fn5FrVd9CY2An39ZnuFR9hP-8N_-1sVmE&e=>: Use commonly recognized design patterns to distinguish menus and the state of menu items.
* Fly-out Menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_flyout_&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=xs8d7gBXkhSLZuV2oi7oIdN5K_YbNmeKf4zxQUWgfa0&e=>: Ensure fly-out (drop-down) submenus can be used appropriately by mouse and keyboard
Menu ASSUMPTIONS
* Application Menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_tutorials_menus_application-2Dmenus_&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=urHuOblUjy40g9VAFebVz-ch6KpsNS4GBq0WlKzf0So&e=>: Add specific markup and keyboard behavior to resemble desktop application menus.
The following description of keyboard behaviors assumes:
1. A horizontal menubar containing several menuitem elements.
2. All items in the menubar have child submenus that contain multiple vertically arranged items.
3. Some of the menuitem elements in the submenus have child submenus with items that are also vertically arranged.
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_WAI_GL_wiki_Using-5FARIA-5Fmenus&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=x3K2D2alPxi4PATzPNz3lLf7P98FSnlZ_6yvcsoHahs&e=>
Speech-based command and control systems can benefit from WAI-ARIA semantics like the role attribute to assist in conveying audio information to the user. For example, upon encountering an element with a role of menu<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23menu&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=PLdO-TeX2yz2H7AmTpkUwmb14xerhL-2XmtotdEdULA&e=> with child elements of role menuitem<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23menuitem&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=C2l03geaIDibj5kV2CGdpIL7ui3hBFGE2Q8WG4j1o2s&e=> each containing text content representing a different flavor, a speech system might state to the user, "Select one of three choices: chocolate, strawberry, or vanilla."
https://pr-preview.s3.amazonaws.com/w3c/aria/pull/805.html#menubar<https://urldefense.proofpoint.com/v2/url?u=https-3A__pr-2Dpreview.s3.amazonaws.com_w3c_aria_pull_805.html-23menubar&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=diWsT584-PLfGbunBVEC_8g_SczggpQbF7hlgFGTmkM&e=>
The menubar role<https://urldefense.proofpoint.com/v2/url?u=https-3A__pr-2Dpreview.s3.amazonaws.com_w3c_aria_pull_805.html-23dfn-2Drole&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=lxRfdCmOhhQ9sM5EIEREdC-i5RbKyMd9-dDoxU4_k3k&e=> is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors SHOULD ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.
assumption
I suspect that you do not really want an operating-system-style menu. To see what is expected of one, take a look at the WAI-ARIA Authoring Practices item 2.14 Menu or Menu bar<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23menu&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=LS7BVCuGMMSnZnc5uc-ikOOBV4ttGxrs04bBV79pIRg&e=>.
Check the code in the ARIA PRACTICE GROUP pattern<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iffhLxkvQLZpLKwp4HzsKRP6wOC0zM6CmZzwnT8Zjg0&e=> for comparison.
READ: Don’t Use ARIA Menu Roles for Site Nav<https://urldefense.proofpoint.com/v2/url?u=http-3A__adrianroselli.com_2017_10_dont-2Duse-2Daria-2Dmenu-2Droles-2Dfor-2Dsite-2Dnav.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=j3-sOc1DxAZHEk-dNiHcypT-0uwbYZ42MrjHPL3bbjg&e=>.
Well in my enthusiasm I launched JAWS
I needed to test to set my expectations when testing menubar as a navigation unit in the future.
I must over emphasize the importance of testing to ensure that browser results match expectations. I prefer native techniques to ensure robust accessible experience but I have adapted to testing the combination of js and ARIA as well.
Without interruption or argument I validate:
· Is the navigation accessible with assistive technologies<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23dfn-2Dassistive-2Dtechnology&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=6RY0lqXMdtmXXEbFMO8J6HTTQoHMfN_-ZZzAx9yqzF4&e=>
· Can I determine the semantics<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23dfn-2Dsemantics&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=toPoVVckZN5c18EAN8lK_Nu2d9bjbDXCIy3nZT08hZQ&e=> behind portions of a document
· Is the user able to effectively navigate to all parts in a usable method WAI-ARIA Authoring Practices<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices_&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=qDQR5e9flD9_1NqMk4TSWe0pQSVy8DSRfBrMPFuvz50&e=>
EXAMPLES:
· Editor Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D2_menubar-2D2.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=SGHXXA828Bla2Eo9WNMPhYXq-6ne43o5qBrc-FjsBus&e=>: Example of a menubar that presents text styling actions similar to an editor application.
· Example Disclosure for Navigation Menus<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_disclosure_disclosure-2Dnavigation.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=gvuH2ymq4GyZXhiYOhiwvTlaZ9vuFQ_ZIZcWIpm7WQk&e=>: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons.
· Navigation Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iffhLxkvQLZpLKwp4HzsKRP6wOC0zM6CmZzwnT8Zjg0&e=> FAILED
Alas nothing has changed: menu as navigation - bad experience for non-sighted user
Much to my disappointment the Navigation Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iffhLxkvQLZpLKwp4HzsKRP6wOC0zM6CmZzwnT8Zjg0&e=>
· If I you did not land on the expected. Tag it
· If the instructions I hear do not match what it takes to land on the expected. Tag it
· If one of several globally accepted navigate pattern options is not available. Tag it
result
When you land on the menu you are told to “use the up and down arrow” to navigate. Does not tell me there are more items left or right. This is ok if using a Menu and could be interpreted as ok in Navigation Menubar Example<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_menubar_menubar-2D1_menubar-2D1.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iffhLxkvQLZpLKwp4HzsKRP6wOC0zM6CmZzwnT8Zjg0&e=> because it has the expected child sub-menu drop-down items.
Even though every menuitem title is presented with a dropdown (SO I COULD USE THE DOWN ARROW), some dropdown items having sub-menus items. This is where the navigation FAILS in this example.
No verbal indication to navigate to sub-sub-menus items from the sub-menu item list dropdown. NOT presented to a non-sighted user
The down arrow skipped or did not announce sub-sub-items. NOT presented to a non-sighted user
The insert + F7 Links List dialog box did not list any of the links in this test. So I would say it’s a fail but…
The visual was a success… I was able to use my keyboard arrow keys to get around.
I could see an arrow to indicate a fly out from the dropdown menu items
Since I could see the arrow indicating more, I was able to move the focus using arrow keys to hear the items but… NOT presented to a non-sighted user
So, YES!!! You can use the menubar for navigation if you go to this one place for a ruling and interpret it as ok, but testing did not give me favorable results. For me testing wins.
What is a menu - more research:
https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_questions_41141247_aria-2Drole-2Dmenuitem-2Dfor-2Da-2Dor-2Dli&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=VY34ye_jQBLU70mprqHflRZpmMmrubx-8ixj_R01FT0&e=>
Are you making a menu bar to mimic an operating system menu bar (with all the associated keyboard commands and the like) or just a nav bar on a web site? If the former, read this: w3.org/TR/wai-aria-practices-1.1/#menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23menu&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=LS7BVCuGMMSnZnc5uc-ikOOBV4ttGxrs04bBV79pIRg&e=> If the latter, skip the menuing ARIA. – aardrian<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_users_3352034_aardrian&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=Idzo_riXwSn2OXYerJJX8hL7mLgZ4jE3S-DL8zCXSKs&e=> Dec 14 '16 at 22:44<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_questions_41141247_aria-2Drole-2Dmenuitem-2Dfor-2Da-2Dor-2Dli-23comment69508976-5F41141247&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=iH17a-vweHYa7mYvgGkhAJX7PlXBp4tModm-MJQhm40&e=>
It is just a nav bar without keyboard commands. – Géza<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_users_302151_g-25C3-25A9za&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=ICrk7OnVDDu_CLix8wG2FHC9BKGbbNtV7zwonmuJ0T8&e=> Jan 3 '17 at 8:32<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_questions_41141247_aria-2Drole-2Dmenuitem-2Dfor-2Da-2Dor-2Dli-23comment70084684-5F41141247&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=-wwotlH-Isaf6agi16HXAHm6RNYczQPflQkN3J8nbXY&e=>
Then you do not want role=menu. Further, you do need to support keyboard users, but a list of links (displayed as a bar) will do just fine. Give the parent container a role=navigation and just leave it at that. – aardrian<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_users_3352034_aardrian&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=Idzo_riXwSn2OXYerJJX8hL7mLgZ4jE3S-DL8zCXSKs&e=> Jan 3 '17 at 13:18<https://urldefense.proofpoint.com/v2/url?u=https-3A__stackoverflow.com_questions_41141247_aria-2Drole-2Dmenuitem-2Dfor-2Da-2Dor-2Dli-23comment70095026-5F41141247&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=wbD-t1AwXrK7eOpST2k4QvFnXjlEVAaohiwZw66XIeo&e=>
You can style the visual navigation<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_examples_landmarks_navigation.html&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=itwYHE8HKxlgHHGTZA_o_93r66FvHXXtLn93G3eL7ig&e=> lists horizontal or vertical including sub-list items in a dropdown. What’s important is what the non-sighted user hears and how they know to navigate.
http://www.w3.org/TR/wai-aria-1.1/#menubar<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23menubar&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=gObqj-SSLsQJqfvmMJLWwexaAfYyUAh4GWJx6DQdvZg&e=>
The menubar role<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_wai-2Daria-2D1.1_-23dfn-2Drole&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=edGJweOdqQ5rxJtyKTNUf__EOZhFGx6FlSBVBzcFp64&e=> is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors SHOULD ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_grouping-2Dcontent.html-23the-2Dmenu-2Delement&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=lQf2Hu74Shnu02wkYOcoyMwkFmQ-FmIenHmZbnaydss&e=>
The menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_grouping-2Dcontent.html-23the-2Dmenu-2Delement&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=lQf2Hu74Shnu02wkYOcoyMwkFmQ-FmIenHmZbnaydss&e=> element represents<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_dom.html-23represents&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=ceGJsLqlZEwZtsSR9NcSMnTfoSUyRPUeJsRXXVUDAh4&e=> a toolbar consisting of its contents, in the form of an unordered list of items (represented by li<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_grouping-2Dcontent.html-23the-2Dli-2Delement&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=Nz3tY1jfxbn4-9LE_Q1W57QrbGW0TQl_DzrjYjtzViM&e=> elements), each of which represents a command that the user can perform or activate.
The menu<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_grouping-2Dcontent.html-23the-2Dmenu-2Delement&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=lQf2Hu74Shnu02wkYOcoyMwkFmQ-FmIenHmZbnaydss&e=> element is simply a semantic alternative to ul<https://urldefense.proofpoint.com/v2/url?u=https-3A__html.spec.whatwg.org_multipage_grouping-2Dcontent.html-23the-2Dul-2Delement&d=DwMFAw&c=jf_iaSHvJObTbx-siA1ZOg&r=7pxjQj6Sn7GadcQXUI8qdHzQ7owon0mR-h863iCnxZc&m=UXlhELy-7KZLvzMF3Ma02vmNcD09PVfnUpcKPDdrBMY&s=vV8MLEjSh6uYSzscULdmSacHfJ4c9oEadfIxLq7gOYk&e=> to express an unordered list of commands (a "toolbar").
<menu>
<li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
<li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
<li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>
Menu Concepts
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20(Internal%20Content)/demo.htm
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Variation%20Simulated%20Edit%20With%20Right%20Click/demo.htm
http://www.w3.org/WAI/tutorials/menus/
Your turn to evaluate these navigation options.
You shouldn’t take my word for it… test it out yourself.
Test methods
1. Keyboard only navigation
2. More than one navigation method
1. Most common – tab key
2. Second most common – heading and region
3. Arrow keys
3. More than one browser and screen reader
· Chrome with JAWS
· Firefox with NVDA
Following the rules?
Eyes wide open
1. Evaluate first with your eyes
· Document what you see
· Document sequence
· Document what you can click on
2. keyboard navigate using first method
· Document what you see
· Document sequence
· Document what you expect to be able to mouse over and click on
3. keyboard navigation second method
· Document what you see
· Document sequence
· Document what you expect to be able to mouse over and click on
eyes closed or even better yet let someone with no vision preform the same thing letting them navigate without help.
4. Now use a screen reader and keyboard - compare what you see and hear using more than one standard navigation method
· Compare what you see
· Compare your sequence
· Compare mouse over and click expectations
Conclusion
If it's a menu, it's a menu and should behave like one according to standards.
But if it is not a menu it should not behave like a menu.
If it is navigation let it me navigation.
Attachments
- image/gif attachment: image001.gif
Received on Thursday, 12 November 2020 18:22:17 UTC