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 tutorial here 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!


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.

  • 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 '18 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 '18 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 '18 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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