可访问性-Javascript仅链接反样式href =“＃”吗？

如何解决可访问性-Javascript仅链接反样式href =“＃”吗？

我有一个React SPA，其中有一些链接需要JavaScript才能更改页面网址。 语义上这些应该是链接，但是链接目标是在运行时单击时计算的，或者它需要JavaScript才能移动到该位置（历史API）

我已经看到它在一些地方提到href =“＃”是反模式或应避免的东西。例如，来自webaim https://webaim.org/techniques/hypertext/的这篇文章提到：

最严重的障碍之一是创建无法到达的链接。 开发人员有时会使用JavaScript创建可删除的动态菜单 当用户将鼠标悬停在某些链接上时，单击“向下”。在一些 情况下，链接本身根本没有任何位置，它的唯一目的是 在下拉菜单中显示确实包含真实链接的链接 目的地。这样的链接通常以磅符号作为链接 目标，即链接目标是同一页面； 单击该链接不会完成任何操作。键盘用户和 鼠标用户尝试激活时一无所获 链接。

并给出了href =“＃”

的示例

现在，我得到了使用href =“＃”进行链接的操作，这些链接什么都不做或不会将用户带到任何地方，从语义上来说可能是不正确的。 在我的用法中，链接确实有一个目的地，只是无法在href中指定目的地，除非单击链接，否则可能无法确定目的地。因此，我的用法是使href="#"和e.preventDefault()处于onClick状态，这样它就不会转到页面顶部并创建另一个历史记录条目。

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

• 使用哈希vs javascript：void（0） Which "href" value should I use for JavaScript links,"#" or "javascript:void(0)"?

• 其他解决方法 https://weblog.west-wind.com/posts/2019/Jan/21/NonNavigating-Links-for-JavaScript-Handling

但是我想了解一下，如果对确实具有目标位置的链接使用href="#"（单击链接后即可确定，或者使用javascript应用）是反模式。

这是此问题的跟进，与javascript only链接可访问性有关 Accessibility: Using javascript only links with href="#"

解决方法

如果您使用的是屏幕阅读器软件，例如Windows上的NVDA（特别是浏览器模式），它可能会拦截某些{{1}键（例如Space或Enter键） }}标记并绑定某些行为，这意味着它绕过了生成动态URL的Java代码。因此，对于NVDA用户而言，您的应用可能会被破坏。

您实际上可以尝试在Windows的NVDA / JAWS上测试您的应用程序，并查看<a> + Javascript是否有效。

通常，如果要构建下拉菜单，则很难实现使其能够100％可供悬停和展开菜单使用。如果可能，我们应避免使用此模式。您最好使用其他设计，例如目录。仅供参考，我blogged对此事。

,

如果它导航到新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>