通过链接和表单字段，您可以使用tab 循环并激活它们。
然而，在我的代码中，我使用了很多元素，它们具有 onclick 属性来执行不同的操作。例如table，其中每个tr 都可以点击并在点击时展开。
现在我希望我的页面也只能通过键盘浏览。
我正在考虑在每个 tr 上设置 tabindex，这在 Firefox 中有效（我可以通过标签浏览项目，但不能点击它们），但在 Chrome 中却没有。
如何使用键盘循环浏览所有包含 onclick 的元素？如果不是纯 HTML，也许是 JQuery。
【问题讨论】：
标签： jquery html accessibility tabindex keyboard-navigation
我建议您将元素简单地包装在锚标记 (<a>) 中。
【讨论】：
fiddle。 Tabindex 适用于我的 chrome 12。
你的实际问题是什么？
【讨论】：
您可以做的是跟踪当前元素并选中 onclick，并且每次用户点击 - 比如说 ~ 按钮 - 它会移动到下一个，当他点击 Enter 时 - 只需触发该元素的.click();。
我在 jsfiddle 上设置了一个示例：http://jsfiddle.net/dvirazulay/4kJnM/
这是对 tabindex 的一种重新实现，您可以做得更好，并根据自己的喜好更改实际的选择器...
【讨论】：
类似this fiddle?
var currentRow = -1;
$lastTd = jQuery();
$(document).keyup(function(event) {
if ($.inArray([38, 40], event.keyCode)) {
var $rows = $('table > tbody > tr');
var newRow = currentRow + (event.keyCode == 40 ? 1 : -1);
if (newRow > $rows.length - 1 || newRow < 0) return;
currentRow = newRow;
$lastTd.find('>div').hide();
$lastTd.find('>span.indicator').remove();
$lastTd = $rows.eq(currentRow)
.find('>td')
.prepend('<span class="indicator">> </span>');
// Show the content div
$lastTd.find('div').fadeIn();
}
});
【讨论】：
为什么不在该行上放置一个按钮，该按钮将执行与该行的 onclick 相同的操作？
屏幕阅读器也会读取按钮（或链接）。
【讨论】：
我希望这样的东西可能对你有用，（它不适合我，我不擅长 JS）。你可以编辑它，你会得到一个不可见的按钮填充表格元素的背景，并告诉用户哪个被选中你可以有边框。
<!DOCTYPE HTML>
<html>
<head>
<title>Nav</title>
<style>
table#sample {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table#sample th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
table#sample td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
</style>
</head>
<body>
<table id="sample">
<tr>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td ="section1">1</td>
<td id="section2">2</td>
</tr>
<tr>
<td id="section3">3</td>
<td id="section4">4</td>
</tr>
<tr>
<td id="section5">5</td>
<td id="section6">6</td>
</tr>
<tr>
<td id="section7">7</td>
<td id="section8">8</td>
</tr>
</table>
<script>
var sec;
var inside;
for (var i=1; i < 9; i++) {
sec = "section" + i;
inside = "<input type='button' tabindex='" + i + "' />"
document.getElementById(sec).innerHTML = inside;
};
</script>
</body>
</html>
【讨论】：
使用tabindex="0" 允许您使用制表键导航并将焦点移动到元素/行。但是，没有办法通过键盘触发onclick事件。
为了克服这个问题，添加一个触发onclick 事件的onkeydown 事件：
<tr
onclick="doYourStuff();"
onkeydown="if(event.keyCode == 13 || event.keyCode == 32){event.target.click()}"
tabindex="0">
在模拟点击时，您需要过滤除space(32) 和enter(13) 之外的其他按键。
这个监听器最好放在脚本中而不是内联，但我只是在这里演示这个概念。
【讨论】：