我有一个关于网络可访问性的问题。 在SPA（单页应用）的情况下，点击模糊导航链接是否正确？
正确： 在 SPA 中通过 AJAX 替换内容与在传统网页中移动页面相同。换句话说，页面的上下文发生了变化，因此导航链接在被点击时应该是模糊的。
不当： 你知道原因。正如 W3C 和 WHATWG 所说，移除焦点环会给使用键盘导航和与交互式内容交互的用户带来严重的可访问性问题。
那么，你怎么看？ 哪个合适？
另外，这与对焦环或视觉效果无关。我只关心“意义”。
【问题讨论】：
标签： html accessibility single-page-application w3c
我不清楚您在这种情况下所说的模糊是什么意思，但在 SPA 键盘中，焦点管理是一项要求。
在点击时简单地对链接应用 on-blur 可能非常有害，因为屏幕阅读器可能会在选择链接时发送 onclick JS 事件。
对于视觉键盘用户和屏幕阅读器用户，当一个链接被选中并且 JS 更新内容时，焦点（如 JS .focus() ）应该移动到新内容的顶部。该内容元素可能需要tabindex="-1" 才能使其具有焦点。
例如，如果您的主要内容区域在选择链接时更新为新内容，则在新内容加载后将焦点移至新内容的顶部。
如果您在单击时也遇到焦点轮廓问题，最好的选择是删除由于:focus 而更改轮廓的任何 CSS。请参阅我的文章 Fixing outlines on click 了解该内容和另一种选择。
另请参阅general issues for SPAs 的此答案。
【讨论】：
这取决于上下文。
如果您有一个“下一页”链接并且该链接停留在那里，您可以通过aria-live 区域通知用户主要内容已被修改。并且用户希望再次单击即可再次转到“下一页”，而无需向下滚动到同一链接。
如果链接本身消失并且是旧内容的一部分，当然可以，如有必要，您可以this.blur() 它，就像页面正常更改一样。
如果这是一个指向特定页面的导航链接，那么用户没有理由再次点击它，那么你可以诱导一个正常的页面变化和this.blur()这个链接。
注意：我使用了 this.blur() 动词，因为“模糊”确实让我的思维变得模糊，但您可以使用任何 javascript 替代方法，例如关注页面的其他部分
【讨论】：
button (w3.org/TR/wai-aria/roles#link)。
问题不清楚，所以我根据我的理解来回答；
如果你想通知用户页面上的变化，你需要使用live regions等ARIA标签。使用css效果不会对屏幕阅读器产生影响。因此，您需要一种方法来通知屏幕阅读器页面的某些部分已更新。
【讨论】：