在Mac上使用VoiceOver或在Android上使用Google TalkBack时出现下拉列表问题

Question

我在许多网站上看到过这个问题，例如Facebook Registration 生日下拉列表甚至WebAim Accessible Forms。问题如下：

通过使用屏幕阅读器，我专注于下拉列表并选择一个元素。在那之后，我尝试离开下拉元素并将焦点移动到下一个元素上（通过VoiceOver中的ctrl + alt +右箭头或在Android上向右滑动）。当我这样做，而不是焦点移动到下一个元素，屏幕阅读器宣布下拉列表中的下一个元素（虽然我选择了它，列表现在关闭）而不是下拉列表后的下一个元素。这导致我被卡在那里而无法继续。

• 我在控制屏幕阅读器的时候做错了什么？
• 为了解决这个问题，我提到的网站代码是否有可能发生变化？

Answer 1

我不确定我会效仿。我在iPhone上使用VoiceOver和在Firefox中使用NVDA尝试了WebAIM示例。

在iPhone上，<select>/<option>列表会在单独的＆＃39;对话框中显示下拉内容。在显示屏的底部看东西。你必须导航到完成的＆＃39;按钮关闭对话框。之后，向左/向右滑动将转到页面上的下一个内容。

在Firefox上使用NVDA，我可以使用向上/向下箭头键来更改值，或者我可以使用alt +向下箭头展开列表，然后向上/向下箭头选择我的选择并按Enter键或Tab键清单。

Answer 2

在与Google Chrome一起测试MacOS Voiceover时，我也遇到了这个问题。选择菜单成为我无法逃脱的“陷阱”。但是，将Voiceover与Safari结合使用并非如此。我现在确信，如果我想从Voiceover获得合理的行为，则应仅将其与Safari一起使用。

Answer 3

你可以试试：

• 隐藏时为 -1 的 tab-index

• 或当列表不在视图中时为 aria-hidden=true。