幻灯片中的按钮不会从画外音调出（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上尝试示例并将我的转子更改为“Form Controls”，则向上或向下滑动会忽略您的按钮。

因此，您可能需要与UX用户合作，为用户提供良好的体验，以便到达您的检查站。当您选择检查点按钮时，它是否应该带您到视频中的那个点？我认为滑块外面有一系列检查点按钮也不会太糟糕。播放，暂停，音量，隐藏式字幕和其他此类按钮位于时间栏之外，因此为检查点设置更多按钮可能不会太糟糕。