使链接无href可访问 [英] Making links with no href accessible

问题描述

第三方脚本正在我工作的网站上使用，它将< a href => 的几个实例替换为简单的< a取代; 。链接仍然有效，这要归功于脚本的另一部分。但它们不再被用户代理视为链接。

我可以通过添加 tabindex =0来将它们还原为标签导航顺序，但我该如何辅助技术将它们公布为链接或将它们包含在页面上所有链接的列表中？

将添加 role =link help？

我推动第三方改进他们的脚本，使href保持不变。但在此期间，我该如何最好地修复正在进行的损害？

更新：我无法添加原始 href 或类似于 href =＃的内容返回链接，因为第三方代码将不再执行其操作。我希望他们能够改进他们的代码，以便我可以，但现在我需要使链接可以在没有'href'的情况下访问。

解决方案

为了让非href A的行为像A（并且可以访问），你必须添加 role = link ， tabindex = 0 ，它看起来像一个真正的链接，和添加键盘处理程序代码来将Return作为点击。角色=链接是不够的;屏幕阅读器可能会将其报告为链接，但没有 tabindex =0和适当的视觉样式，有视力的用户将无法首先将其选中，并且没有键盘事件处理程序，只有鼠标用户才能够点击它。 （技术上，屏幕阅读器用户通常有热键模拟鼠标点击;但仅限于键盘的用户通常没有该选项，所以不要依赖它。）

或者，如果（大，如果！）您使用的疯狂脚本允许它，您可以尝试填充键盘点击源（我的术语）A在原始A内：所以你有：

 < a> foo< / a> 
  

您将其替换为：

 < a>< a class ='shim'href =javascript：void（0）> foo< / a>< / a> 
  

（ class ='shim'是只有当你需要做后面描述的事件时才需要......）
你可以用jQuery做这样的事情：（从Jack的答案中借用）

<$ （< a class ='shim'href ='javascript：void（0）'>< / p $ p> $（a：not（[href]） a>）


这是如何工作的：新添加的< ; a ...> 有一个 href ，因此作为链接公开并且是可放置的。更重要的是，如果用户选中并按下返回，默认的A行为会将该键盘输入转换为点击事件。这个特定的A有一个返回undefined / void（0）的 href ，所以没有实际的导航发生，但点击事件仍然会冒泡到原始的A，对此进行操作。

（这是允许某些父元素（通常是DIV或类似元素）处理点击事件的一种简洁模式，添加了一个可以源代码的子标签A点击来自键盘的事件给你的用户界面，鼠标和键盘都可用。）

这里的一个重要警告是，它假定你的原始脚本不关心 target 的事件。如果该脚本确实检查了这一点，当它看到来自垫片A的点击事件而不是原来的As时会感到困惑。解决这个问题的一种方法是捕获并重新提升事件，该事件可能非常繁琐，并且可能只适用于最近的浏览器 - 例如使用类似以下内容：

<$ p $我们可以这样做：
$（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 A: 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 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屋！