Javascript 角色=按钮是什么意思？

What does role=button mean?

提问by wong2

I found that in Google+ Project's page that buttons are all made from divs like:

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

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

I'd like to know, is this just for semantic, all does it influence the style or event handle of the div? I tried to simulate click the button with JQuery click, but it doesn't work.

我想知道，这只是为了语义，它是否会影响 div 的样式或事件句柄？我试图用 JQuery click 模拟单击​​按钮，但它不起作用。

采纳答案by T.J. Crowder

It tells accessibility (and other) software what the purpose of the divis. More here in the draft roleattribute specification.

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

Yes, it's just semantic. Sending a clickevent to the button shouldwork.

是的，这只是语义。将click事件发送到按钮应该可以工作。

---

---

An earlier version of this answer (back in 2011) said:

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

...but jQuery's clickfunction doesn't do that; it triggers only the event handlers that have been hooked up to the element with jQuery, not handlers hooked up in other ways.

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

...and provided the sample code and output below.

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

I cannot replicate the output now (two years later). Even if I go back to earlier versions of jQuery, they all trigger jQuery handlers, DOM0 handlers, and DOM2 handlers. The order isn't necessarily the same between a real click and jQuery's clickfunction. I've tried jQuery versions 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, and more recent releases such as 1.7.1, 1.8.3, 1.9.1, and 1.11.3 (the current 1.x release as of this writing). I can only conclude that it was a browserthing, and I don't know what browser I was using. (Right now I'm using Chrome 26 and Firefox 20 to test.)

我现在无法复制输出（两年后）。即使我回到早期版本的 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 进行测试。）

Here's a test which shows that indeed, jQuery handlers, DOM0 handlers, and DOM2 handlers are all (as of this writing!) triggered by jQuery's click:

这是一个测试，它表明确实，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'>

回答by KannarKK

It's just semantics.

这只是语义。

It is recommended that you use native HTML buttons using <button>tag. However, if you are having custom controls using <a>or <div>tags, the following information on the role='button'is highly recommended.

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

1. Trigger a Response

1. 触发响应

If you are building custom controls, they should work just like a button. If you click the element, it should trigger a response. For example, This response isn't changing the text of the button i.e. custom control. If it is, then it is not a button.

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

1. Keyboard focus

2. 键盘焦点

These custom controls acting as buttons should be focusable by tabbing through a keyboard andalso should be focusable programmatically for screen-readers.

这些充当按钮的自定义控件应该可以通过键盘 Tab 键进行聚焦，并且还应该可以通过编程方式为屏幕阅读器聚焦。

1. Operability

3. 可操作性

The custom control should implement onclickas well as onKeyDownevents. Buttons can be activated through spacebar. Hence, if you are adding the role to a custom control, you need to handle these events yourself. Else, the semantic loses its meaning. A screen-reader user will try to activate the button using spacebar, but cannot.

自定义控件应该实现onclick以及onKeyDown事件。可以通过空格键激活按钮。因此，如果要将角色添加到自定义控件，则需要自己处理这些事件。否则，语义就失去了意义。屏幕阅读器用户将尝试使用空格键激活按钮，但不能。

The standard syntax for a custom control with the role='button'is

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

<div role="button" tabindex="0" onclick="click_handler()" onKeyDown="keyhandler_for_space()">

The tabindex="0"is not necessary if you are using <a>tag, but is required if you are using a non-focusable tag like <span>or <div>to manually allow focus.

该tabindex="0"是没有必要的，如果你正在使用<a>的标签，但如果你使用的是像一个不可聚焦标记是必需的<span>或<div>手动允许焦点。

Another useful tip is if you are still resorting to build custom button, it is much better to use <a>tag since you can avoid onclick handlers.

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

回答by EdoDodo

The roleattribute is used by accessibility software to know what the divdoes. For more information, see this page.

role可访问性软件使用该属性来了解它的div作用。有关更多信息，请参阅此页面。