WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing sub menu levels

for

From: JP Jamous
Date: Nov 2, 2019 12:33PM

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
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
Birkir R. Gunnarsson
Sent: Friday, November 1, 2019 10:07 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Announcing sub menu levels

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 REMOVED> < <EMAIL REMOVED> > wrote:
> Would the aria-label be the correct tag why not aria-description?
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> <EMAIL REMOVED>
> Sent: Wednesday, 30 October 2019 1:44 AM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Announcing sub menu levels
>
> 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
>
> -----Original Message-----
> From: <EMAIL REMOVED> < <EMAIL REMOVED> >
> Sent: Tuesday, October 29, 2019 10:41 AM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: RE: [WebAIM] Announcing sub menu levels
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> JP Jamous
> Sent: Tuesday, October 29, 2019 10:34 AM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Announcing sub menu levels
>
> 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
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Xavi Blanch
> Sent: Tuesday, October 29, 2019 8:38 AM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Announcing sub menu levels
>
> Hi,
> See this example.
> https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/me
> nubar-
> 1.html#
>
> I have implemented it and is a good example.
>
> Xavi Blanch
>
>
>
> -----Mensaje original-----
> De: WebAIM-Forum [mailto: <EMAIL REMOVED> ] En
> nombre de JP Jamous Enviado el: martes, 29 de octubre de 2019 14:28
> Para: 'WebAIM Discussion List' < <EMAIL 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 REMOVED> > E-Mail Me | <http://linkedin.com/in/JPJamous>;
> Join My LinkedIn Network
>
> --------------------
>
>
>
>
>
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives