From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../aria/roles/button_role/index.html | 123 +++++++++++++++++++++ .../aria/roles/checkbox_role/index.html | 63 +++++++++++ 2 files changed, 186 insertions(+) create mode 100644 files/ja/web/accessibility/aria/roles/button_role/index.html create mode 100644 files/ja/web/accessibility/aria/roles/checkbox_role/index.html (limited to 'files/ja/web/accessibility/aria/roles') 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 +--- +

ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。role="button" だけで、どんな要素 (例えば {{HTMLElement("p")}}、{{HTMLElement("span")}} や {{HTMLElement("div")}}) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために aria-pressed と組み合わせて使うことが出来ます。

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

キーボードとフォーカス

+ +

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

+ +

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

+ +

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

+ +

トグルボタン

+ +

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

+ + + +

ボタンのラベリング

+ +

ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は aria-label または aria-labelledby 属性を通して提供することができます。

+ +

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

+ +

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

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

例

+ +

ARIA ベーシックボタン

+ +

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

+ +
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
+
+ +

ARIA トグルボタン

+ +

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

+ +

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>
+ +

CSS

+ +
button,
+[role="button"] {
+    padding: 3px;
+    border: 1px solid #CCC;
+}
+
+button:active,
+button:focus,
+[role="button"][aria-pressed="true"] {
+    border: 2px solid #000;
+}
+
+ +

JavaScript

+ +
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);
+}
+ +

結果

+ +

{{EmbedLiveSample('ARIA_Toggle_Button')}}

+ +

注記

+ +

使用された ARIA 属性

+ + + +

その他のリソース

+ + 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 +--- +

チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が role="checkbox" を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox 要素は aria-checked を通して３つのステートを公開できます:

+ + + +

開発者はチェックボックスが作動した際に、 aria-checked 属性を動的に変更する必要があります。

+ +

チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。

+ +

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

+ +

チェックボックスロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:

+ + + +

支援技術製品は次のように振る舞わなければなりません:

+ + + +
注記: 支援技術がこの技術をどう扱うべきかについて、意見は分かれています。上記の情報はこれらの意見の一つであり、標準的なものではありません。
+ +

例

+ +

例1: ARIA によるチェックボックスロールの追加

+ +
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
+<label for="chk1">Remember my preferences</label>
+ +

注記 

+ +

使用された ARIA 属性

+ + + +

関連する ARIA 技術

+ +

互換性

+ +

TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加

+ +

その他のリソース

-- cgit v1.2.3-54-g00ecf