使用 tabindex= "0"会对其他元素产生影响

Question

我试图添加tabindex="0"以使未聚焦的元素成为焦点。我还添加了javascript代码来在焦点元素上激发Enter键。我有两个锚链接，一个有href值，另一个没有href。我将tabindex="0"添加到非href锚点标记中。

<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a tabindex="0" onclick="ob_os(this)">Documents</a>

ob_os((是一个扩展和collpase元素的函数。但在将tabindex="0"添加到第二个链接后，会对第一个链接产生影响。当焦点在第一个链接上并按下Enter键时，它不会扩展，而第二个链接正在扩展。

function ob_os(e){
var os = e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild;
if (os != null) {
if ((typeof os != "undefined") && (os.tagName == "IMG")) {
var lensrc = (os.src.length - 8);
var s = os.src.substr(lensrc, 8);
if ((s == "inus.gif") || (s == "usik.gif")) {
e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild.click();
}
}
else {
ob_os(e.parentNode);
}

}}

Answer 1

由于没有href属性的<a>不会被屏幕阅读器视为链接，请执行以下操作：

1. 删除您的tabindex，您将不需要它
2. 将linkARIA角色添加到您的锚点

结果如下：

<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>

Answer 2

第二个链接实际上是一个按钮，应该被分配一个角色。链接用于导航到页面或视图，而按钮用于页面上的交互式元素。在href中使用javascript:void(0);可以防止页面滚动到顶部，同时屏幕阅读器也可以正确识别页面。

<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>