使没有 href 的链接可访问

Question

在我工作的网站上使用了一个第三方脚本，它用简单的<a> 替换了几个<a href=""> 实例。由于脚本的另一部分，这些链接仍然有效。但它们不再被用户代理视为链接。

我可以通过添加 tabindex="0" 将它们恢复为选项卡式导航顺序，但我怎样才能使辅助技术将它们作为链接宣布或将它们包含在页面上所有链接的列表中？

添加role="link" 会有帮助吗？

我正在推动第三方改进他们的脚本，以使 href 保持不变。但与此同时，我如何才能最好地修复正在造成的损害？

更新：我无法将原始的 href 或类似 href="#" 的内容添加回链接，因为第三方代码将不再执行它的功能。我希望他们改进他们的代码，以便我可以，但现在我需要使链接可以在没有“href”的情况下访问。

Answer 1

要使非href <a> 表现得像<a>（并且可以访问），您必须添加role=link、tabindex=0，将其设置为看起来像一个真正的链接，并添加键盘处理程序代码以将 Return 视为单击。

role="link" 还不够；屏幕阅读器可能会将其报告为链接，但如果没有 tabindex="0" 和适当的视觉样式，有视力的用户将无法首先使用标签，并且如果没有键盘事件处理程序，则只有鼠标用户能够点击它。 （从技术上讲，屏幕阅读器用户通常有热键来模拟鼠标点击，但只有键盘视力的用户通常没有这个选项，所以不要依赖它。）

或者，如果（大如果！）您使用的疯狂脚本允许它，您可以尝试在原始脚本内填充“键盘点击源”（我的术语）<a>：所以您有：

<a>foo</a>

您将其替换为：

<a><a class='shim' href="javascript:void(0)">foo</a></a>

（仅当您需要执行稍后描述的事件时才需要class='shim'...） 您可以使用以下方法在 jQuery 中执行此操作：（借鉴 Jack 的答案）

$("a:not([href])").wrapInner("<a class='shim' href='javascript:void(0)'></a>")

它的工作原理是内部新添加的<a ...> 有一个href，因此它作为链接公开并且是可标签的。更重要的是，如果用户选择它并按下回车键，默认的 A 行为会将键盘输入转换为 click 事件。这个特定的 A 有一个 href 返回 undefined/void(0)，因此不会发生实际的导航，但点击事件仍会冒泡到原始 A，它会对其进行操作。

（这是一个简洁的模式，它允许某些父元素（通常是 DIV 或类似元素）处理点击事件，添加一个可以从键盘获取点击事件的子标签 A 为您提供鼠标和键盘都可用的 UI。）

这里最大的警告是它假定您的原始脚本不关心事件的target。如果该脚本确实检查了这一点，那么当它看到来自 shim A 而不是原始 As 的点击事件时，它会感到困惑。解决此问题的一种方法是捕获并重新引发事件，这可能很繁琐，并且可能仅适用于最近的浏览器 - 例如使用类似的东西：

// 'shim' class used so we can do this:
$("a.shim").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    // the following works if listener using jQuery or is setting onclick directly, otherwise...
    // $(e.target).parent().click();.

    // More general way to raise events; may need alternate for IE<9
    var e2 = document.createEvent("UIEvents");
    e2.initUIEvent("click", true, true, window, 1);
    e.target.parentNode.dispatchEvent(e2)
});

Answer 2

虽然它不是很漂亮，但您可以使用 jQuery 获得所有没有 href 属性的锚点；

$("a:not([href])")

然后您可以将这些链接上的href 属性设置为“#”，这样它们就可以再次作为常规链接工作。

Here's a working JSFiddle

很抱歉使用 jQuery 解决方案进行回复...但是在常规 JavaScript 中执行此操作会更加冗长。

另一种方法是赋予锚点一个角色，然后以这种方式选择它们：

$("a[role='link']")