E-mail List Archives
Thread: Announcing sub menu levels
Number of posts in this thread: 15 (In chronological order)
From: JP Jamous
Date: Tue, Oct 29 2019 7:27AM
Subject: Announcing sub menu levels
No previous message | Next message →
Hi folks,
I am trying to find a good ARIA article that explains how to implement sub
menus with levels. For example, I have a Menu button that expands under it
there can be a sub menu button and inside that sub menu button there would
be links. I want screen readers to announce:
"File Menu"
"new Sub Menu Level 1"
"Text File Menu Item"
"Folder Menu Item"
"Send to sub menu Level 1"
"7Zip sub menu Level 2"
"Extract file Menu Item"
"Extract Here Menu Item"
"Desktop Menu Item Level 1"
"mail Sub menu"
I cannot find an article that would allow me to include the sub menu level.
Any help would be greatly appreciated.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
<mailto: = EMAIL ADDRESS REMOVED = > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
My LinkedIn Network
--------------------
From: Xavi Blanch
Date: Tue, Oct 29 2019 7:38AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Hi,
See this example.
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-
1.html#
I have implemented it and is a good example.
Xavi Blanch
-----Mensaje original-----
De: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] En nombre de
JP Jamous
Enviado el: martes, 29 de octubre de 2019 14:28
Para: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Asunto: [WebAIM] Announcing sub menu levels
Hi folks,
I am trying to find a good ARIA article that explains how to implement sub
menus with levels. For example, I have a Menu button that expands under it
there can be a sub menu button and inside that sub menu button there would
be links. I want screen readers to announce:
"File Menu"
"new Sub Menu Level 1"
"Text File Menu Item"
"Folder Menu Item"
"Send to sub menu Level 1"
"7Zip sub menu Level 2"
"Extract file Menu Item"
"Extract Here Menu Item"
"Desktop Menu Item Level 1"
"mail Sub menu"
I cannot find an article that would allow me to include the sub menu level.
Any help would be greatly appreciated.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
<mailto: = EMAIL ADDRESS REMOVED = > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
My LinkedIn Network
--------------------
http://webaim.org/discussion/archives
From: JP Jamous
Date: Tue, Oct 29 2019 8:34AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Close but not really. I keep digging up menus like that that do not announce
their levels.
The dynamic menu that I am facing expands as the user adds more items to it.
They can create a sub menu 3 levels deep. It is important to have screen
readers announce that to keep SR users oriented.
I am thinking of using role="menuitem" and aria-label="Level 1" on each
container.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: joe
Date: Tue, Oct 29 2019 8:40AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Adding that exact aria-label would not be recommended as it wouldn't
announced the visible text for the menuitem since you are overriding it.
You could add an aria-label to the element with role=menu, but I'm not sure
if that will announce what you want so you would need to code it up and test
with multiple AT/browsers.
Joe Humbert
Accessibility Champion
From: joe
Date: Tue, Oct 29 2019 8:44AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Correction: if updating the aria-label to role=menu, you would want to add
the text "Level [#]" at the end of any value currently in the aria-label for
the menu
From: Sandy Feldman
Date: Tue, Oct 29 2019 11:25AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Would it make sense to add some visually hidden text with that
announcement to either one of these?
Sandy
On 2019-10-29 10:34 a.m., JP Jamous wrote:
> Close but not really. I keep digging up menus like that that do not announce
> their levels.
>
> The dynamic menu that I am facing expands as the user adds more items to it.
> They can create a sub menu 3 levels deep. It is important to have screen
> readers announce that to keep SR users oriented.
>
> I am thinking of using role="menuitem" and aria-label="Level 1" on each
> container.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
>
From: mhysnm1964
Date: Fri, Nov 01 2019 7:41PM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Would the aria-label be the correct tag why not aria-description?
From: Birkir R. Gunnarsson
Date: Fri, Nov 01 2019 9:07PM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
I find this whole setup kind of weird. Why does the user care how many
levels deep he/she is, as opposed to what menu are they in?
If you have submenus of appetizers and desserts, second level menus of
meat, seafood and cheese for the appetizers and then individual
appetizers, wouldn't it be more useful to know that the moldy medley
is a submenu of cheeses, as opposed to the third level menu?
You could strip away all the ARIA semantics and just use list markup
with aria-level to indicate nesting (though if you do the nesting
properly you should get the proper level announcements), you can add
aria-label or aria-labelledby to <ul> elements, they are announced by
most screen readers.
You can go super aria and use aria-labelledby with the mneu roles and
aria-label to refer to self, e.g.
...
<li role="menuitem" id="l2m">Meat</li>
<ul role="menu" aria-label="level 3" id="l3" aria-labelledby="l2m l3">
but does the user really care how many levels deep he/she is?
On 11/1/19, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> Would the aria-label be the correct tag why not aria-description?
>
>
From: mhysnm1964
Date: Fri, Nov 01 2019 9:25PM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Valid point. Thinking about it, what you outline helps people who also have
a cognitive disability and relies on screen readers. As a level doesn't
portray meaning or relationship.
From: Mallory
Date: Sat, Nov 02 2019 9:14AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
On Sat, Nov 2, 2019, at 4:07 AM, Birkir R. Gunnarsson wrote:
> I find this whole setup kind of weird. Why does the user care how many
> levels deep he/she is, as opposed to what menu are they in?
> If you have submenus of appetizers and desserts, second level menus of
> meat, seafood and cheese for the appetizers and then individual
> appetizers, wouldn't it be more useful to know that the moldy medley
> is a submenu of cheeses, as opposed to the third level menu?
I care what level I'm at when I searching for things, because I need to keep track of where I am while I'm exploring an unknown menu. Lots of awful awful dashboard menus don't have contextual relations like your food example does (esp when there's lots of three-letter-acronyms).
I would probably wait until a user of a specific menu requested it before adding in a buttload of aria-foo text though. It gets verbose quickly.
cheers,
_mallory
From: JP Jamous
Date: Sat, Nov 02 2019 12:33PM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
Birkir,
I like your approach with aria-labelledby. It helps the SR user remain
oriented.
The reason why this is required is because SR users are complaining that
they are getting lost, as the nesting goes 2 or 3 levels deep. Also, the
navigation menus are built dynamically. For example, you select certain
links that display as check boxes. Once pressing the Save button, the code
behind organizes them according to business requirements. For example,
1. You check Chicken, cow and lion.
2. The business requirement is to organize those according to the types of
food those animals eat and other categories.
3. It creates a main menu called "Animals" and inside of it 2 sub menus
called "Domestic" and "Wild"
4. It then creates "herbivores" under "Domestic" and adds Chicken and Cow
underneath it as links that point to articles.
5. It then puts lion as a link that points to an article under "Wild" and
creates a submenu for it called "Carnivores'"
There are many business requirements for categorizing links that point to
articles. Those depend on the content selected. Users also have the ability
to delete those articles once they are done studying about them.
This menu structure works great for most users, but disorients SR users,
that have filed complaints in the past. So we wanted to keep them as
oriented as possible like other users.
I think providing the aria-labelledby to read the parent menu of the current
submenu is great. I did not even think of that one. We decided to go with
role="navigation" or use a <nav> to house the <ul> inside of it. This allows
screen readers to announce the start and end of the menu label.
The only thing I am not aware of is the use of aria-level. I thought it is
only implemented with treeviews and not dropdown menus. Do you know how it
can be coded to provide levels for sub menus?
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: Mohith BP
Date: Sun, Nov 03 2019 8:33AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
HI JP,
I agree being a screen reader user it is very important to know the
level when it is more than 2 level deep.
Have you tried aria-level?
I have tried it almost 3 to 4 years ago when the support with screen
reader was poor.
Thanks & Regards,
Mohith B. P.
On 11/3/19, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Birkir,
>
> I like your approach with aria-labelledby. It helps the SR user remain
> oriented.
>
> The reason why this is required is because SR users are complaining that
> they are getting lost, as the nesting goes 2 or 3 levels deep. Also, the
> navigation menus are built dynamically. For example, you select certain
> links that display as check boxes. Once pressing the Save button, the code
> behind organizes them according to business requirements. For example,
>
> 1. You check Chicken, cow and lion.
> 2. The business requirement is to organize those according to the types of
> food those animals eat and other categories.
> 3. It creates a main menu called "Animals" and inside of it 2 sub menus
> called "Domestic" and "Wild"
> 4. It then creates "herbivores" under "Domestic" and adds Chicken and Cow
> underneath it as links that point to articles.
> 5. It then puts lion as a link that points to an article under "Wild" and
> creates a submenu for it called "Carnivores'"
>
> There are many business requirements for categorizing links that point to
> articles. Those depend on the content selected. Users also have the ability
> to delete those articles once they are done studying about them.
>
> This menu structure works great for most users, but disorients SR users,
> that have filed complaints in the past. So we wanted to keep them as
> oriented as possible like other users.
>
> I think providing the aria-labelledby to read the parent menu of the
> current
> submenu is great. I did not even think of that one. We decided to go with
> role="navigation" or use a <nav> to house the <ul> inside of it. This
> allows
> screen readers to announce the start and end of the menu label.
>
> The only thing I am not aware of is the use of aria-level. I thought it is
> only implemented with treeviews and not dropdown menus. Do you know how it
> can be coded to provide levels for sub menus?
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
>
From: madl
Date: Sun, Nov 03 2019 8:57AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
I am sorry for simple question. I am very new using NVDA.
The NVDA key plus q 9 out of 10 doesn't work to quit NVDA. Is there any
other way to get out of NVDA without restart?
Thanks for any help.
Moe
From: Tim Harshbarger
Date: Mon, Nov 04 2019 6:57AM
Subject: Re: Announcing sub menu levels
← Previous message | Next message →
This is one of those many situations where I think observing screen reader
users experiencing the issue would provide insightful details for resolving
the issues--the type of details you don't get from having the user describe
the problem and solution or just reading a summary of the problem. IF you
are looking to create an optimal accessible solution those are the types of
details you need to create such a solution.
Here are a couple of thoughts on the discussion for whatever they might be
worth.
In native mobile apps (such as on Windows and Mac), menus do not provide
level information and they seem to work for screen reader users. On the
web, we (experts) seem to think the nesting level is essential for menus to
be accessible. Why is that? What seems to make nesting levels essential
for menus on the web? I am not insinuating that one is right and the other
is wrong. However, it is notable that minimal requirements and perceptions
of what confuses users differ between platforms.
My other thought is on the type of information conveyed by the aproaches.
When a user hears that an item is nesting level 3, they know that this menu
item has a parent and grandparent. IN Birkir's approach, the user knows
that the current menu "Cow" has a parent named "Herbivore" and a grandparent
named "Domesticated". Depending on the nature of the confusion one or both
approaches might help the user.
Thanks,
Tim
Tim Harshbarger
Senior Accessibility Consultant
Deque Systems
From: Tim Harshbarger
Date: Mon, Nov 04 2019 11:20AM
Subject: Re: Announcing sub menu levels
← Previous message | No next message
Another way you can try to quit NVDA is by:
Press the Windows Logo Key + B (it will move you to the system tray.)
Use letter navigation or arrow keys to navigate to NVDA.
Use either shift+F10 or the context menu button on the keyboard to bring up
the context menu for NVDA.
Select Exit.
This only works if you have NVDA set up to appear in the system tray.
Thanks,
Tim
Tim Harshbarger
Senior Accessibility Consultant
Deque Systems