滑块内的按钮不会从画外音 (a11y) 中调出

Posted 2023-02-19

【中文标题】滑块内的按钮不会从画外音 (a11y) 中调出

【英文标题】：Buttons within a slider are not called out from Voiceover (a11y)

【发布时间】：2019-07-29 01:18:29

【问题描述】：

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

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

一种选择是将按钮分隔到时间栏之外的单独 div 中，但这看起来很混乱。有什么想法可以让 VoiceOver 在角色="slider" 或 role="progressbar" div 中的按钮获得焦点时宣布它们。

注意：这在 Chrome 中确实有效，所以这是 Safari 的问题。

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

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

【参考方案1】：

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

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

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