建立无href可访问的链接

Question

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

我可以通过添加将它们恢复到选项卡式导航顺序,tabindex="0"但是如何让辅助技术将它们声明为链接或将它们包含在页面上所有链接的列表中？

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

我正在推动第三方改进他们的脚本,以便href保持不变.但与此同时,我如何才能最好地修复正在进行的损坏？

更新:我无法将原始内容href或类似内容添加href="#"回链接,因为第三方代码将不再执行其操作.我希望他们能够改进他们的代码,但是现在我需要在不使用'href'的情况下访问链接.

Answer 1

为了使非HREF一个表现得像一个A(并且可以访问),你就必须添加<a>,<a>,作风它看起来像一个真正的链接,并添加键盘处理代码来处理返回的点击.role ="link"是不够的; 屏幕阅读器可以将其报告为链接,但是没有role=link和适当的视觉样式,有视力的用户将无法首先对其进行选项卡,并且没有键盘事件处理程序,只有鼠标用户才能单击它.(技术上屏幕阅读器用户通常有热键来模拟鼠标点击;但只有键盘的用户通常没有这个选项,所以不要依赖它.)

或者,如果(如果!)您正在使用的疯狂脚本允许它,您可以尝试填充"键盘点击源"(我的术语)A在原始A中:所以您拥有:

<a>foo</a>

你替换它:

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

(tabindex=0仅当你需要执行后面描述的事件时才需要...)你可以使用类似的东西在jQuery中执行此操作:(借用Jack的答案)

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

这是如何工作的,内部新添加role="link"有一个tabindex="0",所以作为一个链接暴露,并且是可能的.更重要的是,如果用户选中它并按下返回,则默认的A行为会将该键盘输入转换为<a>事件.这个特定的A有一个class='shim'返回undefined/void(0),因此没有实际的导航,但click事件仍然会冒泡到原来的A,它会对它起作用.

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

这里最大的警告是,它假定您的原始脚本不关心<a ...>事件.如果该脚本确实检查了这一点,那么当它看到来自垫片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)
});