accessible-dropdown | accessible dropdown | Menu library

A few bits to address here.

Not sure which articles these are but that is not true at all. Obviously you have to implement them correctly (which is why many of them aren't accessible) but there is nothing preventing you from using this pattern.

The hamburger icon itself is an accessibility issue, it is much better to have the word "Menu" next to it, perhaps that is what is confusing the issue here.

This is not a complete solution and although the article does state this it is misleading to think her pattern works with CSS only, it is not fully accessible.

To fix her example there are a couple of things you would need to do:

1. Use JavaScript to toggle aria-expanded to true when the drop-down menu is opened. You toggle it back to aria-expanded="false" once the menu closes. This is important information for screen reader users.

2. You also need to stop the drop-down menu opening automatically on focus. A keyboard user is forced to tab through all items in the drop-down menu with the way it is currently implemented. Instead you should attach the open and close of the menu to the Enter key so that users can navigate past the menu item if it is not relevant to them. Luckily this change makes item number 1 easy as you can toggle aria-expanded on Enter.

3. Ability to dismiss the drop-down with the Escape key.

There are probably other issues that need addressing but as you can probably tell, far from accessible and not a good example to learn from I am afraid.

As you have run out of horizontal space you only have a couple of options.

The first is to turn the menu into a or a side navigation menu as we discussed earlier. With regards to an accessible slide out menu this codepen is a good starting point for the general principle, which is taken from this article explaining how to make slide-out menus accessible and why each item is implemented the way it is. I haven't checked it in detail but I couldn't see any immediate flaws / faults and the HTML should be close enough to your existing HTML to allow you to keep the desktop version of your menu (with the fixes stated in the previous section). Alternatively if you only have 4 main menu items (and this is not likely to change) then you could stack the menu items in a 2 by 2 grid. This is easily achieved by adding float: left and width: 50% to you menu in your mobile media query, so that they stack into a 2 by 2 grid. There are other ways to do this but with a brief glance at your site that seems the quickest way to do it.