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