滑条中的按钮不会从画外音（a11y）中调出

Question

我有一个带有时间栏和标记的视频，以显示时间栏上要访问的点（检查点）。 我希望能够专注于检查点标记并将其发布给VoiceOver，但是无法通过Screenreader到达聚焦的检查点标记（一个按钮），而该按钮确实具有浏览器的焦点。

如果要删除时间栏上的role =“ slider”或role =“ progressbar”，则将重点放在检查点上。 这向我表明，VoiceOver（在Safari中）没有深入研究这些元素。

一种选择是将按钮分隔到时间栏之外的单独div，但这似乎很麻烦。 是否有任何想法让VoiceOver在获得焦点时宣布role =“ slider”或role =“ progressbar” div中的按钮。

注意：这在Chrome浏览器中确实有效，因此这是Safari问题。

这是一个示例： https : //codepen.io/kmcgrady/pen/oVZxLE确保使用Safari并可以访问框架，然后尝试按入按钮。

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow=50>
    <button tabindex="0">Hello</button>
</div>

Answer 1

不幸的是（对您而言），VoiceOver是正确的。 role="slider"的规范说所有子元素都被认为是“ presentational ”，这意味着子DOM元素没有角色。 因此，您的嵌入式按钮失去了“按钮性”，而变成纯文本。 如果Chrome可以正常工作，那就错了。

我在Firefox和Chrome上使用NVDA（在PC上）尝试了您的Codepen示例，它们（正确地）都忽略了您的按钮。 然后，我在您的按钮前后添加了一个按钮，并且正如我期望的那样，找到了那些按钮。 如果我使用NVDA中的B键通过按钮进行导航，则将忽略您的按钮并找到示例按钮。 如果我在iOS上尝试该示例并将转子更改为“表单控件”，则向上或向下滑动将忽略您的按钮。

因此，您可能必须与UX人员一起工作，以为用户提供良好的体验，以帮助您到达检查站。 当您选择一个检查点按钮时，是否应该将您带到视频中的那个点？ 我认为在滑块外部具有一系列检查点按钮不会太糟。 播放，暂停，音量，隐藏式字幕以及其他类似按钮都在时间栏之外，因此，为检查点添加更多按钮可能还不错。