javascript - JavaScript Hook 的 HTML 元素

Question

在我的大部分开发生涯中，我都做了一个 JavaScript 生成的按钮，如下所示:

<span>Open/hide</span>

使用类似 CSS

span {
    cursor: pointer;
}

这似乎对我有用，而且在我看来，它看起来似乎比

<a href="(#|javascript:void(0);|javascript:;|return false)">open/hide</a>

但是，我开始认为人们可能会使用链接，因为屏幕阅读器更容易访问它们。浏览器将允许您使用 Tab 键跳转到链接，但不一定是具有 CSS 样式的跨度(如我之前的示例)，这也是有道理的。

有没有办法两全其美？也就是说，一个可以选择的按钮，可以被屏幕阅读器访问，并且不暗示到另一个文档的语义链接，并且不必使用黑客方法来阻止链接去任何地方？

注意:这些仅适用于 JS 插入的按钮，不适用于通过 JS 更改其行为的现有链接。

Answer 1

That is, a button that can be tabbed to, accessible to screen readers and also not implying a semantic link to another document

是的，奇怪的是它的名字就是这样的:<button> 。或<input type="button">如果您只需要文本内容。然后，如果您愿意，您可以向其中添加 CSS 负载，以使其看起来不再像默认表单按钮。

唯一的问题是 IE，它向按钮小部件添加了几个额外的不可移除填充像素，并在单击时将按钮的内容向下和向右移动一个像素。通常这并不重要。如果您不需要零填充，您还可以通过在除 IE 之外的所有浏览器上添加填充来进行补偿。

另一种语义上合理的可能性是使用 <input type="image"> ，尽管这显然要求内容是图像。由于 IE 渲染的图像图标损坏，因此依赖替代文本不起作用。

虽然按钮在语义上是迄今为止最合适的元素，但如果您不希望出现这种样式问题，您可以继续使用 span 或其他无意义的元素(就像 SO 所做的那样)，但至少通过提供它来提高键盘可访问性一个tabindex值(value)。然后它将像链接一样可聚焦，但不幸的是，如果您想使其可从键盘激活(至少捕获按键代码 13 和 32)，则需要额外的脚本。您还可以使用 ARIA 将此类元素标记为按钮。为了可访问性，尽管说实话，我不相信这对当今的工具集真的有什么用处。

有时，当操作与页面上的另一个元素相关时，例如使用建议的“打开/隐藏”按钮，对我来说使用该元素的内部链接似乎是合法的。 (不过，使用 JS 分配的 onclick，而不是任何内联 JS 或可怕的 javascript: 伪 URL。)

.hidden { display: none; }

<a href="#foo" class="toggler">open/hide</a>
<div id="foo"> blah </div>

for (var i= document.links.length; i-->0;)
    if (document.links[i].className==='toggler')
        document.links[i].onclick= toggle;

function toggle() {
    var el= document.getElementById(this.hash.substring(1));
    el.className= el.className==='hidden'? 'hidden' : '';
}

或您选择的库中类似的习惯用法。这将在非 JavaScript 浏览器中做一些有用的事情；您还可以添加一条规则来检查当前位置的哈希值，这样，如果有人在新选项卡中打开您的显示链接，该文档将显示相关元素。