We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
The native element works as expected in VoiceOver on iOS 18 and iOS 17.5. It doesn't work at all in older iOS 15.8. (Only the text, but no role or state gets announced.) But it used to work better (although not perfectly) in older iOS version 12.5. (That announces the name and state but not the role.)
The native element doesn't work with Dragon (in Chrome) when saying "click [label of the summary]". It does work with "mouse grid" or "tab tab tab [etc] enter".
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
VoiceOver in Safari has an issue when
display: inline-block
is used on the summary element.
When encountering the element it is correctly saying name, role and state.
But when toggling it open, it only announces the name but not the role and state.
When encountering it after it has been opened, it announces the name and role but not the state.
Side note: Because display: inline-block removes the visual disclosure triangle,
this version adds it back via CSS.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
We fixed this (but only for the most recent VO versions) with setting
display: block and width: fit-content
on the summary element.
This now works the same way as the native element does in the iOS versions we've tested,
so works in latest two versions (18 and 17) but not older versions.
Side note: Because display: block removes the visual disclosure triangle as well,
this version also adds it back via CSS.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
The only thing that makes the details element work properly with Dragon is
a role="button" on the summary element.
Although that creates an issue with VoiceOver in Safari on macOS. (It doesn't announce the state.)
Adding an explicit role on something that doesn't have an implicit role
also means that this will now be announced differently by some screen reader / browser combinations.
It's specifically Narrator, TalkBack and VoiceOver on macOS with Chrome which would usually announce the role of "disclosure triangle".
And VoiceOver on macOS with Safari and Firefox announces its role as "summary".
This change means they all now consistently (for better or for worse) say "button".
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
Also setting aria-expanded accordingly on the summary element fixes the issue for macOS.
Technically, this would now also need an aria-controls (and id on what it controls).
But that is going down the rabbit hole of completely poly-filling it, which we wouldn't want to do,
also for performance reasons and because otherwise we wouldn't need to use the details element at all.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
This is fixed for Dragon and VoiceOver on iOS 18 and 17. And it doesn't create any significant new problems for other assistive technology.