details/summary inconsistencies

posted on 21.04.2023

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:

• Announcements are very different across different screen readers/browsers. It goes from little information (“show more” in VoiceOver on iOS) to too much information (“Right pointing triangle, Show more, collapsed, summary, group” in Firefox on macOs)
• Removing or changing the triangle doesn’t seem to affect any screen reader/browser pairing except Firefox with all tested screen readers.
• Voice Over macOS Chrome/Edge/Arc, Voice Over macOS Safari, and Talkback Android Chrome provide the most consistent experience.
• Voice Over iOS Safari is also very consistent but in a bad way. It doesn’t announce any role or state.
• Details only expands in Chrome, Arc, Edge when you search with CMD/Ctrl + F (find-in-page).
• To remove the triangle in Safari, you must set ::-webkit-details-marker to display: none.
  ::marker or list-style: none; don't work.

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

• macOS 13.0.1 / Windows 11 / Android 13 / iOS 15.7.5
• Chrome 112
• Firefox 112
• Safari 16.1 (macOS)
• JAWS 2023.2212.13
• NVDA 2023.1

Results

default

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

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

custom marker: list-style-type: square

summary {
  list-style-type: square;
}

custom marker: ::marker

summary::marker {
  content: "🦫"
}

no marker: list-style-type: none;

summary {
  list-style-type: none;
}

no marker: ::marker content:""

summary::marker {
  content: "";
}

Remove triangle in all browsers

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

summary {
  list-style: none;
}