Short answer: The details element shows a summary line that people click, tap or press Enter on to open or close the content below it. It needs no JavaScript. Give several details elements the same name attribute and only one opens at a time, which makes an accordion.
What details and summary do
MDN describes details as a disclosure widget: its information is visible only when the widget is toggled into an open state. The summary element provides the label, and clicking it opens or closes its details.
Without a summary, the browser uses a default label, typically “Details”. MDN adds that the content of the details provides the accessible description for its summary.
Details, a disclosure or an accordion
| Option | What it is | When it fits |
|---|---|---|
| details and summary | A built-in disclosure widget | One or a few sections people open on demand |
| details with a shared name | Grouped details, only one open at a time | An accordion without scripting |
| W3C disclosure pattern | A button with aria-expanded that shows and hides content | Behavior the element doesn’t give |
| W3C accordion pattern | Stacked headings that work as buttons | Sections whose headers must be real headings |
From MDN and the W3C ARIA Authoring Practices Guide, read November 5, 2026.
A shared name connects several details elements so that opening one closes the other, which gives an accordion without scripting.
How it works with the keyboard and screen readers
Pressing Enter on a focused summary opens or closes the content. web.dev warns that Safari doesn’t include the details in the keyboard focus order, so test there too.
The W3C disclosure pattern sets the rules for custom widgets: Enter and Space toggle the content, and the control carries aria-expanded, true when the content shows and false when it’s hidden. Our aria-expanded guide shows where it goes and which keys change it. Our what is ARIA guide explains when a custom control needs ARIA at all.
Styling the marker without breaking the name
A summary is displayed as a list item, so list-style properties can change or remove the triangle, and display set to block removes it too. In WebKit browsers such as Safari, the ::-webkit-details-marker pseudo-element controls it.
If you draw your own sign with CSS content, it can end up in what screen readers say. MDN describes alternative text for generated content: a slash and a string after the content, read by screen readers instead of the sign. An empty string keeps the sign silent.
How to build an accordion with details
- Wrap each section in a details element and put its title in a summary as the first child.
- Keep the summary text short and specific, since it is the name people hear.
- Give the details of one group the same name attribute if only one should be open at a time.
- Add the open attribute to any section that should start open.
- Style or remove the marker with list-style, and hide ::-webkit-details-marker for Safari.
- Give any sign you draw with CSS content empty alternative text.
- Test with Tab, Enter and Space, in Safari as well; the full test is in our keyboard navigation guide.
What we found in our own cookie preferences
On November 5, 2026, we opened our cookie preferences from the footer, in both languages, on a wide screen and a narrow one. They fold each category’s cookie list into a details element, four in all.
The keyboard part worked as it should. The first Tab reached a summary, Enter opened it and Space closed it, and Chrome reported the list as expanded or collapsed each time.
The name needed work. The plus and minus signs our CSS draws were part of it, so a screen reader would hear “plus Cookies and storage” closed and “minus” open. We gave the signs empty alternative text: they still show, and the name stays “Cookies and storage (9)” in both states. In Chrome, Firefox and WebKit the signs look exactly the same as before.
Before you publish
- Every details element starts with a summary.
- Each summary says what the section holds.
- Grouped details that should open one at a time share a name.
- Enter opens and closes each summary.
- Sections meant to start open carry the open attribute.
- Decorative signs drawn with CSS have empty alternative text.
RememberLet the browser do the opening and closing. Your job is a clear summary, nothing decorative in its name and a test in every browser.
Whether a section should fold at all is a content decision; our FAQ page guide explains why we keep our answers open. We look after controls like these in our web design service.
Quick answers about details and summary
What does the details element do?
It creates a disclosure widget: a summary line that people click or tap to show or hide the content below it. Without a summary, the browser shows a default label, typically “Details”, so always write your own.
How do I make an accordion with details?
Give several details elements the same name attribute. MDN explains that only one of the grouped elements can then be open at a time, so opening one closes the other, without any scripting.
Do details and summary work with the keyboard?
Yes, in most browsers: Tab reaches the summary and Enter opens or closes it. Safari is the exception web.dev points out, as it leaves the details out of the keyboard focus order.
How do I remove the triangle from a summary?
Set list-style to none on the summary, or display to block, and in WebKit browsers such as Safari hide the ::-webkit-details-marker pseudo-element. If you draw your own sign with CSS, give it empty alternative text.
When should I use the W3C accordion pattern instead?
When each header needs to be a real heading or you need behavior the element doesn’t give. The W3C pattern uses buttons inside headings, with aria-expanded set to true or false as each section opens or closes.
Sources
Read on November 5, 2026. MDN Web Docs: HTML details disclosure element, HTML disclosure summary element and content CSS property. W3C Web Accessibility Initiative: Accordion Pattern and Disclosure (Show/Hide) Pattern. web.dev: Details and summary. Our case: our own pages, read in a browser on November 5, 2026.