JavaScript钩子的HTML元素

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之外的所有浏览器上添加填充来进行补偿.

另一种语义上的可能性是使用a <input type="image">,尽管这显然要求内容是图像.由于IE渲染了损坏的图像图标,因此依赖于alt文本无效.

虽然按钮在语义上是迄今为止最合适的元素,但如果你不想要这种样式问题,你可以继续使用span或其他无意义的元素(比如SO),但至少通过赋予它一个tabindex值来改善键盘的可访问性.然后,它会像链接一样可以聚焦,但不幸的是,如果你想让它可以从键盘激活(至少捕获按键代码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浏览器中做一些有用的事情; 您还可以添加规则来检查当前位置的哈希值,这样,如果有人在新选项卡中打开您的show-link,那么该文档将显示相关元素.