Question

我的大部分开发生涯中，我都按照这样的方式完成了一个JavaScript生成按钮：

<span>Open/hide</span>

使用CSS

span {
    cursor: pointer;
}

这似乎对我有用，而IMO看起来似乎比

更好

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

然而，我开始认为人们可能会使用链接，因为屏幕阅读器可以更好地访问它们。浏览器允许你选择一个链接是有意义的 - 但不一定是带有CSS风格的跨度（就像我之前的例子一样）。

有没有办法让两全其美？也就是说，一个按钮可以被标签化，屏幕阅读器可以访问，也不暗示与另一个文档的语义链接，而不必使用hacky方法阻止链接进入任何地方？

注意：这些仅适用于JS插入按钮，而不是使用JS更改其行为的现有链接。

Answer 1

也就是说，一个按钮可以被标签化，可供屏幕阅读器访问，也不会暗示与另一个文档的语义链接

是的，而且奇怪的是它被称为：<button>。如果您只需要文字内容，请<input type="button">。然后，您可以向其添加一大堆CSS，以便在您喜欢时将其视为默认表单按钮。

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

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

虽然按钮在语义上是迄今为止最合适的元素，但如果你不想要这样的样式问题，你可以继续使用span或其他无意义的元素（比如SO），但至少通过赋予它来改善键盘的可访问性tabindex值onclick。然后，它会像链接一样可以聚焦，但不幸的是，如果你想让它可以从键盘激活（至少捕获按键代码13和32），你需要额外的脚本。你也可以将这样一个元素标记为ARIA的按钮以便于访问，但说实话，我不相信这对今天的工具集有用。

有时当操作与页面上的另一个元素相关时，例如使用建议的“打开/隐藏”按钮，使用内部链接到该元素似乎是合法的。（使用JS分配的javascript:，而不是任何内联JS或可疑的.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' : ''; }伪URL。）

{{1}}

或您选择的图书馆中的类似习语。这将在非JavaScript浏览器中做一些有用的事情;您还可以添加规则来检查当前位置的哈希值，这样，如果有人在新标签页中打开您的show-link，那么该文档将显示相关元素。

Answer 2

似乎正在做

<span tabIndex="n">foo</span>

允许您标记它。但是，在聚焦时按Enter键不会模拟单击它。我想通过在其上放置一个keydown事件可以很容易地解决这个问题。

Answer 3

我会说按钮符合您的要求......

<input type="button" class="js_button" value="Javascript Button" />

CSS：

.js_button, .js_button:active, js_button:focus {
    background-color: #FFF;
    border: none;
    margin: 0 0;
    padding: 0 0;
}

按钮可以选项卡，语义，自动包含选项卡索引和按键操作，并不意味着指向其他文档的链接。唯一的困难是删除了mousedown动画 - 我会环顾四周，看看是否有任何东西可以在没有黑客的情况下删除动画。

Answer 4

如果您提供元素的id或name，则可以链接到页面中的任何对象。

例如：

https://stackoverflow.com/questions/1659137/html-elements-for-javascript-hooks#comments-1659137

HTML elements for JavaScript hooks

JavaScript钩子的HTML元素

4 个答案: