Skip to content

Commit

Permalink
一括返還後の修正
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Aug 26, 2022
1 parent 44d8efa commit f4d21c1
Show file tree
Hide file tree
Showing 28 changed files with 53 additions and 47 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ _例 1: ARIA でラベルをつけずに作成したタブウィジェットの
```

_例 2: タブウィジェットはどのようにして視覚的にスタイルが設定されるのでしょうか。ユーザはそれを視覚的に認識するでしょう。しかし、支援技術向けに機械が読み取れる意味の情報はありません。_
![Screenshot of the tabs widget](/@api/deki/files/4926/=Tabs_Widget.png)
![Screenshot of the tabs widget](Tabs_Widget.png)

## ARIA

Expand Down
4 changes: 3 additions & 1 deletion files/ja/web/accessibility/aria/aria_live_regions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,15 @@ renderPlanetInfoButton.addEventListener('click', event => {
});
```

#### 結果

{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}

ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは `aria-live="polite"` を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。

ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:

![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png)
![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](Web_Accessibility_ARIA_ARIA_Live_Regions.png)

## 優先する専門のライブリージョンロール

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ original_slug: >-

ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、`aria-activedescendant` プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 `aria-activedescendant` プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。

> **Note:** ****: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の 1 つで、したがって規範的ではありません。
> **Note:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の 1 つで、したがって規範的ではありません。
###

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

その緊急性のために、アラートダイアログは常にモーダルでなければなりません。

