Role = “ Button”是什么意思？

我发现在 Google + Project 的页面上，所有的按钮都是由 div 制成的，比如:

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

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

我尝试用 jQueryclick事件模拟一个按钮“单击”，但它不起作用。

75607 次浏览
小开
最佳答案

它告诉可访问性(和其他)软件什么是 div的目的。

是的，它只是语义。发送一个 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 版本)。我只能得出结论，这是一个 浏览器的东西，我不知道我使用的浏览器。(目前我正在使用 Chrome26和 Firefox20进行测试。)

这里的一个测试表明，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'的以下信息。

  1. 触发回应

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

  1. 键盘对焦

这些作为按钮的自定义控件应该可以通过键盘 还有选项卡进行聚焦，也应该可以通过编程为屏幕阅读器进行聚焦，因此您需要添加 tabindex="0"。

  1. 可操作性

自定义控件应该实现 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>这样的不可聚焦标记，则需要使用 tabindex="0"和 onkeydown来手动允许聚焦。

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


提交答案