web-dev-qa-db-ja.com

role = buttonはどういう意味ですか？

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

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

私は知りたいのですが、これは単にセマンティックのためのもので、すべてがdivのスタイルまたはイベントハンドルに影響しますか？ JQueryクリックでボタンのクリックをシミュレートしようとしましたが、機能しません。

javascripthtmljavascript-eventsgoogle-plus
49
wong2

divの目的がアクセシビリティ（およびその他の）ソフトウェアに通知されます。詳細は draft role属性仕様 をご覧ください。

はい、それは意味論です。 clickイベントをボタンに送信should work。

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

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

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

現在（2年後）出力を複製できません。以前のバージョンの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リリース）。私はそれがbrowserであるとしか断定できず、どのブラウザを使用していたのかわかりません。 （今は、テストのために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'>
26
T.J. Crowder

ただのセマンティクスです。

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

  1. 応答をトリガーする

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

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

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

  1. 操作性

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

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

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

tabindex="0"タグは、<a>タグを使用する場合は不要ですが、<span>や<div>などのフォーカス不可タグを使用して手動でフォーカスを許可する場合は必須です。

別の便利なヒントは、カスタムボタンを作成する場合でも、onClickハンドラを回避できるため、<a>タグを使用することをお勧めします。

7
KannarKK

role属性は、divが何をするかを知るために、アクセシビリティソフトウェアによって使用されます。詳細については、 このページ を参照してください。

5
EdoDodo