Review navigation menubar example (menubar-1.html)

[mcking65]

Provide editorial and functional feedback on the
navigation menubar example.

[accdc]

The code and role usage looks good, plus the focus movement.

One note, at present the spec doesn't support the use of aria-expanded on role=menuitem, however this is an important addition that needs to be made in the spec to support touch screen devices. To this end, the following bug has been submitted:
w3c/aria#454

[mcking65]

@a11ydoer

This comment on issue 144
about left/right arrow behavior applies to this example too.

In addition, it would also be very helpful to have some of the submenus to have submenus. So, for example, under academics, give colleges and schools a submenu that has items like engineering, business, Liberal Arts, etc. It would be good to have at least one sub submenu in each menu. You can have the sub/submenus go to the same landing page as their parent ... no need to create more fake landing pages.

[mcking65]

@a11ydoer
I made significant changes to the HTML file with commit 6a24c6c

I did most of the work of updating the example page so it conforms to our example template. It still needs one table of role and property information to be filled in.

[terrill]

It's common in navigation menus for the top-level menu items to be hyperlinks that target a high-level landing page. Therefore these menu items serve two functions:

1. They trigger display of a sub-menu (typically on hover).
2. They serve as a link to a top-level landing page (typically on click).

The current example doesn't account for this dual functionality. Any ideas? Perhaps space could trigger the link, and enter could reveal the submenu?

[terrill]

According to the Nu Html Checker, aria-expanded is not allowed on <a> elements, even with those that have role="menuitem". Is this a bug in the validator or a problem in this example?

[mcking65]

@terrill
WRT aria-expanded on menuitem elements, this is intentional because it better supports touch and works better with screen readers. This task force believes there is an oversight in the ARIA spec and has raised w3c/aria#454. Since 1.1 is already in CR, not sure we will be able to resolve this, officially, in 1.1. I am certain, though, that we will get it resolved.

On the topic of overloading items in the menubar as both elements that open a menu and navigate to a link target, we do not recommend this practice but have acknowledged that having enter and space navigate to the target and down arrow open the menu is a way of handling it. You can see this in the notes of the keyboard section in the design pattern. At this time, we have two different version of that section on the table per issue #120.

[a11ydoer]

@mcking65 @jongund @jnurthen @accdc

Jon and I would like to get feedback on modified left/right arrow behavior. - it is close to window model now than MAC model but the behavior is a bit weird.

If the focus in the first item of parent menu item(ie. focus is on "overview" under "about"), pressing right arrow key closes current popup list(ie."about") and open next popup list(ie: "admissions") and move the focus to the first item of next parent item(ie."apply")

Is this the behavior we want to implement via revision?

Here is the revised coding example.

(Parent menu item never get focus in this scenario until escape key is pressed from the popup menu list and start over. The way that parent menu item can get focus with either left or right arrow is only when the popup menu is closed.)

I appreciate any feedback on this.

[mcking65]

@a11ydoer

Very close. The only difference between this version and what we discussed having is that focus would land on admissions instead of apply. So, when focus is on addmissions, the admissions menu would be open and aria-expanded on admissions would be true.

[a11ydoer]

@mcking65 @jongund @jnurthen @accdc

So what happens when focus is on a menubar item (e.g. "Admissions") and the popup menu is open (e.g. aria-expanded=true) and you press the left or right arrow key? Should the popup menu associated with the new menubar item with focus be opened or closed?

[accdc]

I've seen it implemented both ways successfully, where if Right or Left is pressed and the menu is automatically opened, or when it is closed and instead requires Down to be pressed in order to open it, as long as focus moves appropriately and aria-expanded is set correctly, it works accessibly in both types.

[a11ydoer]

@accdc @mcking65 @jnurthen @jongund

Here is the revised behavior.

Once the popup is open, focus in the first menu item is kept as left/right arrow is pressed. Otherwise(if the popup is not open), the focus stays in parent menu item.

Please let me know what you think.
Jemma

[a11ydoer]

@mcking65 @jnurthen @jongund

Jon and I came up with a bit different template under the table of "Role, Property, State, and Tabindex Attributes", not exactly the same as yours. I wonder whether this is acceptable to you.

