[英]Making links with no href accessible
A third party script is being used on a site I work on that replaces a few instances of <a href="">
with simple <a>
.在我工作的网站上使用了第三方脚本,用简单的<a>
替换了几个<a href="">
实例。 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?我可以通过添加tabindex="0"
将它们恢复到选项卡式导航顺序,但是如何让辅助技术将它们作为链接发布或将它们包含在页面上所有链接的列表中?
Would adding role="link"
help at all?添加role="link"
有所帮助吗?
I am pushing the third party to improve their script so that the href is left intact.我正在推动第三方改进他们的脚本,以便 href 保持不变。 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.更新:我无法将原始href
或类似href="#"
回链接,因为第三方代码将不再执行其功能。 I hope that they improve their code so that I can, but for now I need to make the link accessible without the 'href'.我希望他们改进他们的代码以便我可以,但现在我需要使链接可以在没有“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.为了使非HREF <a>
的行为像<a>
(并且可以访问),你就必须添加role=link
, tabindex=0
,风格它看起来像一个真正的链接,并添加键盘处理程序代码将返回视为点击。
role="link"
isn't sufficient; role="link"
是不够的; 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.屏幕阅读器可能会将其报告为链接,但如果没有tabindex="0"
和适当的视觉样式,视力正常的用户将无法首先使用 Tab 键访问它,并且如果没有键盘事件处理程序,则只有鼠标用户可以能够点击它。 (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>
:所以您有:
<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) (仅当您需要执行稍后描述的事件内容时才需要class='shim'
...)您可以在 jQuery 中使用以下内容执行此操作:(借用 Jack 的回答)
$("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.这是如何工作的,内部新添加的<a ...>
有一个href
,因此它作为链接公开并且是可选项卡的。 More importantly, if a user tabs to it and presses return, the default A behavior converts that keyboard input into a click
event.更重要的是,如果用户按 Tab 键并按回车键,默认的 A 行为会将键盘输入转换为click
事件。 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.这个特定的 A 有一个返回 undefined/void(0) 的href
,所以没有实际的导航发生,但点击事件仍然会冒泡到原始 A,它开始对其采取行动。
(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.) (这是一个简洁的模式,允许一些父元素——通常是 DIV 或类似元素——来处理点击事件,添加一个可以从键盘获取点击事件的子 tabbable A 为您提供鼠标和键盘都可用的 UI。)
The big caveat here is that it assumes that your original script doesn't care about the target
of the event.这里需要注意的是,它假定您的原始脚本不关心事件的target
。 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.如果该脚本确实检查了这一点,当它看到来自垫片 A 而不是原始 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)
});
Whilst it's not very pretty, you can get at all anchors without a href
attribute like so, using jQuery;虽然它不是很漂亮,但您可以使用 jQuery 获得所有没有href
属性的锚点;
$("a:not([href])")
You can then just set the href
attribute on those links to "#" and that should make them work again as regular links.然后,您可以将这些链接上的href
属性设置为“#”,这将使它们再次作为常规链接工作。
Here's a working JSFiddle这是一个有效的 JSFiddle
Sorry to reply with a jQuery solution...but doing this in regular JavaScript would be much more verbose.很抱歉用 jQuery 解决方案回复……但是在常规 JavaScript 中执行此操作会更加冗长。
Another way would be to give the anchors a role and then select them that way:另一种方法是给锚点一个角色,然后以这种方式选择它们:
$("a[role='link']")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.