Accessibility Differences in Burger Menu Structures.md

Accessibility of Burger Menu Structures

When creating a navigation menu that can be expanded/opened and closed, it is important that the navigation landmark itself, the <nav>, remain visible at all times for those using a screen reader that are looking for that landmark. Alongside this, the button that is used to expand the navigation menu needs to be inside of the navigation landmark for the most accessible experience. When the button is inside the <nav>, the screen reader user can easily find that button when jumping to the navigation landmark.

hidden-nav.html

<!-- A label for both the button and the navigation landmark. -->
<span hidden id="menu-label">Main menu</span>

<!-- A button that "opens" and "closes" the navigation menu when activated. -->
<button class="menu-toggle" id="menu-toggle" aria-labelledby="menu-label" aria-expanded="false">☰</button>

<!-- The navigation landmark, hidden by default, is revealed when it has the "active" class. It is hidden from screenreaders until shown. -->
<nav class="menu" aria-labelledby="menu-label">
	<!-- The navigation list. -->
	<ul>
		<li><a href="/home">Home</a></li>
		<!-- etcetera -->
	</ul>
</nav>

self-contained-nav.html

<!-- The navigation landmark. It is visible to screenreaders at all times. -->
<nav aria-labelledby="menu-label">
	<!-- A label for both the button and the navigation landmark. -->
	<span hidden id="menu-label">Main menu</span>

	<!-- A button that "opens" and "closes" the navigation list when activated. -->
	<button class="menu-toggle" id="menu-toggle" aria-labelledby="menu-label" aria-expanded="false">☰</button>

	<!-- The navigation list, hidden by default, is revealed when it has the "active" class. -->
	<ul class="menu">
		<li><a href="/home">Home</a></li>
		<!-- etcetera -->
	</ul>
</nav>