diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web/accessibility/aria/roles | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip |
unslug ja: move
Diffstat (limited to 'files/ja/web/accessibility/aria/roles')
-rw-r--r-- | files/ja/web/accessibility/aria/roles/button_role/index.html | 123 | ||||
-rw-r--r-- | files/ja/web/accessibility/aria/roles/checkbox_role/index.html | 63 |
2 files changed, 186 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/roles/button_role/index.html b/files/ja/web/accessibility/aria/roles/button_role/index.html new file mode 100644 index 0000000000..b17fe32b00 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/button_role/index.html @@ -0,0 +1,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><button></code>、<code><input type="button" /></code>、<code><input type="submit" /></code>、<code><input type="reset" /></code>や<code><input type="image" /></code>) を使うことをおすすめします。ネイティブ HTML ボタンは古いユーザーエージェントや支援技術から広くサポートされています。ネイティブ HTML ボタンは追加のカスタマイズなしに、キーボードやフォーカスの要件をサポートしています。</div> + +<h2 id="Keyboard_and_focus" name="Keyboard_and_focus">キーボードとフォーカス</h2> + +<p>ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし <code>button</code> ロールがそれ自身ではフォーカス可能でない要素 (<code><span></code>、<code><div></code> もしくは <code><p></code> のような) に追加されたら、<code>tabindex</code> 属性がフォーカス可能なボタンを作るために使用されなければなりません。</p> + +<p>ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <code><button></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><span></code> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために <code>tabindex</code> 属性が必要です。このスニペットは、 <code><span></code> 要素をボタンのように見せるための CSS スタイルが提供され、 <code>handleBtnClick</code> と <code>handleBtnKeyPress</code> は、クリックされたときや <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。</p> + +<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span> +</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"><button type="button" aria-pressed="false" onclick="handleBtnClick(event)"> + Native button toggle +</button> + +<span role="button" tabindex="0" + aria-pressed="false" onclick="handleBtnClick(event)" + onKeyPress="handleBtnKeyPress(event)"> + Span button toggle +</span></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> diff --git a/files/ja/web/accessibility/aria/roles/checkbox_role/index.html b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..13f3fa4b10 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,63 @@ +--- +title: チェックボックスロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role +tags: + - ARIA + - Accessibility + - NeedsContent + - Role(2) + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +<p><span class="seoSummary"><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">チェックボックス</a>ロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が <code>role="checkbox"</code> を使っていたら 、支援技術へチェックボックスのステートを公開するために<code>aria-checked</code> 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが2つののみ( "checked" もしくは "not checked" )をもてる一方で、<code>role=checkbox</code> 要素は <code>aria-checked</code> を通して3つのステートを公開できます:</span></p> + +<ul> + <li>aria-checked="true": チェックボックスはチェックされています</li> + <li>aria-checked="false": チェックボックスはチェックされていません</li> + <li>aria-checked="mixed": チェックボックスは部分的にチェックされています</li> +</ul> + +<p>開発者はチェックボックスが作動した際に、 <code>aria-checked</code> 属性を動的に変更する必要があります。</p> + +<p>チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。</p> + +<h3 id="ユーザーエージェントと支援技術への影響">ユーザーエージェントと支援技術への影響 </h3> + +<p><code>チェックボックス</code>ロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:</p> + +<ul> + <li>チェックボックスを持っている要素を、オペレーティングシステムのアクセシビリティAPIへ公開します。</li> + <li>aria-checked の値が変わった際に、アクセシブルなす~手との変更イベントを送信します。</li> +</ul> + +<p>支援技術製品は次のように振る舞わなければなりません:</p> + +<ul> + <li>スクリーンリーダーは要素をチェックボックスとしてアナウンスしなければなりません。またオプションでチェックボックスを動作させる方法を提供します。</li> +</ul> + +<div class="note"><strong>注記:</strong> 支援技術がこの技術をどう扱うべきかについて、意見は分かれています。上記の情報はこれらの意見の一つであり、標準的なものではありません。</div> + +<h3 id="例">例</h3> + +<h4 id="例1_ARIA_によるチェックボックスロールの追加">例1: ARIA によるチェックボックスロールの追加</h4> + +<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> +<label for="chk1">Remember my preferences</label></pre> + +<h3 id="注記">注記 </h3> + +<h3 id="使用された_ARIA_属性">使用された ARIA 属性</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked">aria-checked</a></li> +</ul> + +<h3 id="関連する_ARIA_技術">関連する ARIA 技術</h3> + +<h3 id="互換性">互換性</h3> + +<p class="comment">TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加</p> + +<h3 id="その他のリソース">その他のリソース</h3> |