角色=按钮意味着什么?

时间:2011-07-03 10:42:14

标签: javascript html javascript-events google-plus

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

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

我想知道,这只是用于语义,它是否会影响div的样式或事件句柄?我试图用JQuery点击模拟单击按钮,但它不起作用。

3 个答案:

答案 0 :(得分:25)

它告诉可访问性(和其他)软件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的click触发了jQuery处理程序,DOM0处理程序和DOM2处理程序(在撰写本文时!):

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

答案 1 :(得分:5)

辅助功能软件使用role属性来了解div的作用。有关详细信息,请参阅this page

答案 2 :(得分:5)

这只是语义。

建议您使用<button>标记使用原生HTML按钮。但是,如果您使用<a><div>标记进行自定义控制,则强烈建议您使用role='button'上的以下信息。

  1. 触发回复
  2. 如果要构建自定义控件,它们应该像按钮一样工作。如果单击该元素,则应触发响应。例如,此响应不会更改按钮的文本,即自定义控件。如果是,那么它不是一个按钮。

    1. 键盘焦点
    2. 这些用作按钮的自定义控件应该可以通过键盘选项卡进行聚焦也可以通过编程方式为屏幕阅读器进行聚焦。

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

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

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

        如果您使用的是tabindex="0"代码,则无需使用<a>,但如果您使用<span><div>等不可聚焦的代码来手动允许,则必须使用<a>对焦。

        另一个有用的提示是,如果您仍在使用构建自定义按钮,那么使用 function savefile(location, files, method_name) { var data = new FormData(); var webmethod = "../WebService.asmx/" + method-name; if (files.length > 0) { data.append("UploadedFile", files[0]); data.append("location", location); } var ajaxRequest = $.ajax({ type: "POST", url: webmethod, enctype: 'multipart/form-data', contentType: false, processData: false, data: data }); } <WebMethod(EnableSession:=True)> _ <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> Public Function savefile() As String Try Dim result As String = "" Dim pdf As String = "" If HttpContext.Current.Request.Files.AllKeys.Any() Then Dim httpPostedFile = HttpContext.Current.Request.Files("UploadedFile") If httpPostedFile IsNot Nothing Then Dim location = HttpContext.Current.Request("location") Dim extension As String = System.IO.Path.GetExtension(httpPostedFile.FileName) Dim filename_widthout_extension As String = httpPostedFile.FileName.Substring(0, httpPostedFile.FileName.Length - extension.Length) Dim file_name = httpPostedFile.FileName Dim fileSavePath = System.IO.Path.Combine(Server.MapPath(HttpContext.Current.Request("location").ToString), filename_widthout_extension + postfix + extension) result = (location + "/" + filename_widthout_extension + extension).ToString.Substring(2) httpPostedFile.SaveAs(fileSavePath) location = httpPostedFile.FileName End If Return "" Catch ex As Exception End Try End Function 标记要好得多,因为您可以避免使用onclick处理程序。