Blind and Visually Impaired Community
↑
2
↓
Question about using VoiceOver with listboxes (or dropdown menus, or select HTML elements) (self.Blind)
submitted by Ten086
Hi all, I'm a sighted developer trying to make a dropdown menu accessible. I noticed that when using $1 with VoiceOver in Safari (it's right after the "Choose a pet" on the page), I'm unable to use the VO left and VO right keys to navigate to the options. I can only use the up and down arrow keys, which I haven't seen used in any other way with VoiceOver. The VoiceOver hints also didn't say anything about how to navigate to the options. Are the up and down arrow keys the expected controls to interact with listboxes/dropdown menus/select elements with VoiceOver, or is this just using the built-in keyboard navigation controls? Is there a VoiceOver specific way to navigate to the options in a dropdown menu? I'd really appreciate any advice on this, thank you very much!
retrolental_morose 2 points 1y ago
select elements are navigated with up and down in the same way every other listbox is navigated up and down. It's typical and expected behaviour.
Ten086 [OP] 1 points 1y ago
Thank you! Is using up and down just a control that's generally known by VoiceOver users? I was looking in the $1 but didn't find anything about interacting with listboxes so I just assumed it would be VO left and right. I've also seen some other examples like the $1 and the $1 where VO left and VO right do navigate through the options, so I was confused whether those should be supported. The deque pattern also reads "selected" for each option when using up and down even when it does not automatically change the selected option that is displayed visually, so I was even more confused.
retrolental_morose 2 points 1y ago
Just to add, both your Deque select and collapsible are *only* navigable via up/down keyboard on Windows with NVDA and JAWS. The VO+left/right way of doing things is pretty nonstandard for everyone other than a VO user (Windows is used by 90% of the BVI market according to the latest WebAIM survey).
Confusingly, NVDA uses the terminology "submenu" - which a long-term speech user might interpret to be "openable" with a right arrow press.
Confusingly, NVDA uses the terminology "submenu" - which a long-term speech user might interpret to be "openable" with a right arrow press.
Ten086 [OP] 2 points 1y ago
That's also good to know, thank you! I've tested a bit with NVDA and JAWS as well and am grateful that they just use regular keyboard navigation controls for dropdowns and seem to work fine. My main device is a Mac, which is why I've been mainly testing with VO 😬 Do you have a link for that WebAIM survey btw?
retrolental_morose 2 points 1y ago
sure thing.
https://webaim.org/projects/screenreadersurvey9/
https://webaim.org/projects/screenreadersurvey9/
retrolental_morose 2 points 1y ago
I'm a Windows user but it's been a Windows and web standard for lists for years. it's not a VoiceOver shortcut specifically, it's just part of the operating system
Ten086 [OP] 1 points 1y ago
oh gotcha, thanks--I know that the arrow keys are standard keyboard navigation controls for a listbox, but I was wondering for VO specifically because from what I've learned at least, VO isn't like NVDA/JAWS where it'll just pass keypresses to the browser/OS and use keyboard navigation controls on form elements.
retrolental_morose 1 points 1y ago
if it can't, it's a VO problem more than anything else. I guess you might need to turn quick nav off to interact with the control appropriately in that instance. I'm not a VO fan as you can probably gather by now 😀
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.