On: Accessible hamburger buttons without JavaScript

[enyo]

That’s why the anchor gets the role=“button”. Unfortunately you can’t set the target of the page with a button (without JavaScript), that’s why an anchor link is used.

[LocalPCGuy → enyo]

You could actually skip the button altogether and just make the checkbox input keyboard focus-able but visually hidden. You also avoid the issues with the hash also, as the user is then directly interacting with the element that toggles the menu. With some massaging (ensuring what is read for screen readers is set and that the visual focus state still appears to be on the hamburger when the checkbox is focused), it works quite well both for screen reader users and for non-mouse users. I don't have a current example (looks like it's been redesigned since I worked on it), but I've done something similar to this in the past on extremely large websites (thousands of views an hour in at least one instance) with much success.

[warp → enyo]

You can do this:

    <a href="#something"><button>menu</button></a>

Or maybe:

    <form action="#something"><button type="submit">menu</button></form>

Not sure either of those options are better than the original post though :)

[exogen → warp]

The latter would probably work, but the first is invalid HTML – you can't nest interactive elements. Will browsers allow it? Yes. But it's still invalid per the spec.

[SebastianKra → enyo]

Some of the most annoying StackOverflow threads are with people urging to use a <button> when I've triple checked that it isn't sufficient for my use-case.