Sidebar
An overlay that often expands from the left or right side of the page. Also called Offcanvas, Drawer, Slide-Out or Hamburger Menu. It has many similarities to a modal.
About this Pattern
This is just one example an can be modified to fit specific needs. Accessibility Features include:
- aria-controls is set on the button, with the value of the id that it controls.
- aria-expanded is also set on the button. The value must be dynamically changed to reflect the state of the Sidebar.
- aria-modal is optional depending on if the content outside the Sidebar should be clickable. In this case the outside content is not clickable.
- role="dialog" gives accessible technology a hint that this content is separated from the rest of the page and that it includes focusable elements.
- aria-label is set on the closing button, since it only has a icon inside.
- tabindex="-1" is set on the Sidebar, since itself should not be focusable.
- aria-labelledby is set on the Sidebar, since it always should contain a accessible name.
- When the dialog appears on the screen, keyboard focus should be moved to the default focusable control inside the dialog.
- After the dialog is dismissed, keyboard focus should be moved back to where it was before it moved into the dialog or the the beginning of the page.
- For most dialogs, the expected behavior is that the dialog‘s tab order wraps, which means that when the user tabs through the focusable elements in the dialog, the first focusable element will be focused after the last one has been reached. In other words, the tab order should be contained within and by the dialog.
- The navigation panel should be closable by clicking on the close button, clicking on the overlay, or by using the ESC key on the keyboard.
- Make sure the Sidebar is properly hidden, so that the focusable elements inside it are excluded from the tabbing index.
- This example is written as the main navigation. This is optional.
Example
<nav aria-label="Main">
<!-- Sidebar Control -->
<button aria-controls="offcanvas-example" aria-expanded="true">
Open Sidebar
</button>
<!-- Sidebar -->
<div
tabindex="-1"
id="offcanvas-example"
aria-labelledby="sidebar-example-label"
aria-modal="true"
role="dialog">
<div>
<h2 id="sidebar-example-label">Offcanvas</h2>
<button type="button" aria-label="Close">×</button>
</div>
<div>
<ul>
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
</ul>
</div>
</div>
</nav>