角色=按钮意味着什么？

Question

我发现在Google+项目的页面中,按钮全部来自div,例如:

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

我想知道,这只是用于语义,它是否会影响div的样式或事件处理？我试图模拟单击按钮与JQuery单击,但它不起作用.

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'>

Answer 2

这只是语义。

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

1. 触发回应

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

2. 键盘焦点

这些用作按钮的自定义控件应可通过在键盘上按Tab键进行调整，并且对于屏幕阅读器也应以编程方式进行调整。

3. 可操作性

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

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

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

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

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

Answer 3

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