Progressively enhanced menu buttons with details/summary [updated]

Caution! This article was published over a year ago, and hasn't been updated since. Situation, software and support of the topic below could have changed in the meantime.

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:

Update February 8th, 2019:

I just learned that the ARIA Authoring practice regarding Navigation and Action menus is somehow controversial. GitHub, using the design pattern of the Authoring Practice, via Mu-An Chiou, has signaled that they are aware of this problem, and so is Ryan Florence who built a React Reach UI component according to this authoring practice.

Read Next

Subscribe

If you want to stay in informed about updates on marcus.io and at my other projects, enter your email address below or or subscribe to the RSS feed