1

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

4

2 回答 2

0

除了您已经拥有的（对于回访者的首次加载）之外，您不需要在 SPA 上跳转到内容链接。

跳转到内容是为了当您单击指向新页面的链接时，它有助于避免每次导航时都必须听菜单。

SPA 不是问题，因为一切都是通过 AJAX 完成的，当我单击一个链接时，页面上的一个区域将更新为新内容。

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

某些屏幕阅读器需要明确的ARIA Live Regions才能注册新内容，因此请确保使用屏幕阅读器对其进行测试。

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

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

如果页面根本没有加载会发生什么？

这些是您对 SPA 的更大挑战。

于 2019-09-11T20:27:17.367 回答
0

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

您可以将焦点移到文档的开头，以便他们每次都点击您的“跳转到内容”链接（有其优点，因为它最像他们可能熟悉的多页应用程序）或将其移至内容主体本身并点击一下（对我来说似乎更精简，但您的用户可能不熟悉）。

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

我倾向于后者，但无论您决定实施它，这都会起作用。不要忘记将要关注的元素上的选项卡索引也设置为 -1。

于 2019-09-23T03:37:47.333 回答