如果初始焦点设置为另一个元素，如何让屏幕阅读器在安装时读取组件中的标题？

Question

如果焦点设置到页面中的另一个元素，是否可以让屏幕阅读器在安装时读取文本（标题、跨度或 div）？

我有一个带有登录页面的反应应用程序。 登录页面有用户名和密码输入框，初始焦点设置为使用自动对焦的用户名。 该页面也有一个标题。 如何让屏幕阅读器在安装时读取标题而不会失去用户名的焦点？ 请参阅示例代码笔：示例应用程序。

上面的示例在初始登陆页面有一个登录按钮，点击它会加载登录组件。 我希望屏幕阅读器首先阅读标题，而不会失去用户名输入的焦点。 试过aria-live属性，但它不起作用。 有人可以帮忙吗？

谢谢！

Answer 1

（仍在测试中）

我相信<fieldset>正是您正在寻找的。

ARIA 定义了抽象structure角色，可以说是对不同上下文中的内容进行分组。 landmark也属于这些， group 。

我不确定这个逻辑到底基于哪个角色，但是屏幕阅读器会宣布这些上下文变化，所以当焦点离开一个组和/或进入另一个组时，他们的角色和名称就会被宣布。

因此，如果您的标题用作自动聚焦输入所在的结构的可访问名称，则应该宣布它。

forms 的一个非常合适的结构角色是group ，由<fieldset>实现。

 <button onclick="document.querySelector('input').focus();">Login</button> <form> <fieldset> <legend><h3>Enter Credentials</h3></legend> <label>Username <input name="username" autofocus> </label> </fieldset> </form>

按下登录按钮后，带有 Firefox 的 NVDA 将宣布：

输入凭据，分组用户名，编辑，自动完成，空白

不幸的是，Chromevox 没有宣布该组。

还要注意name="username" 。 这是允许浏览器自动完成字段的通用标准，这对可访问性很重要。 如果您有不同的名称，也可以添加autocomplete="username" 。

站点内最外层的上下文将是document的上下文。 它的可访问名称是您页面的元<title> ，它将在开头宣布，这是不可避免的。