5

I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing.

First, I need a system that is completely accessible as I am trying to reach compliance with the WCAG 2.0 level AA.

Second, as a graphic designer, I want my site to have some degree of animation to the navigation system (think Google's material style of motion).

Third, the navigation must be responsive and collapse for mobile applications.

What I have so far is a basic list-based menu system, featuring four main links, one of which also features a dropdown menu. I am having trouble balancing these three attributes I am seeking, particularly as a result of trying to ensure the navigation is both accessible and responsive.

I have been trying to follow W3C's menu tutorial for the bulk of my system, but the main technical issue with their implementation is that display:none is used, which breaks any animation I try to develop.

The second technical issue is that I have a "checkbox hack" based solution for my responsiveness, and while it is hidden from screen readers and in my testing they are still able to access the menu at smaller sizes, people warn to stay away from this solution. I've read many, many articles on this subject and there just doesn't seem to be a definitive solution to my problems. Is there no perfect menu system? (Rhetorical, I know.)

My implementation thus far can be examined here: https://codepen.io/anon/pen/wXgrqP, the only immediate accessibility issues that I notice is that a screen reader will read items on the drop down menu for "Work" while the menu is not expanded, but because my menu is not that large, I am also wondering if this is actually an issue I should be worried about?

Thank you for listening to my ramblings!

Improve this question
2
  • An alternative to display: none is to toggle aria-hidden when changing expansion state of the menu. Then you can run animations as you like. Beware though, if that animation risks to cause nausea, you also need to respect the user preference setting to have reduced motion.
    – Andy
    Jun 16, 2022 at 6:55
  • 1
    The most accessible and userfriendly solution would be an always expanded menu. People seem to struggle with burgers. So an important detail is your sitemap. Could you share it in the question? If you want a generic solution, the Priority+ Responsive Menu Pattern comes close to that.
    – Andy
    Jun 16, 2022 at 6:58

2 Answers 2

Reset to default
0

Yes, it's an accessibility issue for both screen reader users and keyboard users. For keyboard users, the focus indicator will disappear after they tab off 'work' and the focus will go to the hidden submenu. You have to tab three times before the focus reappears on 'about'.

Also, when I tab to 'work', I should be able to hit Enter to expand the menu (or it should expand when focus moves to 'work').

I see you have aria-expanded on 'work', which is good, but the value of aria-expanded should change from false to true when the menu is expanded.

Improve this answer
3
  • Thank you for your input! I was researching this topic further today and I happened by change to google "accessible animated responsive navigation". This question was the first result, which surprised me. Surely I can't be the only person seeking to balance these features?
    – CGEffex
    Jun 13, 2018 at 1:04
  • Have you tried visibility:hidden instead of display:none? I think you can still have animation effects with visibility, and using visibility will also hide the elements from the keyboard user and screen reader user. Your first and third requirements are easy to meet. Hopefully visibility helps your second requirement.
    – slugolicious
    Nov 10, 2018 at 20:26
  • Also note for your responsive view that the "hamburger" menu will need aria-expanded, but that's getting into implementation details which I can address on stackoverflow if you post there.
    – slugolicious
    Nov 10, 2018 at 20:30
0

I created a navigation system using another approach. Both Siteimprove (accessibility) and Google (mobile friendly) did approve it:

enter image description here

https://static.go4webdev.org/speed

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.