The Details component is not recognised by voice control

[abbott567]

When using Apple Voice Control, the details component cannot be navigated as an interactive element using the 'show numbers' command. It is simply not recognised as interactive.

It's not just the govuk details component, it looks like Voice Control has an issue with all details components unless you give them a specific role.

Playing around, if you give the summary the role of link or the role of button, it then shows up and can be interacted with.

I know there is an ongoing debate whether it should be a link or a button as it looks like one and behaves like another, but it looks like not giving it a role of anything makes it inaccessible for Voice Control users.

[36degrees]

Hi Craig,

Can you confirm exactly which browser(s) and macOS / iOS / iPad OS versions you've tested this with?

Thanks,

Ollie

[abbott567]

I was testing it on a MacBook using the following:

• OS X Catalina: 10.15.7
• Safari: 14.01

@philsherry made me aware that there is a similar issue with VoiceOver: https://github.com/hmrc/accessibility/issues/25 - presumably the two are linked by the way Apple deals with the <details> tag.

[36degrees]

I can generally reproduce this on my mac, but Voice Control generally seems to be behaving oddly (seeing numbers appearing in completely the wrong place, for example). It'd be good to test this in Big Sur as well.

This doesn't seem to be an issue on iOS, where I can interact with the details component using both 'Tap [text from summary element]' and also using 'Show numbers'.

I'd be wary of overriding the native role on the <summary> without a lot of testing as I could see that potentially breaking things in other assistive technologies.

Have you considered raising a bug against Webkit for this? I'd be happy to support you in doing so, if that helps. If you prefer, we can investigate further and write it up on your behalf.

[abbott567]

I've not raised bug against webkit before, so if you already have a process for this I'm happy for you to write up. Alternatively, if you don't have capacity and would like me to raise it I'll have a good go! Whatever you think best. Cheers.

[philsherry]

Check our VoiceOver issue. There's a WebKit bug raised on there which you may want to reference.

[36degrees]

@abbott567 I've raised an issue – see https://bugs.webkit.org/show_bug.cgi?id=220086

[abbott567]

Thanks @36degrees

[adamliptrot-oc]

Using https://design-system.service.gov.uk/patterns/confirm-a-phone-number/resend-first-time/index.html as a test (good example as has multiple elements to show differences in labelling).

Tested in iOS 16.3 Voice Control and works as expected - "show numbers" and "show names" displays labels next to the element. Saying the number or name actions the element.

Tested in MacOS 13.2.1 (Ventura) with Safari 16.3 and still does not work as expected - saying the accessible name does not trigger the element, "show numbers" does not label the element, so the user needs to employ the grid to action it.

[RTrabocco]

I've tested the same pattern as Adam on MacOS 14.2 (Sonoma) with Safari 17.2.

Voice Control still doesn't recognise the <details> element when the "show numbers" command is used. Voice Over also doesn't list the <details> element in the Rotor.

When testing our service, I did find that the <details> element was recognised in Safari by Voice Control when nested within a <fieldset> element.