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"和适当的视觉样式，有视力的用户将无法首先选中它，并且没有键盘事件处理程序，只有鼠标用户将是能够点击它。（技术上屏幕阅读器用户通常使用热键来模拟鼠标点击;但只有键盘的用户通常没有该选项，所以不要依赖它。）

或者，如果（如果！）您正在使用的疯狂脚本允许它，您可以尝试填充“键盘点击源”（我的术语）A在原始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），所以没有实际的导航，但click事件仍然会冒泡到原来的A，它会对它起作用。

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

这里的一个重要警告是，它假定您的原始脚本不关心事件的target。如果该脚本确实检查了这一点，那么当它看到来自垫片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']")

建立无href可访问的链接

2 个答案: