14

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

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

会增加role="link"帮助吗？

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

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

4

2 回答 2

10

要使非 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's answer）

$("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)
});
于 2012-08-22T10:56:59.937 回答
2

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

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

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

这是一个有效的 JSFiddle

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

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

$("a[role='link']")
于 2012-08-21T09:19:01.130 回答