details/summary inconsistencies

posted on

Scott O'Hara wrote a fantastic blog post about the details and summary elements last year. He explains that there are a lot of oddities and inconsistencies, and he backs his statements with detailed testing.

To better understand the extent of these oddities and inconsistencies, I did my own testing (not as detailed as Scott's), and here's what I found:

What should you do with this information?

I don't know, probably test with users?! I'll just quote Scott here:

If your goal is to create an absolutely consistent disclosure widget behavior across browsers, i.e., ensuring that all <summary>s are exposed as expand/collapse buttons, then you’d be better off creating your own using JavaScript and the necessary ARIA attributes. You’d lose out on the find-in-page functionality that the native disclosure widget provides… but depending on the type of disclosure widget you’re creating, you may actually want that.

OS/browsers/software

Results

default

<details>
  <summary>Show More</summary>

  <p>Here’s Johnny!</p>
</details>
Show More

Here’s Johnny!

Screen reader testing with default element
Voice Over macOS Chrome/Edge/arc Voice Over macOS Firefox Voice Over macOS Safari Voice Over iOS Safari Talkback Android Chrome NVDA Firefox JAWS Chrome
Announcement on focus Show More, collapsed, disclosure triangle, group Right pointing triangle, Show more, collapsed, summary, group
or
Show more, collapsed, summary, group
Show More, collapsed, summary, group Show More Collapsed, show more, disclosure triangle Filled right pointing small triangle, show more, button, collapsed Show more, button, collapsed
Announcement on toggle Show More, expanded, disclosure triangle, group Show More Show More, expanded, summary, group Show More expanded expanded, filled down pointing small triangle, show more expanded

custom marker: list-style-type: square

summary {
  list-style-type: square;
}
Show More

Here’s Johnny!

Screen reader testing with custom marker
Voice Over macOS Chrome/Edge/arc Voice Over macOS Firefox Voice Over macOS Safari Voice Over iOS Safari Talkback Android Chrome NVDA Firefox JAWS Chrome
Announcement on focus Show More, collapsed, disclosure triangle, group Black small square, Show more, collapsed, summary, group
or
Show more, collapsed, summary, group
Show More, collapsed, summary, group Show More Collapsed, show more, disclosure triangle Show more, button, collapsed Show more, button, collapsed
Announcement on toggle Show More, expanded, disclosure triangle, group / Show More, expanded, summary, group Show More expanded expanded expanded

custom marker: ::marker

summary::marker {
  content: "🦫"
}
Show More

Here’s Johnny!

Screen reader testing with custom marker
Voice Over macOS Chrome/Edge/arc Voice Over macOS Firefox Voice Over macOS Safari Voice Over iOS Safari Talkback Android Chrome NVDA Firefox JAWS Chrome
Announcement on focus Show More, collapsed, disclosure triangle, group Beaver, Show more, collapsed, summary, group
or
Show more, collapsed, summary, group
Show More, collapsed, summary, group Show More Collapsed, show more, disclosure triangle Beaver, Show more, button, collapsed Show more, button, collapsed
Announcement on toggle Show More, expanded, disclosure triangle, group Beaver, Show More Show More, expanded, summary, group Show More expanded expanded expanded

no marker: list-style-type: none;

summary {
  list-style-type: none;
}
Show More

Here’s Johnny!

Screen reader testing with no marker
Voice Over macOS Chrome/Edge/arc Voice Over macOS Firefox Voice Over macOS Safari Voice Over iOS Safari Talkback Android Chrome NVDA Firefox JAWS Chrome
Announcement on focus Show More, collapsed, disclosure triangle, group Show more, collapsed, summary, group Show More, collapsed, summary, group Show More Collapsed, show more, disclosure triangle Show more, button, collapsed Show more, button, collapsed
Announcement on toggle Show More, expanded, disclosure triangle, group / Show More, expanded, summary, group Show More expanded expanded expanded

no marker: ::marker content:""

summary::marker {
  content: "";
}
Show More

Here’s Johnny!

Screen reader testing with no marker
Voice Over macOS Chrome/Edge/arc Voice Over macOS Firefox Voice Over macOS Safari Voice Over iOS Safari Talkback Android Chrome NVDA Firefox JAWS Chrome
Announcement on focus Show More, collapsed, disclosure triangle, group Show more, collapsed, summary, group Show More, collapsed, summary, group Show More Collapsed, show more, disclosure triangle Show more, button, collapsed Show more, button, collapsed
Announcement on toggle Show More, expanded, disclosure triangle, group / Show More, expanded, summary, group Show More expanded expanded expanded

Remove triangle in all browsers

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
}
Show More

Here’s Johnny!