scottaohara/a11y_styled_form_controls

Radio buttons, Checkboxes: touch/hover screen readers are impaired by stylization

aminimalanimal opened this issue · 6 comments

aminimalanimal commented

This is really an FYI regarding the documentation of screen reader issues more than anything else. Your implementations are very good.

Regarding the following articles:

My team ran into issues with not revealing the native radio or checkbox to the following users:

  • iOS with VoiceOver, when scanning through the page with your finger and “pointing” at the checkbox
  • NVDA when hovering over the checkbox
  • Android with Talkback/Voice Assistant, when pointing at the visualization of the checkbox

(I've only tested with the latest iOS to confirm that the results haven't changed prior to filing this ticket).

In all of these cases, the screen reader neglects to inform the user that they are hovering over a checkbox/radio button because it is actually hovering over the label, so the user loses the context of knowing whether they're on a form element or just text. On iOS and Android, the user then has to figure out how to place focus on the checkbox/radio by either swiping left or right (depending on DOM element order) or double-tapping to click on the label, which, if properly linked, will place focus on the checkbox/radio.

I suggest adding the caveat that styling radios and checkboxes comes with this issue. I spent a lot of time trying to figure out how to solve for this, and ultimately just had to accept the flaw. (I've since started gravitating toward WAI-ARIA list boxes, but they have plenty of their own issues.)

Some odd notes:

  • I believe we gained a little bit of support (in IE, I think) by trying to ensure that the invisible radio/checkbox itself was the same size as its visualization and was positioned directly atop the visualization
  • I want to say that opacity: 0 will actually cause some screen readers to act like the checkbox or radio button didn't exist at all, and we had to do some unfortunate stuff like opacity: 0.00001 to make it work. I can't recall which reader(s) took the style into account, though
scottaohara commented

Hi @aminimalanimal

Appreciate you taking the time to file the issue, and I will make a point to add some notes to the documentation that outline these issues with screen readers + mouse hover / search by touch behavior.

Regarding the opacity: 0 issue, the last time I ran into that bug was in the ChromeVox browser extension. I thought I heard they fixed it with newer ChromeVox on Chromebooks...but I'll have to confirm that.

  • 👍1
scottaohara commented

Doing some quick retesting with iOS (latest), the following require updates

  • Radio Button Pill
  • Radio Button Star Rating
  • Styled Radio Buttons
  • Styled Checkboxes
  • Switch Component: Radio Buttons
  • Styled file upload (NVDA issue, iOS and Talkback ok)
  • Switch button (external repo, NVDA issue. iOS and TalkBack are ok)

I'll be sure to go through the other components again as well, but this comment serves as a baseline of must fixes.

  • 👍1
aminimalanimal commented

Regarding the opacity: 0 issue, the last time I ran into that bug was in the ChromeVox browser extension.

It definitely existed in another screen reader at some point (we weren't using ChromeVox), but it may very well no longer be an issue. That particular bug was something I delved into 2–3 years ago, and we were mainly running NVDA, VO, and Talkback at that point.

scottaohara commented

Hmm, i'll be sure to run another check for that then. Definitely isn't an issue regarding their discoverability with the virtual cursor or keyboard focus in all the combinations i tested.

scottaohara commented

Starting work on this under the v1.5 release branch.

Radio button pills getting some updated documentation and a bit of a reworking to accommodate for this issue.

scottaohara commented

Additional note for future reference, but testing with NVDA 2018.2 + Firefox and Chrome, the radio button role is not announced even with the new implementation, unless a user changes default NVDA settings to announce role on mouse hover.

Zoomtext + browsers, iOS and TalkBack all announce the radio button role when hovring/exploring by touch with the updated implementation with default settings.