模糊点击和网络可访问性的导航链接

Blurring navigation links on click and web accessibility

我有一个关于网络可访问性的问题。 对于 SPA(单页应用),单击时模糊导航链接是否合适?

正确: 在 SPA 中通过 AJAX 替换内容与传统网页中的移动页面相同。换句话说,页面的上下文发生了变化,因此,导航链接在被点击时应该是模糊的。

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

那你觉得呢? 哪个合适?

另外,这不是关于对焦环或视觉效果的。我唯一关心的是 "meaning".

问题不清楚,所以我根据自己的理解来回答;

如果要在页面上通知用户更改,需要使用 live regions 等 ARIA 标签。使用 css 效果不会在屏幕上产生效果 reader秒。因此,您需要一种方法来通知屏幕 reader 页面的特定部分已更新。

我不清楚您在此上下文中所说的模糊是什么意思,但在 SPA 键盘中,焦点管理是一项要求。

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

For both visual keyboard users and screenreader users, when a link is selected and the content updated by JS, the focus (as in JS .focus() ) should be moved to the top of the新内容。该内容元素可能需要 tabindex="-1" 才能使其可聚焦。

例如,如果您的主要内容区域在选择 link 时更新了新内容,请在新内容加载后将焦点移至顶部。

如果您还遇到焦点轮廓 onclick 的问题,最好的选择是删除任何因 :focus 而改变轮廓的 CSS。请参阅我的文章 Fixing outlines on click 和另一个选项。

另请参阅对 general issues for SPAs 的回答。

这取决于上下文。

  • 如果你有一个 link "next page" 并且 link 留在那里,你可以只用 aria-live 区域通知用户修改了主要内容。并且用户希望再一次单击可以再次转到 "next page",而不必向下滚动到相同的 link。

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

  • 如果这是一个导航link去特定页面,那么用户没有理由再次点击它,那么你可以诱导正常的页面变化和this.blur()这个link.

注意:我使用了 this.blur() 动词,因为 "blurring" 真的让我的头脑模糊了,但是你可以使用任何 javascript 替代方法,比如专注于其他部分页面