角色=“按钮”是什么意思？

Question

我发现在 Google+ 项目的页面中，按钮都是由 div 制成的，例如：

 <div role="button"></div>

我想知道，这只是出于语义目的，还是会影响 <div> 的样式或事件处理？

我试图用 jQuery click 事件模拟按钮“点击”，但没有成功。

原文由 wong2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它告诉可访问性（和其他）软件 div 的目的是什么。更多信息在 草案 role 属性规范 中。

是的，这只是语义上的。向按钮发送 click 事件 应该 有效。

---

这个答案的早期版本（早在 2011 年）说：

…但是 jQuery 的 click 函数不这样做；它仅触发已 使用 jQuery 连接到元素的事件处理程序，而不触发以其他方式连接的处理程序。

…并在下面提供了示例代码和输出。

我现在无法复制输出（两年后）。即使我回到 jQuery 的早期版本，它们都会触发 jQuery 处理程序、DOM0 处理程序和 DOM2 处理程序。实际点击和 jQuery 的 click 函数之间的顺序不一定相同。我已经尝试过 jQuery 版本 1.4、1.4.1、1.4.2、1.4.3、1.4.4、1.5、1.5.1、1.5.2、1.6 和更新的版本，例如 1.7.1、1.8.3、 1.9.1 和 1.11.3（撰写本文时的当前 1.x 版本）。我只能断定是 浏览器 的问题，我也不知道我用的是什么浏览器。 （目前我正在使用 Chrome 26 和 Firefox 20 进行测试。）

这是一个测试，它表明确实，jQuery 处理程序、DOM0 处理程序和 DOM2 处理程序都是（在撰写本文时！）由 jQuery 的 click 触发：

 jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这只是语义。

建议您使用 <button> 标签的原生 HTML 按钮。但是，如果您有使用 <a> 或 <div> 标签的自定义控件，强烈建议使用以下有关 role='button' 的信息。

1. 触发响应

如果您正在构建自定义控件，它们应该像按钮一样工作。如果单击该元素，它应该会触发响应。例如，此响应不会更改按钮的文本，即自定义控件。如果是，则它不是按钮。

1. 键盘焦点

这些充当按钮的自定义控件应该可以通过键盘上的 Tab 键获得焦点 ， 也应该可以通过编程方式让屏幕阅读器获得焦点，因此您需要添加 tabindex="0" 。

1. 可操作性

自定义控件应实现 onclick 以及 onkeydown 事件。

可以通过 Space 和 Enter 激活按钮（和链接）。因此，如果您要将角色添加到自定义控件，您需要自己处理这些事件。否则，语义就失去了意义。屏幕阅读器用户希望使用 Space 来激活按钮，但事实并非如此。

带有 role='button' 的自定义控件的标准语法是

<div role="button" tabindex="0" onClick="click_handler()" onkeydown="keyhandler_for_space_and_enter()">

The tabindex="0" and onkeydown are not necessary if you are using <a> tag, but is required if you are using a non-focusable tag like <span> 或 <div> 手动允许对焦。

另一个有用的提示是，如果您仍在求助于构建自定义按钮，最好使用 <a> 标记，因为您可以避免 onclick 处理程序。

原文由 KannarKK 发布，翻译遵循 CC BY-SA 4.0 许可协议