69

Google+ プロジェクトのページで、ボタンはすべて次のような div で作成されていることがわかりました。

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

知りたいのですが、これはセマンティックな目的のためだけですか、それとも のスタイルやイベント処理に影響し<div>ますか?

ボタンの「クリック」を jQueryclickイベントでシミュレートしようとしましたが、うまくいきませんでした。

4

4 に答える 4

32

アクセシビリティ (およびその他の) ソフトウェアに、その目的が何であるかを伝えますdiv。詳細については、ドラフトrole属性の仕様を参照してください。

はい、それは単なるセマンティックです。clickボタンへのイベントの送信は機能するはずです。

この回答の以前のバージョン (2011 年に戻る) は次のように述べています。

...しかし、jQuery のclick関数はそれを行いません。jQueryで要素に接続されたイベント ハンドラーのみをトリガーし、他の方法で接続されたハンドラーはトリガーしません。

...そして、以下のサンプルコードと出力を提供しました。

現在 (2 年後) に出力を複製することはできません。以前のバージョンの jQuery に戻っても、それらはすべて jQuery ハンドラー、DOM0 ハンドラー、および DOM2 ハンドラーをトリガーします。click実際のクリックと jQuery の関数の順序は必ずしも同じではありません。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'>

于 2011-07-03T10:43:14.783 に答える
16

それは単なるセマンティクスです。

<button>タグを使用してネイティブの HTML ボタンを使用することをお勧めします。<a>ただし、または<div>タグを使用したカスタム コントロールがある場合は、 に関する次の情報をrole='button'強くお勧めします。

  1. 応答をトリガーする

カスタム コントロールを作成している場合は、ボタンのように機能する必要があります。要素をクリックすると、応答がトリガーされます。たとえば、この応答は、ボタン、つまりカスタム コントロールのテキストを変更していません。そうであれば、それはボタンではありません。

  1. キーボードフォーカス

ボタンとして機能するこれらのカスタム コントロールは、キーボードを使用してタブ移動することでフォーカスできる必要があり、スクリーン リーダー用にプログラムでフォーカスできる必要があります。

  1. 操作性

カスタム コントロールは、イベントonclickと同様に実装する必要がありonKeyDownます。ボタンはスペースバーでアクティブにできます。したがって、ロールをカスタム コントロールに追加する場合は、これらのイベントを自分で処理する必要があります。そうでなければ、セマンティックはその意味を失います。スクリーン リーダーのユーザーは、スペースバーを使用してボタンを有効にしようとしますが、できません。

を使用したカスタム コントロールの標準構文は次のとおりですrole='button'。

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

tabindex="0"タグを使用している場合は必要ありませんが、<a>フォーカスできないタグを使用している場合<span>や<div>手動でフォーカスを許可する場合は必要です。

もう 1 つの便利なヒントは、まだカスタム ボタンを作成することに頼っている場合は<a>、onclick ハンドラーを回避できるため、タグを使用する方がはるかに優れているということです。

于 2015-11-29T12:51:35.763 に答える
5

このrole属性は、ユーザー補助ソフトウェアが何をするかを知るために使用されますdiv。詳細については、このページを参照してください。

于 2011-07-03T10:46:05.260 に答える