点击和网络辅助功能模糊导航链接

Question

我对网络辅助功能有疑问。 对于SPA（单页应用），点击时模糊导航链接是否合适？

正确的： 通过SPA中的AJAX替换内容与传统网页中的移动页面相同。换句话说，页面的上下文被更改，因此，点击导航链接时应该模糊。

不当： 你知道原因。正如W3C和WHATWG所说，删除聚焦环会导致使用键盘导航和与交互式内容交互的用户出现严重的可访问性问题。

然后，你怎么看？ 哪一个是正确的？

另外，这不是关注焦点环或视觉效果。只有我关心的是“意义”。

Answer 1

在这种情况下，我不清楚你的意思是什么，但在SPA键盘中，焦点管理是一项要求。

简单地在点击时对链接应用on-blur可能非常有害，因为屏幕阅读器可能会在选择链接时发送onclick JS事件。

对于可视键盘用户和屏幕阅读器用户，当选择链接并通过JS更新内容时，焦点（如JS .focus()）应移至新内容的顶部。该内容元素可能需要tabindex="-1"才能使其成为焦点。

例如，如果您在选择链接时使用新内容更新主内容区域，请在加载后将焦点移至新内容的顶部。

如果您在焦点轮廓问题上遇到问题，最好的选择是删除因:focus而更改轮廓的任何CSS。请参阅我的文章Fixing outlines on click，以及另一个选项。

另请参阅general issues for SPAs的答案。

Answer 2

这取决于具体情况。

• 如果您有链接＆＃34;下一页＆＃34;并且链接保留在那里，您只需通过aria-live区域通知用户主要内容已被修改。并且用户希望另一个点击进入＆＃34;下一页＆＃34;再次无需向下滚动到同一链接。

• 如果链接本身消失并且是旧内容的一部分，当然是，如果需要，您this.blur()，就像页面正常更改一样。

• 如果这是一个转到特定页面的导航链接，那么用户没有理由再次点击它，那么您可以引起正常的页面更改并this.blur()此链接。

注意：我使用了this.blur()动词因为＆＃34;模糊＆＃34;我真的很模糊，但你可以使用任何javascript替代方案，比如专注于页面的其他部分

Answer 3

问题不明确，所以我根据我的理解做出回应;

如果您想通知用户页面上的更改，您需要使用ARIA标签，例如live regions等。使用css效果不会对屏幕阅读器产生影响。因此，您需要一种方法来通知屏幕阅读器页面的某些部分已更新。