--- title: Using summary/details as a menu published: true description: "Menu button/dropdown functionality solved with summary/details" tags: a11y, vue, summary-details, menu canonical_url: https://marcus.io/blog/a11y-app-details-summary --- My original intention for the next article of the [#accessibleapp project](https://accessible-app.com) was to look at "notifying users of changes", especially regarding content reloads that do not trigger a full page reload (that lack of a full page reload in Single Page Apps leads to the necessity to come up with a routing strategy). Putting an item into a shopping cart in an e-commerce context without redirecting to a proper shopping cart page can be such an asynchronous change of content, and could be hard to notice for, e.g., screen reader users. [Leonie Watson writes about this problem](https://tink.uk/accessible-forms-with-aria-live-regions/): > The update is easy to see at a glance, but not at all easy with a screen reader. First you have to discover that something has changed, then you have to find out where it happened. Even once you know this, you still need to move focus back and forth between the summary and the product information, every time you add an item to the basket. And at the same time she points to a solution strategy: Using [aria-live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to announce changes on the site or in the app that happened without proper page reload. So, I thought, the next thing to add to my accessible example app "[Accessibooks](https://vuejs.accessible-app.com)" is shopping cart functionality - it's a fake shopping app after all. While building the feature it turned out that I touch on other accessibility topics, and each one of them is worth their own blog post: - Animations, and how to turn them off via setting within the app, or inside your operating system - Aforementioned use of aria-live regions after shopping cart changes - And how to markup the shopping cart as a menu widget in general The following part of this article will be about the latter. ### Details/Summary When you read [my last #accessibleapp article](https://marcus.io/blog/a11y-app-menu-button) you will notice that I added an update regarding the [WAI ARIA Authoring Practice I based my "vue-menu-button"](https://www.w3.org/TR/wai-aria-practices-1.1/#menu) on. [The situation is not very clear, there are many experiences with and opinions on this subject](https://github.com/w3c/aria-practices/issues/353). Until there is more user data available on this subject I decided to remove the menu/menu-item pattern from the account button and use a more simple solution instead: details and summary ([I wrote a small note on how GitHub is using these elements for their menu structure](https://marcus.io/blog/progressive-enhanced-menus-details-summary) - [although relying on the menu/menuitem pattern](https://twitter.com/muanchiou/status/1093243419948912645)). Especially regarding the fact that I - until now - only added links to that specific menu. So, my next step was to implement `

` and `

` in Vue. Which was very easy, due to the elements on-board toggling behavior. Here is the structure: ```XML

I'm the trigger

Here goes the content that is initially hidden but visible once details has the open attribute

``` What happens on the HTML side of things is: once the summary element is activated (via click, touch, enter, space-bar) the `open` attribute is added to the `details` element as a whole. To achieve a "menu look" I only had to style the content that I intended to use as "menu content" ```CSS [open] .content { position: absolute; background-color: #ffffff; min-width: 320px; padding: 10px 0; border: 1px solid #2368a2; animation: slide-down 0.2s ease; box-shadow: 4px 4px 6px 0 #6665654d; } ``` The `summary`, element, when unstyled, includes a caret. You can remove it via: ```CSS summary { list-style: none; } ``` One last thing I added was a feature which I had built for the menu button: that a click outside my details/summary construct removes the open attribute and, therefore, closes the menu. This was the first "real" part where I had to deal with Vue and JavaScript, and it was as easy as: ```XML ``` I will use this approach both for the account (which will contain links) and the shopping cart button. Thats why I made a component out of the structure, styling and "behavior" I described in this article. You can see the aforementioned buttons in action on [https://vuejs.accessible-app.com](https://vuejs.accessible-app.com). Actually, there is a lot more to see (and to hear). But as I wrote above - I will explain the other features of the shopping cart in separate articles. For now, let's wrap up. Once I find the time, it's likely that I release my light Vue wrapper for details/summary as a discrete component, that also deals with the [browser support](https://caniuse.com/#search=summary) by adding a polyfill. But at this point in the example app's life using details/summary for these menu purposes feels right overall.

summarydetails

Using summary/details as a menu

Join Our Newsletter. No Spam, Only the good stuff.