While researching for the accessible approach to menu buttons in Vue this week, I couldn't help myself but to open my browser's dev tools on every "menu button" sighting I came across, curious how the respective team or developer implemented it.
The concept of a "menu" of any kind is often found in profile dropdows. Some websites decide to not use a semantic menu at all, "just" showing a div or list on click and releasing its content into the tab order, (dev.to, for example).
And there is GitHub's approach that uses the details and summary element for a menu, making the whole construct work even without JavaScript (in nearly every browser). Here's the birds-eye view of their approach:
<details>
<summary>Click me</summary>
<details-menu role="menu"> <!-- a custom element -->
<li><button type="button" role="menuitem">Agnetha</button></li>
<li><button type="button" role="menuitem">Björn</button></li>
<li><button type="button" role="menuitem">Benny</button></li>
<li><button type="button" role="menuitem">Anni-Frid</button></li>
</details-menu>
<details>
I won't try to explain it any further - because:
- GitHub put their approach on, well, GitHub: the
<details-menu>
custom element - Mu-An Chiou, Web Systems Engineer at GitHub, not only did a presentation about their technique (link to slides), but supplied a details on details document with further links and anecdotes
- Mu-An is approachable on Twitter, offering to chat about her approach
Top comments (0)