search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.13k stars 320 forks source link

Radio Button numbering is misleading for MacOS VoiceOver when conditionally revealing content is revealed #2346

Open rhysbarrett opened 2 years ago

rhysbarrett commented 2 years ago

Description of the issue

When navigating a Radio component with MacOS VoiceOver, the voiceover includes which number in the sequence the currently selected radio button is. For example, when the first radio in a group of four is highlighted, the voiceover will include "1 of 4". For example (taken from the Design System):

VoiceOver working correctly

However, when conditionally revealled content is involved and triggered, the voiceover becomes misleading - both the total number of radios and the index of the currently selected radio are incremented by one, as if there's a hidden radio button appearing in the group before the one being selected. This is better illustrated by example:

Screenshot 2021-09-10 at 16 29 45

This is potentially misleading for users who rely on assistive technologies for visual impairments.

I'm aware this is more than likely an issue with VoiceOver rather than this repository, but considering it's a mainstream tool affecting sites on a dominant web browser, I figured it's best to at least raise it to the maintainers' attention.

Steps to reproduce the issue

  1. Visit the conditionally revealling content radio button example on the GDS Design System using Google Chrome.
  2. Open up MacOS's built-in Screen Reader (System Preferences -> Accessibility -> VoiceOver -> Enable Voiceover)
  3. Navigate around the radio buttons in the example using either the keyboard or the mouse.
  4. Observe the issue via the audio read-out and the voiceover text panel.

Actual vs expected behaviour

Expected: VoiceOver accurately describes the selected radio button's position within the radio group, and accurately describes the total number of radio buttons within the group.

Actual: VoiceOver erroneously increments both of the following by 1:

Environment (where applicable)

lfdebrux commented 2 years ago

Hi @rhysbarrett, thanks for the bug report.

I was able to reproduce the bug with Chrome on macOS, however I wasn't able to reproduce it with Safari.

In general VoiceOver does not work very well with Chrome, so we don't recommend testing with that browser/screenreader combination. It's also not a very widely used combination, according to the latest WebAIM survey.

That said, we will try and get this issue reported upstream to the Chromium team, and maybe they will fix it!

querkmachine commented 1 year ago

It looks like this never got reported to the Chromium team in the end, so I went ahead and opened a bug report. https://bugs.chromium.org/p/chromium/issues/detail?id=1428008

I've additionally managed to reproduce this on the latest versions of Chrome (111), Edge (111) and Opera (97), whilst confirming it's not a problem in Firefox (111) or Safari (16.3), on macOS 13.2.