像 NVDA 这样的屏幕阅读器如何自动读取从 display: none 到 block 的元素？ Aria-live 运行不正常

Question

我有一个复杂的多列表单， NVDA 屏幕阅读器在页面加载后可以很好地阅读，包括 aria-labels、字段、元素顺序等。在这种工作场景中，表单在页面加载时完全可见。

但是，我需要在页面加载时默认隐藏此表单。 仅当用户单击页面上的“显示表单”链接时，此表单才会出现，将表单从“显示：无”设置为“显示：阻止”。

默认情况下，点击“显示表单”后阅读器不会自动阅读表单。

所以我在表单中添加了 aria-live="polite" 。 当我单击“显示表单”链接时，读者将阅读该表单，但阅读效果很差 - 事情变得混乱，aria-labels 被忽略，阅读流程中断等。

所以我的问题是，使用像 NVDA 这样的屏幕阅读器，如何在页面加载后清晰准确地读取从 display: none 到 display: block （基于某些用户交互）的元素？

正如我上面提到的，只有当页面加载时表单可见时，我才能获得完美的阅读。

Answer 1

Aria 现场区域仅在两种情况下被读取：

• 当它们被添加到 DOM 中时
• 当他们的内容改变时

在所有其他情况下，没有正式指定是否必须阅读它们。 它们适用于某些浏览器 + 屏幕阅读器组合，但不适用于其他一些。

无论如何，阅读整个表单部分都不是一个好主意。

如果用户可以很好地期待某些东西出现，那么让它自然可及比宣布它出现的事实要重要得多。 自然可达，我的意思是通过选项卡和浏览器 cursor 命令，如箭头键或从表单元素到表单元素的导航。 特别是，这意味着您应该避免在正文末尾添加新内容，而是将其添加到真正需要的 DOM 中。

正确完成此操作后，您可能会考虑宣布已出现表单部分。 你不应该让整个新部分都被阅读，而是坚持一个简单的一般信息，比如“个人信息部分出现在一般信息下方”。 这种消息必须在 aria live 区域中。 如果从用户的角度来看，该表单部分出乎意料地出现，则此公告可能非常有用。 如果发生的事情是意料之中的，那么该公告相对来说是可选的，前提是您已将其显示在正确的位置。