"role="button"的含义是什么？"

Question

我发现在 Google+ 项目的页面中，所有的按钮都是用 div 元素制作的，例如：

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

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

我尝试使用jQuery的click事件模拟按钮的“点击”，但它没有起作用。

- wong2

---

谢谢您指出它不会响应 jQuery 单击事件。我给你点个赞（+1）。 - Ahmad Alfy

Superset是一个开源的数据探索和可视化平台，它提供了丰富的数据分析工具和交互式仪表板。在HTML中，role属性用于定义元素的角色或作用，以便屏幕阅读器等辅助技术可以更好地理解页面内容。 - Ciro Santilli OurBigBook.com

Answer 1

它告诉辅助功能(和其他)软件

的目的是什么。在draft role attribute specification 中可以了解更多。

是的，这只是语义化的。向按钮发送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

---

那么我该如何模拟点击那个按钮呢？ - wong2

@wong2：我建议你单独发布这个问题，因为它与role属性的问题不同。（我认为你可能会使用createEvent和dispatchEvent，但我相信在不同浏览器上可能会有一些兼容性问题。虽然我没有进行过模拟事件触发，但我的印象是这是一个跨浏览器的问题。） - T.J. Crowder

@wong2：我认为肯定有方法，但你最好将其作为自己的问题发布。我看到你之前似乎已经这样做了，但人们都陷入了按钮的具体细节、他们确定是jQuery的$函数等等。建议提出一个直接切入核心的问题：如何可靠地模拟对div的点击，以便触发使用addEventListener等挂钩的事件处理程序？不要使用jQuery，因为你正在尝试在没有使用jQuery的页面上进行此操作，而且你不能/不想引入它。 - T.J. Crowder

看起来它有点过时了，现在在两种情况下都会触发DOM2。 - Jakub Kania

@JakubKania：谢谢，好知道。我在Chrome 26中尝试了各种不同版本的jQuery（在回答的日期2011年之后），并且使用jQuery的click似乎在所有版本中都可以触发DOM2事件（顺序略有不同）。这可能是浏览器的问题。 - T.J. Crowder

Answer 2

这只是词义学的区别。

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

1. 触发响应

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

2. 键盘焦点

这些充当按钮的自定义控件应该可以通过键盘进行焦点遍历以及对于屏幕阅读器也应该可以通过编程方式进行焦点遍历，因此需要添加tabindex="0"。

3. 可操作性

自定义控件应该实现onclick和onkeydown事件。

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

具有role='button'的自定义控件的标准语法为：

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

如果您使用 <a> 标签，则不需要 tabindex="0" 和 onkeydown。但是，如果您正在使用非可聚焦标签（如 <span> 或 <div>）手动允许聚焦，则需要它们。

另一个有用的技巧是，如果您仍在使用自定义按钮，最好使用 <a> 标签，因为可以避免使用 onclick 处理程序。

- KannarKK

---

一个好的回答，有一些有用的细节，但“只是语义学”可能意味着这并不重要。成千上万的网站仅使用div和span构建（因为开发人员不知道或不关心语义学），现在需要添加缺失的语义学（例如role属性），如果希望它们符合WCAG标准。 - brennanyoung

Answer 3

role 属性用于辅助软件了解 div 的作用。更多信息请参见此页面。

- EdoDodo