链接onclick与按钮onclick

Question

这是一个相当简单的辅助功能问题。

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

我们总共有4个选项，以

分隔

• button标记与
• a代码，

和

• onclick属性vs.
• $("#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 按钮的键盘快捷键不需要额外的代码......）

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

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