- From: <Dorothy.Bass@wellsfargo.com>
- Date: Wed, 4 Nov 2020 20:59:14 +0000
- To: <public-aria@w3.org>
- Message-ID: <e9ffa903e74d474b93fa78bb19e50066@wellsfargo.com>
https://www.w3.org/TR/wai-aria-practices-1.1/#menu Navigation Menubar Example<https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html> 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://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-navigation-dropdown> wrong? Does it conform to all these Success Criteria: * 2.4.3 Focus Order:<https://www.w3.org/WAI/WCAG21/quickref/#focus-order> 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://www.w3.org/WAI/WCAG21/quickref/#multiple-ways> 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://www.w3.org/WAI/WCAG21/quickref/#focus-visible> Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA) * 2.4.8 Location:<https://www.w3.org/WAI/WCAG21/quickref/#location> 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://www.w3.org/WAI/tutorials/menus/structure/>: Mark up menus in a way that reflects their structure and appropriately labels them. * Styling<https://www.w3.org/WAI/tutorials/menus/styling/>: Use commonly recognized design patterns to distinguish menus and the state of menu items. * Fly-out Menus<https://www.w3.org/WAI/tutorials/menus/flyout/>: Ensure fly-out (drop-down) submenus can be used appropriately by mouse and keyboard Menu ASSUMPTIONS * Application Menus<https://www.w3.org/WAI/tutorials/menus/application-menus/>: 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 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<http://www.w3.org/TR/wai-aria-1.1/#menu> with child elements of role menuitem<http://www.w3.org/TR/wai-aria-1.1/#menuitem> 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 The menubar role<https://pr-preview.s3.amazonaws.com/w3c/aria/pull/805.html#dfn-role> 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://www.w3.org/TR/wai-aria-practices-1.1/#menu>. Check the code in the ARIA PRACTICE GROUP pattern<https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html> for comparison. READ: Don't Use ARIA Menu Roles for Site Nav<http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html>. 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<http://www.w3.org/TR/wai-aria-1.1/#dfn-assistive-technology> ˇ Can I determine the semantics<http://www.w3.org/TR/wai-aria-1.1/#dfn-semantics> behind portions of a document ˇ Is the user able to effectively navigate to all parts in a usable method WAI-ARIA Authoring Practices<https://www.w3.org/TR/wai-aria-practices/> EXAMPLES: ˇ Editor Menubar Example<https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html>: Example of a menubar that presents text styling actions similar to an editor application. ˇ Example Disclosure for Navigation Menus<https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html>: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons. ˇ Navigation Menubar Example<https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html> FAILED Alas nothing has changed: menu as navigation - bad experience for non-sighted user Much to my disappointment the Navigation Menubar Example<https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html> ˇ 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://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html> 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 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://www.w3.org/TR/wai-aria-practices-1.1/#menu> If the latter, skip the menuing ARIA. - aardrian<https://stackoverflow.com/users/3352034/aardrian> Dec 14 '16 at 22:44<https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li#comment69508976_41141247> It is just a nav bar without keyboard commands. - Géza<https://stackoverflow.com/users/302151/g%c3%a9za> Jan 3 '17 at 8:32<https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li#comment70084684_41141247> 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://stackoverflow.com/users/3352034/aardrian> Jan 3 '17 at 13:18<https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li#comment70095026_41141247> You can style the visual navigation<https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/navigation.html> 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 The menubar role<http://www.w3.org/TR/wai-aria-1.1/#dfn-role> 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 The menu<https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element> element represents<https://html.spec.whatwg.org/multipage/dom.html#represents> a toolbar consisting of its contents, in the form of an unordered list of items (represented by li<https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element> elements), each of which represents a command that the user can perform or activate. The menu<https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element> element is simply a semantic alternative to ul<https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element> 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.
Received on Wednesday, 4 November 2020 20:59:39 UTC