有没有办法通知屏幕 reader 转换到同一页面上的新部分？
Is there a way to inform the screen reader about a transition to a new section on the same page?
我有一个页面有 2 个步骤来注册用户。
用户填写完第一部分的所有字段后，他需要确认"Terms and Conditions"并按下按钮确认。
在他按下按钮后，第一部分变为只读，第二部分（要填写的更多字段）出现在页面底部，页面滚动到这个新部分。
我需要通知屏幕reader同一页面上有一个新的部分，但我不知道我可以通知谁。
感谢您的帮助！
这是关于焦点管理的。您需要在某处锚定对用户有意义的焦点，然后您需要移动该焦点。
总体而言，这不是一个理想的解决方案，但缺少更大范围的上下文 objective 我会给你一些信息，让这部分发挥作用/有用。
首先，添加此样式以便您可以看到焦点所在的位置（稍后您可以 remove/change）：
*:focus {
outline: 2px solid #f00;
}
现在当您在页面中切换时，您可以看到焦点所在的位置。
然后在你创建新表单的脚本中（我建议你实际上只是隐藏这个部分并显示它而不是通过 JS 写入它，但我知道这可能是一个演示），更新 <h3> 可以通过添加 id 属性然后添加 tabindex 来获得焦点，这样您就可以将焦点放在它上面。我使用您已经拥有的 <h3>，因为它为用户提供了上下文，在这种情况下，我不喜欢在 non-interactive 元素上使用 tabindex。
<h3 id="second" tabindex="0">
然后在 setTimeout() 之后添加一些脚本，将焦点移动到该元素（从而确保它已被渲染并可以接收焦点）：
var secondForm = document.getElementById('second');
secondForm.focus();
现在，当您单击 "Continue!" 按钮时，页面将滚动，标题将获得焦点，得到通知（您可以添加说明文本等），用户可以继续。
您可能需要稍微调整一下脚本，也许将其填充到自己的计时器函数中以确保它仅在您需要时触发，但总的来说，其中包含一般概念。
在你的 html 中有一个空的 span/div with aria-live="assertive"。在您的按钮点击功能中，将您希望 reader 宣布的文本添加到该范围。
（这与您将重点关注该部分的功能相同。）
别忘了在函数外清空它，让它下次也能正常宣告。
Aria-assertive 文本每次更改都会公布。
例如。
在HTML
<span id="announce" aria-live="assertive"></span>
<button id="btn">Click</button>
在javascript
$("#btn").click(function(){
$("#announce").text("Scrolled to a new section");
});
我有一个页面有 2 个步骤来注册用户。
用户填写完第一部分的所有字段后，他需要确认"Terms and Conditions"并按下按钮确认。 在他按下按钮后，第一部分变为只读，第二部分（要填写的更多字段）出现在页面底部，页面滚动到这个新部分。
我需要通知屏幕reader同一页面上有一个新的部分，但我不知道我可以通知谁。
感谢您的帮助！
这是关于焦点管理的。您需要在某处锚定对用户有意义的焦点，然后您需要移动该焦点。
总体而言，这不是一个理想的解决方案，但缺少更大范围的上下文 objective 我会给你一些信息，让这部分发挥作用/有用。
首先，添加此样式以便您可以看到焦点所在的位置（稍后您可以 remove/change）：
*:focus {
outline: 2px solid #f00;
}
现在当您在页面中切换时，您可以看到焦点所在的位置。
然后在你创建新表单的脚本中（我建议你实际上只是隐藏这个部分并显示它而不是通过 JS 写入它，但我知道这可能是一个演示），更新 <h3> 可以通过添加 id 属性然后添加 tabindex 来获得焦点，这样您就可以将焦点放在它上面。我使用您已经拥有的 <h3>，因为它为用户提供了上下文，在这种情况下，我不喜欢在 non-interactive 元素上使用 tabindex。
<h3 id="second" tabindex="0">
然后在 setTimeout() 之后添加一些脚本，将焦点移动到该元素（从而确保它已被渲染并可以接收焦点）：
var secondForm = document.getElementById('second');
secondForm.focus();
现在，当您单击 "Continue!" 按钮时，页面将滚动，标题将获得焦点，得到通知（您可以添加说明文本等），用户可以继续。
您可能需要稍微调整一下脚本，也许将其填充到自己的计时器函数中以确保它仅在您需要时触发，但总的来说，其中包含一般概念。
在你的 html 中有一个空的 span/div with aria-live="assertive"。在您的按钮点击功能中，将您希望 reader 宣布的文本添加到该范围。
（这与您将重点关注该部分的功能相同。）
别忘了在函数外清空它，让它下次也能正常宣告。
Aria-assertive 文本每次更改都会公布。
例如。 在HTML
<span id="announce" aria-live="assertive"></span>
<button id="btn">Click</button>
在javascript
$("#btn").click(function(){
$("#announce").text("Scrolled to a new section");
});