Hacker News new | past | comments | ask | show | jobs | submit login

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.



Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: