javascript - 如何使没有 href 属性的链接可访问？

Question

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

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

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

我正在插入第三方改进他们的脚本，以便 href 完好无损。但与此同时，我该如何最好地修复正在造成的损害？

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

Answer 1

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

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

或者，如果(如果!)您使用的疯狂脚本允许，您可以尝试填充“键盘点击源”(我的术语)<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)
});