滚动后如何使屏幕阅读器开始阅读网络内容

Question

我正在制作一个可访问的Web应用程序。功能之一是按钮，允许用户滚动到页面的特定部分。我正在使用window.scrollTo（x，y）来实现此功能。

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

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

1. 当屏幕阅读器读取按钮时，它还会告诉用户，如果要转到实时聊天，则需要在单击按钮后再次单击。我知道如何实现这一目标，但看起来冗长而愚蠢。

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

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

Answer 1

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

但是，如果滚动页面以便将某些元素显示在视图中，那么然后也将使屏幕阅读器用户受益。

听起来您正在尝试后者：

  

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

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

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

，然后在某个地方有此javascript：

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