details/summary inconsistencies

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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;
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-04-21T08:46:54+00:00) details/summary inconsistencies. Retrieved from https://www.scien.cx/2023/04/21/details-summary-inconsistencies/

MLA

" » details/summary inconsistencies." Manuel Matuzović | Sciencx - Friday April 21, 2023, https://www.scien.cx/2023/04/21/details-summary-inconsistencies/

HARVARD

Manuel Matuzović | Sciencx Friday April 21, 2023 » details/summary inconsistencies., viewed ,<https://www.scien.cx/2023/04/21/details-summary-inconsistencies/>

VANCOUVER

Manuel Matuzović | Sciencx - » details/summary inconsistencies. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/21/details-summary-inconsistencies/

CHICAGO

" » details/summary inconsistencies." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/04/21/details-summary-inconsistencies/

IEEE

" » details/summary inconsistencies." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/04/21/details-summary-inconsistencies/. [Accessed: ]

rf:citation

» details/summary inconsistencies | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/04/21/details-summary-inconsistencies/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.