3 ms·
As one user said before, this absolutist way of thinking is tiring. Hamburger menus can absolutely be accessible and I would have liked to read how to do so. He
by zichy 3y ago
As one user said before, this absolutist way of thinking is tiring. Hamburger menus can absolutely be accessible and I would have liked to read how to do so. Here's my take:
* It uses valid HTML and JS. (You could also make it work without JS as a fallback and I love progressive enhancement, but it's not a requirement specifically for accessibility. Actually, JS can contribute a lot towards accessibility.
* The toggle button uses either `title`/`aria-label` or visual text in addition to the ≡ icon.
* The focus states are clearly visible for keyboard navigation.
* The correct ARIA attributes for the interactive elements are used.
* Depending on the menu, think about a focus trap/loop.
Bonus tip: While I prefer using `<button aria-expanded>` since I believe it is more accessible for screen readers, you can also use `<input type="checkbox">` + `<label>`. If you have to do it this way, please do no use `display: none` on the checkbox input – this will make it unusable by keyboard. It should be only hidden visually.