For example, you have below infomation under the table of "Role, Property, State, and Tabindex Attributes"

• Attribute
• Applied to Element
• Usage

We have below infomation under the same table, " Role, Property, State, and Tabindex Attributes"

• Role
• Tabindex
• Accessible Name
• Properties and States
• Usage

Let me know it is ok.
Jemma

[mcking65]

@a11ydoer,

The revised right/left arrow behavior is like the pattern recommends, thank you.

In your last comment, however, you wrote:

Once the popup is open, focus in the first menu item is kept as left/right arrow is pressed.
Otherwise(if the popup is not open),
the focus stays in parent menu item.

I am not sure what the first sentence means. As far as I can tell, it does not work that way, and that is not how we want it to work. So, that is good. What I observe is that if the "about" popup is open and focus is on any item in the about popup menu, then moving right opens the admissions menu and places focus on the admissions item in the menubar. In other words, it is now behaving as recommended in the
latest version of the pattern.

[mcking65]

@a11ydoer,

One important feature of the pattern that is missing are sub>submenus. For example:
Give about > facts a submenu with options like historical, current statistics, awards, etc.
Give about > campus tours a submenu with options like For prospective students, For tourists, For K-8 children.
Give academics > colleges and schools a submenu with options like engineering, business, etc.

You do not need to add more landing pages; just reuse the existing ones.

I think it would be good to have one or more submenus in each popup.

[mcking65]

For roles, states, and properties, I like the 3-column format so we can provide usage notes about individual attributes. For example, in this one you are using roving tabindex and so we should have a usage note about that like the one I put on the data grid page. One goal I have is for editorial consistency so that we give consistent guidance across examples and reference the document itself where appropriate.

[jongund]

@accdc @mcking65 @jnurthen @a11ydoer
There are pluses and minus for different organizations of the information, so if the group decided on three columns while I was not able t make meetings, then I will not object. I believe there is value in parsing out accessible name and the properties for a role value. To me it kind of reinforces these concepts to developers, especially for labeling techniques for a particular role.

I still would like to see the keyboard support information in a table, it is much easier to read (at least visually) than the simple list.

[a11ydoer]

@mcking65
Thanks for the response and comments. I will see what I can get done this week.

[a11ydoer]

@mcking65 @jongund
I am still editing html page according to the template and adding functionality for sub>submenus.
Here is the revised example, menubar1

[a11ydoer]

@mcking65 @jongund @jnurthen
Please comment on revised menu example 1 at my a11ydoer git repository pull request.
Thanks,
Jemma

[jongund]

