时间戳

首页 > 解决方案 > 可访问性 - Javascript 仅链接带有 href="#" 的反模式？

javascript - 可访问性 - Javascript 仅链接带有 href="#" 的反模式？

问题描述

我有一个反应 SPA，其中有一些需要 javascript 来更改页面 url 的链接。从语义上讲，这些应该是链接，但链接目标是在运行时单击时计算的，或者它需要 javascript 移动到该位置（历史 api）

我在一些地方看到过，href="#" 是一种反模式或应该避免的东西。例如，来自 webaim https://webaim.org/techniques/hypertext/的这篇文章提到：

最严重的障碍之一是创建无处可去的链接。开发人员有时会使用 JavaScript 创建动态菜单，当用户将鼠标悬停在某些链接上时会下拉菜单。在某些情况下，链接本身根本无处可去，其唯一目的是在下拉菜单中公开链接，这些链接确实具有真实的目的地。像这样的链接通常有一个井号作为链接目的地，这意味着链接目的地是同一个页面；点击链接什么也没做。尝试激活链接时，键盘用户和鼠标用户都不会有任何体验。

它给出了一个 href="#" 的例子

现在我明白了，对于不执行任何操作或不将用户带到任何地方的链接使用 href="#" 可能在语义上是不正确的。不过，在我的使用中，链接确实有一个目的地，只是目的地不能在 href 中指定，除非单击链接，否则可能无法确定。所以我的用法是拥有href="#"和e.preventDefault()onClick，这样它就不会转到页面顶部并创建另一个历史记录条目。

我已经看到了其他可行的解决方案/解决方法：

但我想了解，如果使用href="#"具有目的地的链接（在单击链接后发现，或使用 javascript 应用）是一种反模式。

这是与 javascript only links 可访问性相关的问题的后续行动 ：Using javascript only links with href="#"

标签： javascripthtmlaccessibility

解决方案

如果它导航到新 URL，href则应将属性设置为该新 URL。然后，您可以使用它event.preventDefault()来防止页面在新位置重新加载。

// mock out history for demo purposes
const history = {
  pushState: (_data, _title, newUrl) => {
    alert(`navigated to ${newUrl}!`)
  }
}

document.querySelector('#spa-link').addEventListener('click', e => {
  e.preventDefault()
  
  history.pushState({}, '', '/new/path')
})
<a id="spa-link" href="/new/path">Go to new path</a>

推荐阅读