可访问性-仅Javascript链接，href="#&引用；反模式？

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

我在一些地方看到它提到href=“#”是一种反模式或应该避免的东西。例如，webaim的这篇文章提到：

其中一个最严重的障碍是创建无处可去的链接。 开发人员有时使用JavaScript来创建动态菜单，以 当用户用鼠标悬停在某些链接上时，向下移动。在某些方面 在某些情况下，链接本身根本就不存在，其唯一目的是 在下拉菜单中显示链接，这些链接具有真实的 目的地。像这样的链接通常有一个磅符号作为链接 目的地，表示链接目的地是同一页面； 点击链接不会产生任何效果。键盘用户和 鼠标用户在尝试激活时将完全体验不到任何东西 链接

它给出了href=“#”的一个示例

现在我明白了，对于不做任何事情或不带用户到任何地方的链接，使用href=“#”在语义上可能是不正确的。 但在我的使用中，链接确实有一个目的地，只是在href中无法指定目的地，除非单击链接，否则可能无法确定目的地。因此，我的用法是让

href=“#”

和

e.preventDefault（）

onClick，这样它就不会进入页面顶部并创建另一个历史记录条目

我已经看到了这方面的其他工作解决方案/变通方法：

• 使用哈希与javascript:void（0）

• 其他变通办法

但我想了解，如果对确实有目的地的链接使用

href=“#”

（在单击链接后确定，或使用javascript应用）是一种反模式

这是关于仅javascript链接可访问性问题的后续问题

---

如果您使用的是屏幕阅读器软件，例如Windows上的NVDA（特别是浏览器模式），它可能会截取

标记的某些键（例如

空格

或

输入

键），并将某些行为绑定到该标记，这意味着它会绕过生成动态URL的Javascript代码）。所以你的应用程序可能会被NVDA用户破坏

你可以在Windows上的NVDA/JAWS上测试你的应用程序，看看

+Javascript是否有效

---

如果您正在构建一个下拉菜单，通常很难实现对悬停和展开菜单的100%访问。如果可能的话，我们应该避免使用这种模式。您最好使用其他设计，例如目录。

如果它导航到一个新URL，则应将

href

属性设置为该新URL。然后可以使用

event.preventDefault（）

来防止页面在新位置重新加载

//用于演示的模拟历史记录
常数历史={
pushState:（\u数据，\u标题，新URL）=>{
警报（`navigated to${newUrl}！`）
}
}
document.querySelector（“#spa链接”）.addEventListener（'click'，e=>{
e、 预防默认值（）
history.pushState（{}，，'/new/path'）
})

---

如果href不重要，我看不出它们是如何“语义链接”。让它们成为

标签可能更有意义。就个人而言，我个人而言，使用

或

javascript:void（）

的链接的最大问题是在新标签中打开它们毫无用处。我经常点击鼠标中键打开一堆链接，然后浏览它们。如果那只是打开了一个页面，甚至没有将我链接到一个特定的部分，那么这是非常令人沮丧的。现在，我必须再次浏览该页面，也许其他人也会找到我想看的内容，然后逐个点击，然后再点击下一个。这对我来说不太好。使用链接进行导航（用户应该能够在新选项卡中打开链接，复制并分发它们）。使用按钮执行操作/命令。就我个人而言，我认为href=“#”是一个反模式。@该链接有一个目的地，只是它没有在href属性中指定。单击它实际上会将url更改为另一个页面，那么这在语义上不是一个链接吗？或者，对于这个问题，href可能是在某些操作之后通过编程确定的，直到那时，它们不应该被呈现为链接吗？您可以计算并更新“mouseenter”上的

href

值，而不是“click”。编辑并“聚焦”我想是为了防止元素通过键盘被标签插入。可能还需要一个触摸/指针解决方案。只是一个想法。HTML最初是在一个不包含JavaScript的世界中设计的，因此我们这个时代的语义代表了一个截然不同的场景。