有没有一种方法可以通知屏幕阅读器有关到同一页面上新部分的过渡？ [英] Is there a way to inform the screen reader about a transition to a new section on the same page?

问题描述

我有一个页面，该页面包含2个步骤来注册用户。

I have a page that has 2 steps to register a user.

用户填写了第一部分的所有字段后，他需要确认条款，然后按一个按钮进行确认。
他按下按钮后，第一部分变为只读状态，第二部分（需要填写的其他字段）显示在页面底部，并且该页面滚动到该新部分。

After a user has filled out all fields of the first section, he needs to confirm the "Terms and Conditions" and press a button to confirm it. After he has pressed the button, first section is becomes readOnly and the second section (more fields to fill) appears at the bottom of the page and the page does a scrollTo this new section.

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

I need to inform the screen reader that there is a new section on the same page but I don't know who can I do it.

感谢您的帮助！

推荐答案

在您的html中，空的span / div带有aria-live = assertive。在按钮单击功能中，将要读者宣布的文本添加到该范围。

In your html have an empty span/div with aria-live="assertive". In your button click function, add the text you want the reader to announce to that span.

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

(This is the same function where you will be taking focus to that section.)

别忘了在函数外将其清空，以便下次也可以正确声明。

Don't forget to empty it outside the function to make it announce properly next time also.

每次更改咏叹调的文本都会宣布。

Aria-assertive text will be announced each time it is changed.

例如。
HTML

Eg. In HTML

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

在javascript中

In javascript

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

这篇关于有没有一种方法可以通知屏幕阅读器有关到同一页面上新部分的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！