链接 onclick 与按钮 onclick

Question

这是一个相当简单的可访问性问题。

假设我们有一个切换链接/按钮，单击该按钮可切换移动菜单。这种按钮更易于访问的格式是什么？

共有 4 个选项，以

分隔

• button标签与
• a 标签，

和

• onclick 属性对比
• $("#showMenu").on("click", function() { showMenu() } )

所有选项

1. <a href="#" onclick="showMenu();"></a>
2. <button onclick="showMenu();"></button>
3. <a href="#" id="showMenu"></a>
   • 与$("#showMenu").on("click",function() { showMenu() } );
4. <button id="showMenu"></button>
   • 与$("#showMenu").on("click",function() { showMenu() } );

优点和缺点

我已经读到，为了获得最佳可访问性，<button> 标记应该用于 javascript 操作，<a> 标记用于普通链接。很遗憾，我再也找不到那篇文章了。

人们总是说“将逻辑与内容分开”。我的回答是：你真的认为你的 Javascript showMenu() 函数在没有那个链接来触发它的情况下可以工作吗？那么，您真的将逻辑与内容分开了吗？

按照这些思路，我确实喜欢使用事件处理程序来附加事件的想法，但是，这会使代码在某些情况下更难维护，而不是更容易。如果我稍后删除该链接或更改 ID 或类，我将失去该功能。 onclick 属性提醒我要小心行事。如果我有多个链接，或者希望符合 508（请参阅下一段），我将使用事件处理程序。

508 标准要求每个 onclick 属性都附带一个等效的键盘属性。这让我抓狂，因为键盘用户可以通过键触发 onclick 事件，并且习惯于对文本链接这样做。* 此外，如果您添加任何类型的 onkeyup 事件处理程序，则需要过滤键等，这样用户就不会被您的链接“卡住”而完全无法浏览整个网站的其余部分。

*见注：http://alistapart.com/article/popuplinks#section6

我的问题

1. <button> 标签是否更便于访问？
2. 为什么或为什么不？
3. 这 4 个中哪一个最适合可访问性？

请注意，这个问题类似于以下问题，但我对<button> 与<a> 参数更感兴趣。另外，以下问题甚至没有提到可访问性，这是我主要关心的。 jQuery.click() vs onClick

Answer 1

其中很多都是见仁见智的问题，但对我来说，一个链接会带你去某个地方，而一个按钮会执行一个动作。在你的情况下，如果是我，我会使用一个按钮。正如你所提到的，我会使用 onclick 来避免以后忘记它。

所以你的选择#2。

Answer 2

“保持简单......问问你的客户！”

我个人认为，当你想要“做某事”时，你应该使用一个按钮。 （HTML 按钮的键盘快捷键应该不需要额外的代码...）

如果您想“去某个地方”，那是（唯一）正确的超链接位置。

我不希望“按钮”带我到某个地方，也不希望“超链接”做某事。