WIP
Edit me

Advised markup

Emmet

details>summary[role="button"][tabindex="0"][aria-controls="content"]{title}+#content[hidden=""]{content text}

HTML

<details>
	<summary role="button" tabindex="0" aria-controls="content">
		Title here
	</summary>
	<div id="content" hidden>
		Content here
	</div>
</details>

Screen reader results

Closed <details>

<details>
  <summary>Test</summary>
  content
</details>
Screen reader voiceover (macOs) 10 (767) ChromeVox 53
Browser Firefox 90 Chrome 62
Spoken output Test, collapsed, summaryTest » content
Skipped falsefalse

Open <details>

<details open><summary>Test</summary>content</details>
Screen reader voiceover (macOs) 10 (767) ChromeVox 53
Browser Firefox 90 Chrome 62
Spoken output Test, expanded, summary » contentTest » content
Skipped falsefalse

<details> with missing <summary>

<details open>content</details>
Screen reader voiceover (macOs) 10 (767) ChromeVox 53
Browser Chrome 91 Safari 14 Firefox 90 Chrome 91
Spoken output Details, disclosure triangle » contentDetails, expanded, summary » contentcontent » Details, expanded, summarycontent
Skipped falsefalsefalsefalse

<details> with fallback ARIA attributes

<div>
  <div role="button" aria-expanded="true" aria-controls="fb-details-content">
    Test
  </div>
  <div id="fb-details-content">
    content
  </div>
</div>

Browser support

Can I Use details? Data on support for the details feature across the major browsers from caniuse.com.

Specifications