> **Note:** ****: このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです([ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照)。
> **Note:** このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです([ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照)。
### ユーザーエージェントと支援技術への影響

Expand All @@ -35,7 +35,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

アラートダイアログが正しくラベル付けされ、ダイアログ内のコントロールにフォーカスが移動したら、スクリーンリーダーは、フォーカスが当たっている要素をアナウンスする前に、ダイアログのアクセス可能なロール、名前、およびオプションの説明をアナウンスするべきです。

> **Note:** ****: 支援技術がこの技術をどのように処理するかについては、意見が異なる場合があります。 上記の情報はそれらの意見の一つであり、したがって規範的なものではありません。
> **Note:** 支援技術がこの技術をどのように処理するかについては、意見が異なる場合があります。 上記の情報はそれらの意見の一つであり、したがって規範的なものではありません。
###

Expand Down
6 changes: 4 additions & 2 deletions files/ja/web/accessibility/aria/roles/button_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ tags:
<button id="saveChanges">Save</button>
```

> **Note:** ****: 意味論的な `<button>``<input type="button">` 要素の代わりに role="button" を使用する場合は、要素をフォーカス可能にし、ユーザーの入力を処理するためにクリック ({{event("click")}}) イベントと <kbd>Enter</kbd> キーと <kbd>Space</kbd> キーを含むキーダウン ({{event("keydown")}}) イベントのイベントハンドラーを定義する必要があります。 [公式の WAI-ARIA サンプルコード](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)を参照してください。
> **Note:** 意味論的な `<button>``<input type="button">` 要素の代わりに role="button" を使用する場合は、要素をフォーカス可能にし、ユーザーの入力を処理するためにクリック ({{event("click")}}) イベントと <kbd>Enter</kbd> キーと <kbd>Space</kbd> キーを含むキーダウン ({{event("keydown")}}) イベントのイベントハンドラーを定義する必要があります。 [公式の WAI-ARIA サンプルコード](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)を参照してください。
## 説明

Expand Down Expand Up @@ -146,6 +146,8 @@ function handleCommand(event) {
}
```

####

{{EmbedLiveSample("Basic_button_example")}}

### トグルボタンの例
Expand Down Expand Up @@ -225,7 +227,7 @@ function toggleButton(element) {

ボタンはインタラクティブなコントロールであるため、フォーカス可能です。 ボタン (`button`) ロールがそれ自体ではフォーカスできない要素 (`<span>``<div>``<p>` など) に追加された場合、ボタンをフォーカス可能にするには `tabindex` 属性を使用する必要があります。

> **Warning:** **警告:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用してトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、`role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラーを追加する必要もあります。
> **Warning:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用してトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、`role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラーを追加する必要もあります。
ボタン (`button`) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または `aria-label` の値、または `aria-labelledby` 属性によって参照される要素、または含まれている場合は説明のいずれかです。

Expand Down
2 changes: 2 additions & 0 deletions files/ja/web/accessibility/aria/roles/checkbox_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,8 @@ function changeCheckbox(event) {
}
```

#### 結果

{{EmbedLiveSample("Examples", 230, 250)}}

## アクセシビリティの懸念
Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/roles/dialog_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role

ダイアログが正しくラベル付けされ、フォーカスがダイアログ内の要素 (多くの場合、ボタンなどのインタラクティブな要素) に移動された時、スクリーンリーダーは、フォーカスされた要素をアナウンスするとともに、ダイアログのアクセス可能なロール、名前、および任意で説明をアナウンスするべきです。

> **Note:** ****: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があり、アナウンスの順序は使用する支援技術によって異なる場合があります。 上記の情報はこれらの意見の 1 つであり、したがって規範的ではありません。
> **Note:** 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があり、アナウンスの順序は使用する支援技術によって異なる場合があります。 上記の情報はこれらの意見の 1 つであり、したがって規範的ではありません。
##

Expand Down Expand Up @@ -109,7 +109,7 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role

###

> **Note:** ****: キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。
> **Note:** キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。
## 仕様

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/figure_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ ARIA の図表 (`figure`) ロールは、適切な意味論がまだ存在しな

一般的には、本文から図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。

> **Note:** ****: 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 詳しくは、[ベストプラクティス](#best_practices)を参照してください。
> **Note:** 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション ({{htmlelement("figure")}} と {{htmlelement("figcaption")}}) をマークアップするべきです。 詳しくは、[ベストプラクティス](#best_practices)を参照してください。
### 関連する WAI-ARIA のロール、ステート、プロパティ

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/group_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role
- スクリーンリーダーは、フォーカスが最初にその中のコントロールに着くとグループをアナウンスし、もし [`aria-describedby`](http://www.w3.org/TR/wai-aria/#aria-describedby) が設定されていれば、その説明が読み上げられます。 これに続いて、フォーカスされたコントロールをアナウンスすることができます。
- スクリーン拡大鏡でグループが拡大されることがあります。

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

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/link_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

`link` ロールは、アプリケーションまたは外部にあるリソースへのハイパーリンクを作成する要素を識別するために使用されます。 このロールが要素に追加されると、タブを使用してリンクへのフォーカスを変更したり、リンクの実行にスペースやエンターを使用することができます。

> **Note:** ****: 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、`link` ロールではなくネイティブの {{HTMLElement("a")}} 要素を使用することをお勧めします。 ネイティブ {{HTMLElement("a")}} 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。
> **Note:** 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、`link` ロールではなくネイティブの {{HTMLElement("a")}} 要素を使用することをお勧めします。 ネイティブ {{HTMLElement("a")}} 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。
[`tabindex`](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex) 属性は、タブの順序で要素の位置を直接指定するために、このロールで任意に使用できます。

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/roles/list_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA
</ol>
```

> **Note:** ****: ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
> **Note:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
余談ですが、意味論的な HTML 要素である `ol` または `ul` を使用してプレゼンテーション ([`presentation`](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role)) ロールを適用する場合、ARIA ではリスト項目 (`listitem`) 要素に親のリスト (`list`) 要素が必須であるため、各子 `li` 要素はプレゼンテーション (`presentation`) ロールを継承することに注意してください。 そのため、`li` 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの `li` 要素の内部に含まれる要素は、支援技術からは見えることになります。

> **Note:** ****: タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
> **Note:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
## 仕様

Expand Down
6 changes: 3 additions & 3 deletions files/ja/web/accessibility/aria/roles/listitem_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ ARIA のリスト項目 (`listitem`) ロールは、項目のリスト内の項

リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。

> **Warning:** **警告**: 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
> **Warning:** 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、[ベストプラクティス](#best_practices)を参照してください。
### 関連する WAI-ARIA のロール、ステート、プロパティ

Expand Down Expand Up @@ -68,9 +68,9 @@ ARIA のリスト項目 (`listitem`) ロールは、項目のリスト内の項
</ol>
```

> **Note:** ****: ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
> **Note:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
> **Note:** ****: タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
> **Note:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。
## 仕様

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/log_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role
- `aria-live="assertive"` が設定されておらず、ユーザーが中断されている場合を除き、スクリーンリーダーは、ユーザーがアイドル状態のときにログ内の変更をアナウンスするべきです。
- スクリーン拡大鏡は、ログ更新が発生したことを視覚的に示すことができます。

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

Expand Down
Loading

0 comments on commit f4d21c1

Please sign in to comment.