web-dev-qa-db-ja.com

<button>にrole = "button"が必要ですか？

button要素を使用するBootstrapのすべての例で、次のようなrole="button"（およびtype="button"）が含まれていることに気付きました。

<div class="dropdown">
    <button id="dLabel" type="button" role="button" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false">
        Dropdown trigger <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
</div>

アクセシビリティソフトウェアは、button要素がボタンとして機能することを意図していることをすでに知っていませんか？コードにrole="button"および/またはtype="button"を含める必要がある理由はありますか？

htmltwitter-bootstrapaccessibilitywai-aria
13
QuasarDonkey

多くのHTML5要素にはdefault暗黙的ARIAセマンティクスが付属しており、これらのデフォルト値を明示的に設定するのは " 不要で非推奨 "です。

button element を見ると、デフォルトで button role があることがわかります。

したがって、設定role="button"は「推奨されません」ですが、許可されています。 mightは、HTML5ではなくWAI-ARIAをサポートする古いユーザーエージェントを支援します。

25
unor

TL; DR指定されたケースでは、動作するため、role=buttonを指定する必要がありますトグルボタンとして。 type=buttonも使用する必要があります。

すべてのBootstrapボタンはrole = buttonを使用しません

Bootstrapの例のすべてのボタンがrole=buttonを使用しているという質問の情報は正しくありません。トグルボタンとして論理的に動作するボタンのみが、そのようにラベル付けされます。

ボタン要素でrole = buttonを使用する

ボタン要素には強力なネイティブセマンティクスがあるため、一般にrole=buttonを使用する必要はありません。さらに、 W3CのHTML5仕様のARIA使用上の注意 によると：

ほとんどの場合、デフォルトの暗黙的なARIAセマンティクスに一致するARIAロールやaria- *属性を設定する必要はなく、これらのプロパティはブラウザによってすでに設定されているため、お勧めしません。

与えられた例の場合であるトグルボタンの1つの例外があります。

W3Cの推奨事項の表によると HTMLでWAI-ARIAを使用 ：

HTML言語機能：ボタン

デフォルトのARIAセマンティクス：role = button

作成者はデフォルトのARIAセマンティクスを明示的に定義する必要がありますか？いいえ（注0a）

注0a：はいaria-pressed属性がボタン要素で使用されている場合

したがって、トグルボタンの役割を設定する必要がありますが、そうでない場合は設定しないでください。

ボタンでtype = buttonを使用する

質問にはtype=buttonも記載されているので、詳しく説明します。 W3CのHTML5仕様のボタンに関するセクション によると、ボタン要素のタイプに欠落しているデフォルト値はtype=submitであり、フォーム所有者が存在する場合、そのアクティブ化動作はフォーム所有者を送信することです。 type=buttonに関連するアクティベーション動作はありません。

したがって、type=buttonは、指定されたケースに指定する必要があります。

15
QuasarDonkey

<button>タグは、次の3つのいずれかになります。

  1. クリックすると指定したことを実行する通常のボタン（type = button）。
  2. クリックするとフォームを送信する送信ボタン（type = submit）。
  3. クリックするとフォームを初期値にリセットするリセットボタン（type = reset）。

ブラウザごとにボタンのデフォルトが異なるため、使用するタイプを指定することをお勧めします。

http://www.w3schools.com/tags/att_button_type.asp

この役割は含まれていませんが、アクセス可能なソフトウェアには適しています。

したがって、それらを含める必要がありますか？いいえ、含めませんが、一般的に含めることをお勧めします。

2
MattD

ここ 言う：

注：ネイティブHTMLボタンは、古いユーザーエージェントと支援技術によってより広くサポートされているため、可能な場合は、ボタンの役割ではなくネイティブHTMLボタン（、および）を使用することをお勧めします。ネイティブHTMLボタンは、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートします。

ユーザーエージェントと支援技術への影響の可能性

ボタンの役割を使用する場合、ユーザーエージェントは、オペレーティングシステムのアクセシビリティAPIでボタンコントロールとして要素を公開する必要があります。スクリーンリーダーは、要素をボタンとしてアナウンスし、アクセス可能な名前を説明する必要があります。音声認識ソフトウェアでは、「クリック」の後にボタンのアクセシブルな名前を入力して、ボタンをアクティブにする必要があります。注：支援技術がこの手法をどのように処理するかについては、意見が異なる場合があります。上記の情報はそれらの意見の1つであり、したがって規範的ではありません。

次に、それを追加する必要があります。それをユーザーに公開するため。しかし、規範的ではありません。

1
rnrneverdies

W3C Html5ボタン によると

欠落している値のデフォルトは、送信ボタンの状態です。

Type属性がSubmitButton状態の場合、要素は具体的には送信ボタンです。

ボタンを使用してフォームを送信する場合を除き、W3C仕様に記載されているように、これを省略してtype="button"を明示的に設定する必要があります。これは送信ボタンとして機能し、フォームを送信します。不要な送信を回避するには、type="button"を<button>sに明示的に設定する必要があります。

ブートストラップのボタンのほとんどはjavascript関数または同様の動作をトリガーするためのものであるため、コードのコピーアンドペースト時の偶発的な意図しない送信動作を回避するために、正規化の名の下に、type="button"およびrole="button"属性が追加されます。 <button>

0
Cemal

role = "button"

これはBootstrapでは必須ではありません

0
Milan Panigrahi

要件と推奨事項は、「ARIAinHTML」でより徹底的に文書化されています。

次の表は、HTMLドキュメントでARIAマークアップを使用するための要素ごとの標準的なドキュメント準拠要件を示し、HTML Accessibility API Mappings 1.0 [html-aam-1.0]仕様で定義されているHTML要素に適用される暗黙的なARIAセマンティクスについて説明しています。

https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html

0
Mike