jquery - 链接 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。