如何让屏幕阅读器在滚动后开始阅读网页内容

Question

我正在制作一个可访问的网络应用程序。其中一项功能是允许用户滚动到页面的特定部分的按钮。我使用 window.scrollTo(x,y) 来实现此功能。

现在使用内置的 Mac VoicerOver 测试我的应用程序，我发现虽然我可以毫无问题地单击按钮并滚动，但滚动后，VoiceOver 不会读取任何内容。相反，我必须单击鼠标，或使用等效键盘使其在滚动后读取屏幕上的内容。

恐怕有些用户可能没有意识到在点击按钮后需要再次点击。我有两种可能的解决方案：

1. 当屏幕阅读器读取按钮时，它还会告诉用户，如果他们想要进入实时聊天，则需要在单击按钮后再次单击。我知道如何实现这个，但它看起来冗长且愚蠢。

2. 更改我的代码，以便 VoiceOver 在滚动后读取内容。我不知道如何实现这一点。

我希望屏幕阅读器阅读的内容包含在标签中。

Answer 1

如果您仅滚动页面，则大多数屏幕阅读器用户不会关心您是否滚动。在视力有限或无视力的情况下，屏幕是否滚动并不重要，因为看不到屏幕。

但是，如果您滚动页面以便将某个元素放入视图中，那么这也将使屏幕阅读器用户受益。

听起来你正在尝试做后者：

允许用户滚动到页面的特定部分

在这种情况下，您还需要通过focus()javascript 调用将键盘焦点放在该元素上。移动焦点将导致 VoiceOver 读取该内容。但要将焦点移动到本机不可聚焦的元素（例如 an<h2>或 a<section>或<p>），接收元素将需要tabindex="-1"。

<h2 tabindex="-1" id="myh2">some heading</h2>

然后你会在某个地方有这个 javascript：

var element = document.getElementById("myh2");
element.focus();