角色=“按钮”是啥意思？

Posted 2023-03-03

【中文标题】角色=“按钮”是啥意思？

【英文标题】：What does role="button" mean?角色=“按钮”是什么意思？

【发布时间】：2011-09-27 14:11:24

【问题描述】：

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

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

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

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

【问题讨论】：

+1 指出它不会响应 jQuery 点击。谢谢

超集***.com/questions/10403138/…

【参考方案1】：

它告诉可访问性（和其他）软件div 的用途是什么。更多信息请参见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'>

【讨论】：

那么我怎样才能模拟点击那个按钮呢？

@wong2：我会单独发布这个问题，它与关于role 属性的问题不同。 （我想你可能会使用createEvent 和dispatchEvent，但我很确定那里存在一些浏览器兼容性问题。我没有做过任何模拟事件触发，但我的印象是它是一个跨浏览器问题。）

谢谢。但是为什么我不能用 JQuery click() 模拟点击 Google+ 中的按钮？

@wong2：几乎可以肯定，因为 Google+ 使用 DOM2 样式处理程序（请参阅上面的详细信息）。当然，这就是 Google 的 Closure 库所使用的，所以这是一个非常安全的选择。

我尝试了 document.createEvent("MouseEvents");方法，但在 Google+ 的页面中不起作用，仅在 jsbin 中：jsbin.com/apixez

【参考方案2】：

这只是语义。

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

触发响应

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

键盘焦点

这些作为按钮的自定义控件应该可以通过键盘切换来获得焦点并且还应该可以通过编程方式为屏幕阅读器获得焦点。

可操作性

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

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

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

如果您使用<a> 标签，则tabindex="0" 不是必需的，但如果您使用诸如<span> 或<div> 之类的不可聚焦标签来手动允许焦点，则这是必需的。

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

【讨论】：

一个很好的答案，有一些有用的细节，但“只是语义”可能意味着它根本不重要。数以千计的站点仅使用 div 和 span 构建（因为开发人员不知道或不关心语义）现在需要添加缺少的语义（例如，使用 role 属性），如果有的话希望他们符合 WCAG。

【参考方案3】：

无障碍软件使用role 属性来了解div 的作用。如需更多信息，请参阅this page。

【参考方案4】：

根据 Twitter 上的@Katherinecodes 是这样的