javascript - 焦点模糊在 SPA 的理想客户端路由上？

Question

我有一个单页应用程序。有一个包含产品的页面，底部有一个转到下一页的链接。单击此“下一步”链接后，DOM 中的产品列表将被替换。虽然点击的链接保持不变并保持点击的焦点。是不是我做一些像 document.activeElement.blur() 这样的事情更好？或者我应该只关注它吗？

我不确定对于正常的服务器路由页面来说，最佳做法是什么，焦点会随着页面加载而重置。但我还没有看到任何信息表明从可访问性的 Angular 来看，手动重置对客户端路由的关注是最好的体验。

Answer 1

永远不要使用模糊。这只是糟糕的、随机的并且可能令人沮丧。

在原生应用中，你应该总是准确地知道焦点在哪里，并且焦点应该总是在一个精确的地方；否则键盘可访问性被破坏。如果您将 Web 应用程序视为真正的应用程序，则应遵循同样的严格要求。

因此，永远不要使用模糊，因为您根本不知道焦点之后会移动到哪里。如果您要从 DOM 中删除当前具有焦点的内容，您应该首先将它放在另一个有意义的地方。

在你的情况下:点击一个链接，你有两个合理的选择:

• 将焦点留在链接上(只要您不移动、隐藏或从 DOM 中移除它就合理)
• 将焦点移到刚刚出现/刚刚被替换的新内容的开头

您可以询问您的应用程序的用户他们认为哪种解决方案是最好的，或者通过在测试 session 期间观察他们来推断答案。

让我们快速总结一下:无论您是在制作一个具有不同页面的老式网站，并且您不必太在意焦点，还是在制作一个真正的应用程序，在那种情况下您应该像开发 native 应用程序一样严谨。非常简单。