Menu toggle button outside of <nav> element

1

Accessibility question. I have read many places that you shouldn’t put a button which toggles visibility of a site’s navigation menu outside of the <nav> itself, because screen readers will not be able to find it. However, I’m wondering if it’s OK on a site where the <ul> that houses the nav items is never hidden from screen readers in the first place. At most, it’s positioned off-screen with left: -9999px . If screen readers can always access the menu itself, they shouldn’t need to locate the toggle button, right?

Here is a pen of the type of nav I am trying to create https://codepen.io/psteele1128/pen/jObadZR

Thanks in advance for any guidance!

I absolutely hate dealing with accessibility! What an absolute nightmare
2

Yep, that’s fine, because the screen reader doesn’t care about visual layout, it only cares about the order & structure of the HTML. You can also add a role="presentation" attribute to the button to tell the screen reader that’s it’s not for them.

1 Like
3

Thanks so much! Kept searching around and couldn’t find concrete answer

1 Like