Jemma, Have you checked in the changes we worked on yesterday into your repository? If so can you send me a link? Thanks, Jon From: JaEun Jemma Ku [mailto:notifications@github.com] Sent: Tuesday, November 29, 2016 5:36 AM To: w3c/aria-practices <aria-practices@noreply.github.com> Cc: Gunderson, Jon R <jongund@illinois.edu>; Mention <mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Review navigation menubar example (menubar-1.html) (#145) @mcking65<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_mcking65&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=Ty8MdMRk0VeBrjklLUg8i5iMrpi6XPn2NHYJkLFUNPk&e=> @jongund<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=wFQTLn3JOAjp2t2JfTg7NIZH5HsLaliQCUdRkXlR3_8&e=> @jnurthen<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jnurthen&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=LnRoFCQnYzTnBKMJwiLbxb7zL13W7O_ibRBbkCL87TA&e=> Please comment on revised menu example 1 at my a11ydoer git repository pull request.<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_a11ydoer_aria-2Dpractices_pull_8&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=vX_0mwErGOpn14nz0kNb3drIDlIduSZDLFamyTE-P7o&e=> Thanks, Jemma — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_145-23issuecomment-2D263547940&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=8KCjnLxU0ZIoxA-11fitd5_4U44UP23167aeSudzFVc&e=>, or mute the thread<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7FmhHAUb8oWh3GZ-5FLxxeXyt9O0-2D9ks5rDA44gaJpZM4KkjnG&d=DQMCaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=Lf_8fLN8xFckOf-ah7TEd_zO9dIwBEC39AvCTRg7ftw&s=tUiMuBdYYf43-P-NLe_I6ijzES_2t6mN0fPBsuvur38&e=>.

[a11ydoer]

sure. Here is my git repo which menubar example is committed.

[annabbott]

Reviewed Navigation Menubar Example (http://w3c.github.io/aria-practices/examples/menubar/menubar-1/menubar-1.html):

Example 1 > Notes: > 1. This example includes the ARIA roles and properties in the source code for authors to easily see which elements the roles and properties need to be included.
Suggested edit: 1. This example includes the ARIA roles and properties in the source code for authors to easily see elements for which roles and properties need to be included.

Example 1 > Notes: > I'm not certain that the second item listed adds any information not already included in the first listed item. Suggest removing 2.

"Role, Property, State, and Tabindex Attributes" table appears to be default and needs to be populated.

[a11ydoer]

@mcking65 @jongund

• Menubar example repo

[mcking65]

Enter and space are not working correctly in the menubar. Raised issue #196.

[mcking65]

Closing; all feedback points have been addressed. final editorial work will continue in issue 267.

[jeanette-c]

Possible workaround for aria-expanded with role="menuitem" issue: notbeing able to see it, but in one example I saw something similar:

<a role="button" aria-expanded=... Would that work with touchscreens?

[mcking65]

@fsilvain commented:

Possible workaround for aria-expanded with role="menuitem" issue: not being able to see it,
but in one example I saw something similar:
<a role="button" aria-expanded=...
Would that work with touchscreens?

Not aware of the issue you are describing.
However, with that markup, you would be making an implementation of
menu button,
which does work on mobile with touch.

[jeanette-c]

Matt King, Jun 21 2017:

@fsilvain commented: > Possible workaround for aria-expanded with role="menuitem" issue: not being able to see it, > but in one example I saw something similar: > `<a role="button" aria-expanded=...` > Would that work with touchscreens? Not aware of the issue you are describing.

Hey hey Matt, there was a validation problem with this menu example, which was under discussion, so it would be valid. But until that time a workaround had to be found. Sorry, can't log on to github from this system. One very feasible workaround - mentioned in the comments to this issue - was discarded, because it doesn't work (well) with touch displays. I am sorry that I can't be more specific right now. If the W3C HTML5 validator issue with this example gets solved, this would be a moot point anyway. Thanks for your reply. Best wishes, Ffanci ... * Homepage: https://freeshell.de/~silvain * Twitter: http://twitter.com/ffanci_silvain * GitHub: https://github.com/fsilvain

[accdc]

As discussed in the ARIA Caucus meeting earlier today the ARIA group is in agreement that aria-expanded should be supported within menuitem roles, and the discussion currently is whether to pull 1.1 out of CR briefly to address this plus a couple of other things quickly, then to put 1.1 back into CR. Support is a technical detail at this point and in practice for coding aria-expanded is valid on links, buttons, and menuitems, regardless what validators are flagging in this regard.

[jeanette-c]

Hello, I have problems getting the example to work on my new webpage. As far as I can see, I followed the example as closely as possible, including the correct CSS and JavaScript. I wasn't able to get help from other web developers. Can someone here help or suggest a proper forum?
The website is at:
http://juliencoder.de/test
The site itself is written in PHP, if that is of any concern.
Thank you for any hints.

Best wishes, Ffanci

[JaiRai0304]

Does not role="menuitem" on an element supports both aria-haspopup="true" and aria-expanded attributes together ?

I was testing menubar example at w3c website
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

on NVDA( version 2023) + Chrome, surprisingly NVDA not announcing the collapsed state of the menu item in focus mode.
For me it's announcing as " About Submenu 2 of 4" .

what is wrong with the code?

However, Voiceover(Macbook ios) is announcing correctly the collapsed state as " About, Collpased, submenu".

Here is the screenshot of the element along with NVDA speech viewer results.

[JAWS-test]

@JaiRai0304 The same problem occurs with screen reader JAWS. It may be a conscious decision of the screen readers not to output this information because it is not particularly relevant because: To get to the submenu, I press the arrow key and it always takes me to the submenu, whether it is already open or not.