files/ja/web/accessibility/aria/roles/button_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

---
title: ボタンロールの使用
slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
tags:
  - ARIA
  - Accessibility
  - NeedsContent
translation_of: Web/Accessibility/ARIA/Roles/button_role
---
<p><strong><a href="https://www.w3.org/TR/wai-aria/roles#button">ボタン</a></strong>ロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。<code>role="button"</code> だけで、どんな要素 (例えば {{HTMLElement("p")}}、{{HTMLElement("span")}} や {{HTMLElement("div")}}) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために <code>aria-pressed</code> と組み合わせて使うことが出来ます。</p>

<div class="note"><strong>注記: </strong>できれば、<code>button</code> ロールよりもネイティブ HTML ボタン (<code>&lt;button&gt;</code>、<code>&lt;input type="button" /&gt;</code>、<code>&lt;input type="submit" /&gt;</code>、<code>&lt;input type="reset" /&gt;</code>や<code>&lt;input type="image" /&gt;</code>) を使うことをおすすめします。ネイティブ HTML ボタンは古いユーザーエージェントや支援技術から広くサポートされています。ネイティブ HTML ボタンは追加のカスタマイズなしに、キーボードやフォーカスの要件をサポートしています。</div>

<h2 id="Keyboard_and_focus" name="Keyboard_and_focus">キーボードとフォーカス</h2>

<p>ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし <code>button</code> ロールがそれ自身ではフォーカス可能でない要素 (<code>&lt;span&gt;</code>、<code>&lt;div&gt;</code> もしくは <code>&lt;p&gt;</code> のような) に追加されたら、<code>tabindex</code> 属性がフォーカス可能なボタンを作るために使用されなければなりません。</p>

<p>ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <code>&lt;button&gt;</code> 要素では、ボタンの <code>onclick</code> イベントはマウスクリックとフォーカスされている間に <kbd>Space</kbd> もしくは <kbd>Enter</kbd> が押されたときに発火します。しかし他のタグがカスタムボタンを作成するために使用されていたら、<code>role="button"</code> が使われていたとしても <code>onclick</code> イベントはマウスカーソルにクリックされたときにだけに発火するでしょう。このため、開発者は <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーが押されたときにトリガーされるために別のキーイベントハンドラを要素に追加しなければなりません。</p>

<p class="warning"><strong>警告:</strong> リンクをボタンロールによりマークアップする際は注意してください。ボタンは <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーを使ってトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーが期待されます。 言い換えれば、リンクがボタンのように振る舞うようときは、<code>role="button"</code> が追加されるだけでは不十分です。ネイティブのボタンと矛盾しないために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラを追加する必要があります。</p>

<h2 id="Toggle_buttons" name="Toggle_buttons">トグルボタン</h2>

<p>role="button" を使う利点は、トグルボタンの作成が許可されていることです。トグルボタンには、押された状態と押されていない状態の2つの状態があります。ボタンがトグルボタンであるかどうかは、 <code>button</code> ロールに加えて <code>aria-pressed</code> 属性で指定することができます。</p>

<ul>
 <li><code>aria-pressed</code> が使用されていない場合、ボタンはトグルボタンではありません。</li>
 <li><code>aria-pressed="false"</code> が使用されている場合、ボタンは現在押されていないトグルボタンです。</li>
 <li><code><code>aria-pressed="true"</code></code> が使用されている場合、ボタンは現在押されているトグルボタンです。</li>
 <li><code>aria-pressed="mixed"</code> が使用されている場合、ボタンは部分的に押したとみなされます。</li>
</ul>

<h2 id="Labeling_buttons" name="Labeling_buttons">ボタンのラベリング</h2>

<p>ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> または <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性を通して提供することができます。</p>

<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2>

<p><code>button</code> ロールが使用されているとき、ユーザーエージェントはその要素をオペレーティングシステムのアクセシビリティAPIにおけるボタンコントロールとして公開すべきです。スクリーンリーダーはその要素をボタンとして通知し、そのアクセシブルな名前を言述すべきです。音声認識ソフトウェアは「クリック」に続けてボタンのアクセシブルな名前を発声することでボタンを有効にすべきです。</p>

<div class="note"><strong>Note:</strong> 支援技術がどのようにこの手法を扱うべきかについての意見は異なる場合があります。上記の情報はこれらの意見のひとつであり、従って規範的ではありません。</div>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="ARIA_Basic_Button" name="ARIA_Basic_Button">ARIA ベーシックボタン</h3>

<p>以下のスニペットでは、 span 要素に <code>button</code> ロールが与えられています。 <code>&lt;span&gt;</code> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために <code>tabindex</code> 属性が必要です。このスニペットは、 <code>&lt;span&gt;</code> 要素をボタンのように見せるための CSS スタイルが提供され、 <code>handleBtnClick</code> と <code>handleBtnKeyPress</code> は、クリックされたときや <kbd>Space</kbd>  もしくは <kbd>Enter</kbd>  キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。</p>

<pre class="brush: html">&lt;span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()"&gt;Save&lt;/span&gt;
</pre>

<h3 id="ARIA_Toggle_Button" name="ARIA_Toggle_Button">ARIA トグルボタン</h3>

<p>このスニペットでは {{HTMLElement("span")}} 要素が <code>button</code> ロールと <code>aria-pressed</code> 属性によってトグルボタンに変更されています。ボタンが作動したとき、 <code>aria-pressed</code> の値を <code>true</code> と <code>false</code> で切り替え続けます。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;button type="button" aria-pressed="false" onclick="handleBtnClick(event)"&gt;
  Native button toggle
&lt;/button&gt;

&lt;span role="button" tabindex="0"
 aria-pressed="false" onclick="handleBtnClick(event)"
 onKeyPress="handleBtnKeyPress(event)"&gt;
  Span button toggle
&lt;/span&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">button,
[role="button"] {
    padding: 3px;
    border: 1px solid #CCC;
}

button:active,
button:focus,
[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
}
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">function handleBtnClick(event) {
  toggleButton(event.target);
}

function handleBtnKeyPress(event) {
  // スペースかエンターが押されているかを確認
  if (event.key === " " || event.key === "Enter") {
    // スペースが押されたときにスクロールさせないためにデフォルトの振る舞いをキャンセル
    event.preventDefault();
    toggleButton(event.target);
  }
}

function toggleButton(element) {
  // ボタンが押されているかを確認
  var pressed = (element.getAttribute("aria-pressed") === "true");
  // aria-pressed をの状態を反転
  element.setAttribute("aria-pressed", !pressed);
}</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample('ARIA_Toggle_Button')}}</p>

<h2 id="Notes" name="Notes">注記</h2>

<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3>

<ul>
 <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li>
 <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a></code></li>
</ul>

<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3>

<ul>
 <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Strong native semantics in HTML5</a></li>
 <li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li>
</ul>