details/summary inconsistencies
source link: https://www.matuzo.at/blog/2023/details-summary/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
details/summary inconsistencies
posted on April 21., 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
todisplay: none
.::marker
orlist-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>
Show More
Here’s Johnny!
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!
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!
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!
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!
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!
My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK