WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Announcing sub menu levels

for

From: Mohith BP
Date: Nov 3, 2019 8:33AM

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