他们对于嵌入一个带有计时器的大按钮是否存在可访问性问题？

Question

我正在研究一个项目的要求，我担心嵌入计时器的按钮可能无法访问。我担心的是，将计时器和按钮放在页面上会给使用屏幕阅读器的用户带来混乱的体验。请注意，此时间限制不可延长，因为它代表在其他进程将其票证标记为已放弃之前某人必须“购买”票证的时间。

这里有人有关于这种具体情况的资源或建议吗？我还没有发现任何支持或反对的内容。

此时，我当前的想法是让计时器以合理的时间间隔宣布自己，然后确保它不会被键盘聚焦，这样就不会干扰导航到按钮。

Answer 1

非常有趣的问题！

简短的回答是这应该没问题，因为计时器不是可操作的元素（你不能“单击”它）。

我非常确定，如果将计时器放入按钮内（即按钮的 DOM 子树中），计时器语义将被剥离，因此对计时器值的任何更改本质上都是在操作按钮标签内的文本节点。当您聚焦按钮时，可访问的名称将是“按钮 RSVP 14 59”或类似的名称。

但是，我会仔细考虑你想如何呈现这个计时器值。我认为这是“剩余时间”或“剩余时间”。这些（可以说）是您正在使用的小秒表图标最引人注目的文本替代品，因此您很可能会得到“按钮 RSVP 剩余时间 14 59”。

考虑在某处（屏幕外）创建一个实时区域，然后您可以每 X 秒将计时器值复制到实时区域的文本内容中。这将导致独立于视觉更新的计时器值的定时公告。调整延迟值以适应。还请记住将任何其他状态消息（例如“时间到了！”）复制到同一活动区域。

如果您想保留计时器语义，您可能必须将其移到按钮之外（在 DOM 中，不一定是视觉上的）。然后，您可以将

aria-details

或

aria-describedby

添加到

<button>

，指向计时器元素。

如果采用这种方法，可访问的名称将是“RSVP”，可访问的描述将是计时器值。大多数辅助技术（例如屏幕阅读器）都有一个偏好设置，可以在您在 UI 周围进行选项卡时抑制或包含描述，这意味着某些用户可能无法通过聚焦按钮来“获取”计时器值。

但是，如果计时器仍在 DOM 中，并且实际上并未从可访问性树中隐藏，那么即使您使用 CSS 在按钮“内部”绘制计时器（从视觉上看），它也可能会正常工作。计时器仍然会在那里供屏幕阅读器浏览，很可能是 DOM 中的“下一个”，它只是与似乎包含它的按钮分开。

注意：众所周知，屏幕阅读器宣布的时间值是不可预测的。不幸的是，

datetime

属性本应解决时间值的语义，但似乎对语音合成器实际产生的内容（在撰写本文时）没有任何影响。显然，解决这个问题需要与浏览器和操作系统供应商保持一致。屏幕阅读器用户已经明确表示：他们熟悉这个问题，并且不希望网络内容作者（严重）修复它。

因此，即使时间值似乎以一种奇怪的方式宣布（例如“00:00”被宣布为“午夜”，即使它被标记为持续时间值），请克制任何“黑客攻击”的诱惑“为了语音合成器输出而按语音表示时间值。即使使用相同的屏幕阅读器，不同的语音合成器也会发出不同的发音。始终考虑到还会有其他类型的辅助技术，例如盲文设备，它们不一定能理解“巧妙设计”的话语。