问题描述
我工作的一个站点正在使用第三方脚本，该脚本将<a href="">的几个实例替换为<a>。由于脚本的另一部分，这些链接仍然有效，但它们不再被用户代理视为链接。
我可以通过添加tabindex="0"将它们恢复为选项卡式导航顺序，但如何使辅助技术将它们声明为链接或将它们包含在页面上所有链接的列表中？
添加role="link"真的有帮助吗？
我正在推动第三方改进他们的脚本，以使HREF保持不变。但与此同时，我如何才能最好地修复正在造成的损害？
我无法将原始href或类似href="#"的内容添加回链接，因为第三方代码将不再执行其功能。我希望他们改进他们的代码，这样我就可以访问了，但目前我需要在没有‘href’的情况下使链接可访问。
推荐答案
若要使非HREF<a>的行为类似于<a>(并且可以访问)，您必须添加role=link、tabindex=0、设置其样式以使其看起来像真正的链接、和添加键盘处理程序代码以将返回视为单击。
role="link"是不够的；屏幕阅读器可能会将其报告为链接，但如果没有tabindex="0"和适当的视觉样式，视力正常的用户一开始就无法跳转到它，并且没有键盘事件处理程序，只有鼠标用户才能单击它。(从技术上讲，屏幕阅读器用户通常有热键来模拟鼠标点击，但只有键盘视力的用户通常没有这个选项，所以不要依赖它。)
或者，IF(大IF！)您正在使用的疯狂脚本允许这样做，您可以尝试在原始脚本中填充‘键盘单击源’(我的术语)<a>：所以您有：
<a>foo</a>
替换为：
<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>")
<a ...>有一个href，因此它作为一个链接公开，并且是可选的。更重要的是，如果用户按Tab键并按Return键，默认的A行为会将键盘输入转换为click事件。这个特定的A有一个href，它返回未定义/空(0)，因此不会发生实际的导航，但Click事件仍然会冒泡到原始的A，后者将对其执行操作。
(这是一个巧妙的模式，允许某些父元素-通常是DIV或类似元素-来处理单击事件，添加一个可以从键盘获取单击事件的子选项卡A将为您提供同时使用鼠标和键盘的UI。)
这里最大的警告是，它假定您的原始脚本不关心事件的target。如果该脚本确实检查了这一点，当它看到来自填充程序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)
});
这篇关于如何使没有href属性的链接可访问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！