search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
512 stars 232 forks source link

VoiceOver doesn't announce details element's role and states #4030

Closed selfthinker closed 1 month ago

selfthinker commented 3 months ago

This issue is from the accessibility audit of GOV.UK Frontend components by DAC in July 2024.

DAC's description

For users of screen reading assistive technologies the details component does not convey its state or functionality for users navigating with VoiceOver.

Screenshot of a page using the details component

Screen reader comments:

“A details component was present on the page which expanded and collapsed content when selected in relation to an issue with the e-mail. However, with VoiceOver this item did not announce either as a link or as a button and did not advise me of when content was collapsed or expanded. I was not immediately aware that the item was selectable and would have been unable to identify the component to select when browsing out of context. Ensuring that the item announces as either a link or as a button and clearly advises me of whether content collapses or expands will prevent any difficulty and will ensure that I can access the content. In my opinion it may be better to use an accordion feature rather than this details component as the accordion works with all screen reader software”

DAC's proposed solution

Consider using a button for the default detail component as this will mean it is recognised by and will convey its correct state to all assistive technologies.

Other potential solutions

This is a known issue with VoiceOver. This happens with all native HTML <details> elements, irrespective of implementation.

We don't know yet what the best solution would be, we need to discuss and explore this further first. We might need to change the guidance to refer to the known issues. Another option is to lobby for making Apple fix the bug in VoiceOver.

Related issues

Additional instances

Although the details component is used on multiple pages throughout the website, it is always the same component, so will only need to be fixed once.

Needed roles

Frontend developer, content designer

querkmachine commented 2 months ago

For the sake of clarity, can we check which browsers this was tested in, and also whether it's specific to macOS VoiceOver or is also an issue with iOS VoiceOver?

selfthinker commented 2 months ago

@querkmachine, nearly all of the previous issues specifically mention iOS. But I tested just to double check. I can confirm it is only a problem with VoiceOver on iOS. There is no other real browser on iOS other than Safari. (From what I remember, all the other browsers use Safari's rendering engine.)

owenatgov commented 1 month ago

Closing this via https://github.com/alphagov/govuk-frontend/issues/5310