当焦点从 aria-live 区域 div 获得输入字段时，如何防止屏幕阅读器停止阅读内容？

Question

我有一个聊天机器人界面，其中带有 aria-live 属性的实时区域 div 用于显示新消息。 实时区域更新正确，屏幕阅读器开始阅读内容，但当焦点进入输入字段时，它会在中间停止阅读。 这会导致屏幕阅读器用户感到困惑，并使他们难以理解新消息。

我正在寻找一种解决方案，以确保屏幕阅读器继续阅读新消息直到它们完成，并且在实时区域更新时焦点管理是正确的。 是否有任何解决方案可以确保屏幕阅读器及时宣布实时区域更新并正确管理焦点？

屏幕阅读器： NVDA + Firefox

Answer 1

不幸的是，您既不能确保屏幕阅读器会完整地阅读新消息，也不能确定新的传入消息不会打断旧消息。 无论是因为任何类型的通知，因为焦点改变，还是其他原因。

aria-live 的礼貌级别

顺便记住aria-live=assertive通常意味着总是打断当前正在说的话，所以这样做很少是个好主意。 最好保留aria-live=polite 。

正如我自己的观察所显示的那样，您可以帮助小屏幕阅读器更加稳定，避免许多不必要的中断/跳过/重复，不过，要非常小心您在实时区域中所做的事情。

焦点改变

但是，特别是当焦点改变时，实时区域消息会被中断。 您无法阻止屏幕阅读器在焦点更改时立即通告焦点元素。

原则上，及时获得此信息比来自实时区域的任何消息更为重要。 对选项卡、箭头键和其他重要键的反应对于良好的用户体验至关重要，同时始终准确地知道您在哪里以及您可以/应该做什么。

因此，焦点更改几乎高于一切并且您无法影响它是完全正常的。

避免焦点改变优先于其他一切的最佳方法实际上非常简单：除非有充分的理由，否则不要意外地移动焦点。

在您的聊天机器人示例中，没有理由在新消息到达时移动焦点。 如果当用户按下 enter 键提交问题时焦点位于文本框中，只要用户没有明确将焦点留在该处，焦点就应该保留在那里。

如果焦点停留在文本框中，那么屏幕阅读器用户可以通过 aria-live 自动阅读回复，并可以在准备好后直接输入新消息。 谈话可以 go 快速流利。

避免靠近焦点的 DOM 更改

避免更改文本框周围或附近的 DOM。 DOM 的变化，尤其是在使用像 angular 或 react 这样的框架时，基本上意味着删除它并再次添加它。 在最坏的情况下，焦点可能会完全丢失，充其量它仍然会造成焦点跳出并再次跳入，从而产生不必要的中断。

最好的方法是测试在不触发 DOM 重建的情况下可以更改或不能更改的内容，并因此调整 HTML 结构。

让用户控制阅读消息

不要忘记屏幕阅读器用户已经可以退出文本框并按照自己的方式阅读错过的消息。 屏幕阅读器已经有了向后阅读的快捷方式（NVDA 中的向上箭头）。 这在文本框内不起作用。

尽管如此，允许聚焦单个聊天消息似乎是最佳实践。 如果您可以对这些消息执行一些操作，例如回复、编辑或删除，则尤其如此。

Microsoft Teams 只允许在聊天消息之间进行选项卡导航，但它是一个专用的聊天应用程序。

如果对话嵌入在一个更大的页面中，它应该被视为一个复合小部件，它只有一个焦点停止，但允许通过垂直箭头键聚焦包含的控件：

作者应该确保复合小部件作为 web 页面的较大导航系统中的单个导航站存在。 一旦复合小部件获得焦点，作者应该为用户提供一个单独的导航机制，以导航到作为复合元素的后代或拥有的子元素的元素。

Livechat 似乎使用箭头键在消息之间导航