For accessibility, what is the best/correct aria-label of a submenu. Should there be a general label followed by the purpose of the menu? Or should the aria-label be the same for all submenus?
Example: The image shows an example menu for book settings. When the user focus the menu trigger button. should the aria-label be: "submenu book settings" or just "submenu".
Open for suggestion!
It depends if you are using aria-haspopup="true"
. Having that attribute will already notify the screen reader user that you have a submenu. Different screen readers might announce it differently but the gist of it is that there's a submenu so you don't have to include that in your aria-label
. You can just have aria-label="book settings"
.
Note, however, if you use aria-haspopup
, then you are committing to supporting up/down arrow key navigation through your menu, rather than tabbing through the submenu list. See an example of the menu button pattern.
Alternatively, instead of using aria-haspopup
, you could use aria-expanded
. You can support either tabbing through the submenu or arrowing up/down through the submenu, or both. See the Disclosure Navigation Menu example. With aria-expanded
, the screen reader will hear "collapsed" when they navigate to the 3-dots icon so they'll know they can press enter/space to expand the menu so, again, you don't need to say "submenu" in your aria-label
.