Html 有没有一种方法可以通知屏幕阅读器在同一页上转换到新的部分？

我有一个页面，有两个步骤来注册用户

在用户填写完第一部分的所有字段后，他需要确认“条款和条件”，并按下按钮进行确认。 按下按钮后，第一部分变为只读，第二部分（更多要填充的字段）显示在页面底部，页面会滚动到此新部分

我需要通知屏幕阅读器，在同一页上有一个新的部分，但我不知道谁可以这样做

---

我感谢你的帮助

这是关于焦点管理的。你需要在某个地方锚定对用户有意义的焦点，然后你需要移动该焦点

总体而言，这不是一个理想的解决方案，但缺乏更大目标的背景。我将为您提供一些信息，以使该部分功能化/实用化

首先，添加此样式，以便可以看到焦点的位置（稍后可以删除/更改）：

现在，当您在页面中单击tab键时，您可以看到焦点所在的位置

然后在您创建新表单的脚本中（我建议您实际上只是隐藏此部分并显示它，而不是通过JS将其写入，但我知道这可能是一个演示），通过添加

id

属性和

tabindex

将

更新为可聚焦，以便您可以将焦点放在它上。我使用您已有的

，因为它为用户提供了上下文，在这种情况下，我不喜欢在非交互元素上使用

tabindex

<h3 id="second" tabindex="0">

现在，当您单击“继续！”按钮时，页面将滚动，标题将接收焦点、公告（您可以添加说明文本等），用户可以继续

您可能需要对脚本进行一些调整，可能需要将其填充到自己的计时器函数中，以确保它只在您需要的时候启动，但总体而言，一般概念就在这里

---

在html中，I.

有一个带aria live=“assertive”的空白span/div。在按钮单击功能中，添加您希望读者在该范围内宣布的文本

（这与您将关注该部分的功能相同。）

别忘了在函数外清空它，以便下次也能正确地发布它

Aria断言文本将在每次更改时公布

例如。 在HTML中

---

您是将用户跳转到页面上的命名锚点，还是只是滚动视口？还有，你有演示的URL吗？伙计们，这是一个最接近实现的示例：@aardrian我正在滚动视口如果你以编程方式聚焦，你可以使用

tabindex=“-1”

将元素保持在自然的选项卡顺序之外。同意，这可能是一个更好的方法。但是，如果元素还不存在，我认为将其放入元素中并留作以后的选项卡以保持期望是合适的。并不意味着它是正确的，只是我的逻辑。

<h3 id="second" tabindex="0">

var secondForm = document.getElementById('second');
secondForm.focus();

<span id="announce" aria-live="assertive"></span>
<button id="btn">Click</button>

$("#btn").click(function(){
$("#announce").text("Scrolled to a new section");
});