制作没有href的链接 [英] Making links with no href accessible

问题描述

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

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

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

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

更新:我无法将原始 href 或类似 href="#" 之类的内容添加回链接作为第三个派对代码将不再做它所做的.我希望他们改进他们的代码以便我可以，但现在我需要使链接可以在没有href"的情况下访问.

解决方案

使非href 表现得像(和可访问)，您必须添加role=link、tabindex=0，将其样式设置为看起来像一个真正的链接，和添加将 Return 视为点击的键盘处理程序代码.

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

或者，如果(如果！)您正在使用的疯狂脚本允许它，您可以尝试在原文:所以你有:

foo

您将其替换为:

<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>")

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

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

这里需要注意的是，它假定您的原始脚本不关心事件的 target.如果该脚本确实检查了这一点，当它看到来自垫片 A 而不是原始 As 的点击事件时，它会感到困惑.解决此问题的一种方法是捕获并重新引发事件，这可能很繁琐，并且可能仅适用于最近的浏览器 - 例如使用以下内容:

//'shim' 类使用，所以我们可以这样做:$("a.shim").click(function(e) {e.preventDefault();e.stopPropagation();//如果侦听器使用 jQuery 或直接设置 onclick，则以下有效，否则...//$(e.target).parent().click();.//引发事件的更通用方法；IE<9 可能需要替代var e2 = document.createEvent("UIEvents");e2.initUIEvent("click", true, true, window, 1);e.target.parentNode.dispatchEvent(e2)});

A third party script is being used on a site I work on that replaces a few instances of <a href=""> with simple <a>. The links still work thanks to another part of the script. But they are no longer treated as links by user agents.

I can restore them to the tabbed navigation order by adding tabindex="0" but how can I make assistive technologies announce them as links or include them in a list of all links on a page?

Would adding role="link" help at all?

I am pushing the third party to improve their script so that the href is left intact. But in the meantime how do I best repair the damage that's being done?

Update: I can't add either the original href or something like href="#" back to the links as the third party code will no longer do what it does. I hope that they improve their code so that I can, but for now I need to make the link accessible without the 'href'.

解决方案

To make a non-href <a> behave like an <a> (and be accessible), you'd have to add role=link, tabindex=0, style it to look like a real link, and add keyboard handler code to treat Return as a click.

role="link" isn't sufficient; a screenreader may report it as a link, but without tabindex="0" and appropriate visual styles, a sighted user won't be able to tab to it in the first place, and without a keyboard event handler, only mouse users will be able to click it. (Technically screenreader users typically have hotkeys to simulate a mouse click, but keyboard-only sighted users generally don't have that option, so don't rely on it.)

Alternatively, if (big if!) the crazy script you're using allows for it, you could try shimming a 'keyboard click source' (my terminology) <a> just inside the original one: so where you have:

<a>foo</a>

you replace it with:

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

(The class='shim' is only needed if you need to do the event stuff described later...) You can do this in jQuery using something like: (borrowing from Jack's answer)

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

How this works is that the inner newly-added <a ...> has a href, so it is exposed as a link and is tabbable. More importantly, if a user tabs to it and presses return, the default A behavior converts that keyboard input into a click event. This specific A has a href that returns undefined/void(0), so no actual navigation happens, but the click event will still bubble up to the original A, which gets to act on it.

(This is a neat pattern for allowing some parent element - often a DIV or similar - to handle click events, adding a child tabbable A that can source click events from keyboard gives you UI that's both mouse and keyboard usable.)

The big caveat here is that it assumes that your original script doesn't care about the target of the event. If that script does check this, it will get confused when it sees click events coming from the shim A's rather than the original As. One way to get around this is to capture and re-raise the event, which can be fiddly, and may only work on recent browsers - eg using something like:

// '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)
});

这篇关于制作没有href的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！