角色=按钮是什么意思？

2018-06-12 19:34:47

我发现在Google+项目的页面上，按钮全部由div制成，如：

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

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

它告诉可访问性（和其他）软件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'>

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

这只是语义。

建议您使用<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>手动允许焦点，则需要tabindex="0" 。

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

链接地址: http://www.djcxy.com/p/36613.html

上一篇: What does role=button mean?

下一篇: How to make a Bootstrap accordion collapse when clicking the header div?