如何在React上实现“跳到内容”网页辅助功能？

Question

当我们只使用键盘和Tab键浏览网站时，“跳到内容”的第一个锚点链接显示为跳过导航，并将焦点放在使网页可访问的主要内容上。很容易在多页网站上添加这样的功能，其中有完整的页面重新加载和页面的焦点重置。我在React上看到了类似的行为。我们如何在基于React的单页面应用程序上实现这样的行为呢？

Answer 1

你不应该需要在SPA上跳到内容链接，除了你已经有的链接(对于第一次加载返回的访问者)。

“跳至内容”用于当您单击指向新页面的链接时，它有助于避免每次导航时都要监听菜单。

使用SPA不是问题，因为所有事情都是通过AJAX完成的，当我单击一个链接时，页面上的一个区域将使用新内容进行更新。

您所需要做的就是将焦点移到正在从菜单项更新的区域。

某些屏幕阅读器需要显式的ARIA Live Regions来注册新内容，因此请确保使用屏幕阅读器进行测试。

在SPA中，当你开始考虑延迟时，你很快就会遇到可访问性问题。

如果我单击该链接，页面需要3秒钟才能加载，会发生什么情况？

如果页面根本不加载，会发生什么？

这些都是您使用SPA所面临的更大挑战。

Answer 2

我不同意Graham的观点，即你不应该需要跳转到内容链接。在SPA中，当用户导航到新的“页面”时，焦点仍然停留在按下的链接上。每当你的用户想要导航时，他们将不得不通过剩余的导航菜单来获取内容。

你可以将焦点移动到文档的开头，这样他们每次都会点击你的“跳到内容”链接(这有它的优点，因为它最像是他们可能熟悉的多页应用程序)，或者把它移到内容主体本身，节省一次点击(对我来说似乎更流畅，但对你的用户来说可能不熟悉)。

    componentDidMount() {
        setTimeout(() => document.getElementById('your-element-of-choice').focus(), 0)
    }

我倾向于后者，但无论您决定实现哪种方式，它都会起作用。不要忘了将要关注的元素上的制表符索引也设置为-1。