This page contains various tests with the details
and summary
elements. The page was first created in March 2012 and updated in July 2015 and November 2021.
See the test results in the summary at the end of this page.
For HTML pages that test specific combinations of
details
, summary
, tabindex
and aria-describedby
,
see the following list:
- Plain example without WAI-ARIA.
- Plain example without WAI-ARIA (open).
- Using
tabindex
. - Combining
details
with a definition list (dl
). - Combining
details
with a definition list (dl
) andaria-describedby
. - Using
tabindex
andaria-describedby
.
With "open" attribute
Show/Hide Details
How often have you had to write some JavaScript to create an interactive widget that shows and hides some content?
You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice!
HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight
(depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details>
element.
Without "open" attribute
Show/Hide Details
How often have you had to write some JavaScript to create an interactive widget that shows and hides some content?
You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice!
HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight
(depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details>
element.
Without "open" attribute, and tabindex=0 on summary
Tabindex=0 makes the summary keyboard-focusable in Google Chrome 17 (2012), but not keyboard-actionable. In Google Chrome 95.0.4638.69 (November 2021) on Windows 10, the example below works perfectly fine with the keyboard.
Show/Hide Details
How often have you had to write some JavaScript to create an interactive widget that shows and hides some content?
You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice!
HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight
(depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details>
element.
Nested Details
Frequently Asked Questions
Where can I download Debian?
Go to the page Getting Debian and choose one of the options, such as downloading an installation image or a cloud image.
Where can I learn how to administer a Debian server?
Go to the Debian wiki or The Debian Administrator's Handbook.
Browser Support
Tests 21 March 2012
- Google Chrome 17.0.963.79m: supported for pointing devices but no keyboard access.
- Opera 11.61: not supported (
details
always open; no disclosure widget) - Firefox 3.6.27: not supported (
details
always open; no disclosure widget) - SeaMonkey 2.7.2: not supported (
details
always open; no disclosure widget) - Internet Explorer 8.0.6001.18702: not supported (
details
always open; no disclosure widget) - Safari 4.0.4 (Windows XP): not supported (
details
always open; no disclosure widget)
Tests 4 July 2015 (Microsoft Windows 7, 32 bits)
- Google Chrome 43.0.2357.130 m: fully supported, both for pointing devices and keyboard access
(tab to the
summary
element, then press the keyboard to open or close the details). - Opera 30.0 (which uses WebKit as browser engine): same support as in Google Chrome 43.
- Comodo Dragon 43.3.3.185 (a Chromium-based browser): same support as in Google Chrome 43.
- Firefox 38.0.5: not supported (
details
always open; no disclosure widget) only thesummary
element withtabindex=0
is keyboard-focusable. - SeaMonkey 2.33.1: not supported (same as in Firefox)
- Internet Explorer 11.0.9600.17843: not supported (same as in Firefox)
- Opera 12.17 (last version based on Opera's own Presto engine):
not supported (
details
always open; no disclosure widget; it is not clear which key on the keyboard would cycle through thesummary
elements except d, which cycles through at least all block-level elements on the page)
Tests 5 July 2015 (GNU/Linux Fedora 21 with GNOME, 64 bits)
- Google Chrome 43.0.2357.130 (64-bit): fully supported (see results for Chrome on Windows 7, above).
- Firefox 33.1: not supported (see results for Firefox on Windows 7, above).
- Web 3.14.2 (1:3.14.2-4.fc21, based on WebKit): fully supported (same support as in Google Chrome).
- Midori 0.5.10 (0.5.10-1.fc21, based on WebKit): fully supported (same support as in Google Chrome).
- Dillo (3.0.4.1-2.fc21):
not supported (
details
always open; no disclosure widget; Dillo's support for HTML5 seems very incomplete). - Arora 0.11.0-9.fc21 (based on the QtWebKit engine): fully supported (same support as in Google Chrome).
Tests 9 November 2021 (Windows 10)
- Google Chrome 95.0.4638.69: fully supported, both for pointing devices and keyboard access (tab to the
summary
element and press the Return key to toggle the details). - Microsoft Edge 95.0.1020.44: fully supported; see Google Chrome, above.
- Brave 1.31.88 (Chromium 95.0.4638.69): fully supported; see Google Chrome, above.
- Mozilla Firefox 94.0.1: fully supported; see Google Chrome, above.
- SeaMonkey 2.53.9.1: fully supported; see Google Chrome, above.
- Internet Explorer 11: no support: all
details
are open by default; only the version withtabindex=0
receives keyboard focus but none of the example can be toggled using the keyboard or the mouse. - Otter Browser 1.0.0.2: mouse support only; none of the
details
receive keyboard focus, not even the element withtabindex=0
.
With NVDA 2019.3.1:
- Google Chrome 95.0.4638.69 with NVDA: fully supported. NVDA announces a button and adds wether is closed or expanded.
- Microsoft Edge 95.0.1020.44 with NVDA: fully supported; see Chrome and NVDA, above.
- Brave 1.31.88 with NVDA: fully supported; see Chrome and NVDA, above.
- Mozilla Firefox 94.0.1 with NVDA: fully supported; see Chrome and NVDA, above.
- Internet Explorer 11 with NVDA: all content of the page can be read by NVDA. The
summary
element withtabindex=O
is announced as an input field. The othersummary
element are read like normal text. - Otter Browser 1.0.0.2with NVDA: NVDA does not read any content on the page.
Tests 9 November 2021 (OpenSuse Leap 15.2 with KDE)
- Mozilla Firefox 91.2.0esr: fully supported, both for pointing devices and keyboard access (tab to the
summary
element and press the Return key to toggle the details). - SeaMonkey 2.53.8.1: fully supported, see Firefox, above.
- Chromium 95.0.4638.54 (openSUSE Build) stable: fully supported, see Firefox, above.
- Opera 80.0.4170.63: fully supported, see Firefox, above.
- Otter Browser 0.9.97 RC Y: mouse support only; none of the
details
receive keyboard focus, not even the element withtabindex=0
.
Background Reading
- summary element (html), Accessibility Support, accessed on 09.11.2021.
- Can I use …: Support tables for Details & Summary elements.
- Tom Leadbetter: The details and summary elements, Tuesday, 9 August, 2011.
- Jason Kiss: Screen Readers and details/summary, Accessible Culture, March 2012.
- Bugzilla0Mozilla:
Bug 591737 - Support for HTML5's
<details>
and<summary>
. - Mathias Bynens:
Bulletproof HTML5
<details>
fallback using jQuery, 25 April 2010. - Uche Ogbuji: Thinking XML: The XML flavor of HTML5, XMLdeveloperWorks, 8 July 2010.
- Bruce Lawson: HTML 5 + XML = XHTML 5 (2009).
- Chris Coyier: Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion, CSS-Tricks, 28.03.2018.
- Scott O'Hara:
The details and summary elements,
scottohara.me, 03.09.2018, updated on 03.10.2021.
According to this blog post, support is generally good, but on Mac OS VoiceOver does not announce the role, so blind users don't know the details can be expanded. - Summary/Details componenten, WCAG-Audit-Discussions/NL-BE (on GitHub).