Accessible Navigation for Nested nav-items

[mnazzaro]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

I propose adding tabindex, aria-hidden, and aria-expanded attributes to the labels on nested nav-items. I would also like to add event listeners to those same labels such that when they are in focus the user can click enter to expand them.

Use Cases

This would make the nav bar easier to use for visually impaired users. As it stands, they aren't tabbable, and just adding tabindex="0" doesn't make it better because they still need to be clicked on to expand. This is why the event listeners are also necessary.

Screenshots / Mockups

Here's a link to my suggested solution: https://github.com/mnazzaro/mkdocs-material

It still has some problems, though, as described in my comment in discussion 3156: #3156 (reply in thread)

No response

[squidfunk]

Thanks for suggesting – great idea! Improving accessibility is always a top priority for this project. We'll tackle this as soon as Material for MkDocs 9 is out (see #4714). Happy to iterate.

[lee0c]

Thank you @mnazzaro ! I just ran across this in another project and am so glad to see someone else already working on it!

[squidfunk]

Fixed in f8f44f5. Thanks for the PR! However, as mentioned, adding this as inline JavaScript will increase overall page size. Thus, I've inlined the JavaScript and adjusted it a bit. I've not added aria-hidden, as it is implied by aria-expanded, and it should not be removed from the accessibility tree when it is collapsed.

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

[squidfunk]

Released as part of 9.0.3.