[jp-sync] Sync JP docs: badge/button-group/avatar accessibility (EN PR #526)

docs/xplat/src/content/jp/components/inputs/badge.mdx

@@ -898,19 +898,49 @@ igc-badge::part(base) {
 
 ## アクセシビリティ
 
-{Platform} Badge は視覚的なステータスを伝えるものであり、そのステータスが重要な場合は、意味のあるテキストまたは周囲のアクセシブルなコンテキストを持つ必要があります。
+{Platform} Badge は、短いカウント、状態、または通知を伝える非インタラクティブなステータス表示です。
 
 ### キーボード インタラクション
 
-バッジは視覚的なステータス インジケーターであり、インタラクティブなキーボード操作は提供しません。バッジが装飾する要素のフォーカス動作に従ってアクセスされます。
+バッジはフォーカスを受け取らず、キーボード入力を処理せず、コンポーネントのインタラクション イベントを公開しません。
+
+| キー | アクション |
+| -- | -- |
+| n/a | バッジはキーボードによるインタラクティブ操作に対応していません。 |
 
 ### スクリーン リーダー / ARIA
 
-バッジが支援技術では他に得られない情報を伝える場合は、周囲のコンポーネントに意味のある表示コンテンツまたはアクセシブルなラベルを提供してください。特定の周囲のコントロールについて、実際のアナウンス内容を確認してください。
+バッジ ホストは `role="status"` を使用して、コンテンツをステータス情報として公開します。
+
+<PlatformBlock for="WebComponents, React, Blazor">
+
+- コンポーネントは `aria-roledescription` を設定して、バッジとその現在の `variant` を識別します。
+- テキストのないバッジ (`dot` バッジを含む) が支援技術では他に得られないステータスを伝える場合は、`aria-label` を追加してください。
+- バッジのコンテンツまたはアクセシブルなラベルは、装飾されるアイテムに固有のものにしてください。例えば、単に `3` ではなく `3 件の未読メッセージ` のように記述してください。
+
+</PlatformBlock>
+
+<PlatformBlock for="Angular">
+
+- コンポーネントは `role="status"` と `aria-label="badge"` で初期化されます。
+- Angular はバッジの種類とそのアイコンまたは値から `aria-roledescription` を導出します。`badge` が意味のあるアクセシブル名でない場合は、`label` 入力を設定してください。
+- テキストのないバッジや `dot` バッジのステータスが支援技術では他に得られない場合は、意味のある `label` を追加してください。
+
+</PlatformBlock>
 
 ### アクセシビリティ準拠
 
-このコンポーネントのアクセシビリティ準拠は、製品の公式アクセシビリティ ステートメントおよびレンダリングされる使用状況のコンテキストに対して検証する必要があります。
+インフラジスティックスは、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における {ProductName} のアクセシビリティ サポートを文書化しています。
+
+| 基準 | コンポーネントの準拠方法 |
+| -- | -- |
+| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | バッジはセマンティックな `status` ロールを公開します。xplat 実装は現在のバリアントに基づくロールの説明も公開します。Angular はバッジの種類とコンテンツに基づいてアクセシブルなラベルとロールの説明を公開します。 |
+
+ユーザー側の責任:
+
+- バッジに意味のあるテキストがない場合、特に `dot` バッジの場合は、ステータスを説明するアクセシブルな名前を提供してください。
+- バッジの色のみをステータスの表示手段として使用しないでください。テキスト、アイコン、または他のアクセシブルな手掛かりと組み合わせてください。
+- テーマ スタイルをオーバーライドする際は、バッジの前景色と背景色のコントラストを十分に確保してください。
 
 ## トラブルシューティング
 

docs/xplat/src/content/jp/components/inputs/button-group.mdx

@@ -44,7 +44,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.
 
 </PlatformBlock>
 
-## アナトミー
+## 構造
 
 {Platform} ボタン グループは、関連するトグル ボタンを共有コンテナーと個々のボタン アイテムを持つ単一グループに整理します。
 
@@ -53,7 +53,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.
   name="Button Group"
   description="ボタン グループ コンポーネントは、関連するトグル ボタンを共有コンテナー内に整理し、ユーザーが単一または複数の選択を行えるようにします。"
   src={buttonGroupAnatomy.src}
-  alt="共有コンテナー、ボタン アイコン、ラベルを示すボタン グループのアナトミー"
+  alt="共有コンテナー、ボタン アイコン、ラベルを示すボタン グループの構造"
 />
 
 <style>{`
@@ -79,17 +79,17 @@ Button Group
     └── Label
 ```
 
-## はじめに
+## 作業の開始
 
 <PlatformBlock for="Angular">
 
-{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} はじめに](/general/getting-started) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
+{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} の作業の開始](/general/getting-started) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
 
 </PlatformBlock>
 
 <PlatformBlock for="React,WebComponents,Blazor">
 
-{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} はじめに](../general-getting-started.mdx) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
+{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} の作業の開始](../general-getting-started.mdx) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
 
 </PlatformBlock>
 
@@ -166,7 +166,7 @@ import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 ```
 
-Ignite UI for Angular の完全な紹介については、[**はじめに**](/general/getting-started) トピックをお読みください。
+Ignite UI for Angular の完全な紹介については、[**作業の開始**](/general/getting-started) トピックをお読みください。
 
 </PlatformBlock>
 
@@ -668,7 +668,7 @@ igx-buttongroup {
 
 </PlatformBlock>
 
-### Do/Don't
+### 使用すべき場合と使用すべきでない場合
 
 **使用する場合:** ユーザーが 1 つまたは複数のオプションを選択できる関連するトグル アクションを整理するためにボタン グループを使用します。
 
@@ -701,7 +701,9 @@ igx-buttongroup {
 
 ## プロパティ
 
-ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。
+ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。
+
+プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。
 
 | 名前 | タイプ | デフォルト | 説明 |
 | --- | --- | --- | --- |
@@ -950,24 +952,55 @@ igc-toggle-button::part(toggle) {
 
 ## アクセシビリティ
 
-ボタン グループは、各ボタンのインタラクションとアクセシブルな状態を保持しながら、関連するトグル ボタンをグループ化します。すべてのボタンに意味のあるコンテンツを提供し、意図するインタラクションに合った選択モードを選択してください。
+{Platform} Button Group は、関連するトグル ボタンを整理しながら、各ボタンの選択状態と無効状態を公開します。
 
 ### キーボード インタラクション
 
-{Platform} ボタン グループは、含まれるトグル ボタンのキーボード動作に従います。含まれるボタンが提供するキーボード インタラクションを使用し、設定された選択モードのフォーカス順序と選択動作を確認してください。
+ボタン グループは、内包するトグル ボタンにキーボード インタラクションを委譲します。各トグル ボタンはネイティブ ボタンをレンダリングするため、標準のボタン キーボード動作によってフォーカスされたアイテムがアクティブ化され、設定された選択モードに従って選択状態が更新されます。
 
-| インタラクション | 期待される動作 |
+| キー | アクション |
 | --- | --- |
-| キーボード フォーカス | 含まれるトグル ボタンには、それぞれのフォーカス動作に従ってアクセスできます。 |
-| トグル ボタン インタラクション | フォーカスされたボタンは、設定された選択モードに従って選択状態を変更します。 |
+| Tab / Shift+Tab | グループ内の次または前の有効なトグル ボタンにフォーカスを移動します。 |
+| Enter / Space | フォーカスされたトグル ボタンをアクティブ化し、設定された選択モードに従って選択または選択解除します。 |
+
+ボタン グループが無効の場合、内包するトグル ボタンも無効になり、キーボードによるインタラクティブ操作に対応しなくなります。
 
 ### スクリーン リーダー / ARIA
 
-支援技術のユーザーが各オプションとその選択状態を識別できるよう、すべての {Platform} トグル ボタンに明確なラベルを使用してください。アイコンがアクセシブルな名前を提供しない場合は、ボタンに適切なテキスト ラベルまたはアクセシブルな名前を提供してください。
+ボタン グループはグループの関係を公開し、各トグル ボタンはネイティブ ボタン セマンティクスを通じてその状態を公開します。
+
+<PlatformBlock for="WebComponents, React, Blazor">
+
+- グループ コンテナーは `role="group"` を使用し、`aria-disabled` を通じてグループの無効状態を反映します。
+- 各トグル ボタンは、選択状態に `aria-pressed`、無効状態に `aria-disabled` を持つネイティブ `button` をレンダリングします。
+- グループはユーザーの操作によりトグル ボタンの選択状態が変化した後、`igcSelect` および `igcDeselect` を発行します。イベントの詳細はトグル ボタンの `value` です。
+- すべてのトグル ボタンに表示テキストまたは `aria-label` を提供してください。特にアイコンのみのコントロールでは重要です。
+
+</PlatformBlock>
+
+<PlatformBlock for="Angular">
+
+- グループ コンテナーは `role="group"` を使用します。
+- Angular は選択状態が変化すると各内包ボタンの `aria-pressed` 値を更新し、グループが無効の場合は子ボタンを無効にします。
+- グループはユーザーが選択を変更すると `selected` および `deselected` を発行します。各イベントには選択されたトグル ボタンとそのインデックスが含まれます。
+- すべてのアイコンのみのボタンに表示テキスト、`igxLabel`、または他のアクセシブルな名前を提供してください。
+
+</PlatformBlock>
+
+### アクセシビリティ準拠
+
+インフラジスティックスは、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における {ProductName} のアクセシビリティ サポートを文書化しています。
+
+| 基準 | コンポーネントの準拠方法 |
+| -- | -- |
+| [2.1.1 キーボード](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | 各トグル ボタンはネイティブ ボタンを使用するため、グループの選択動作は標準のボタン キーボード アクティベーションを通じて利用できます。 |
+| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | グループは `role="group"` を公開します。トグル ボタンはネイティブ ボタン セマンティクスを公開し、選択状態が変化すると `aria-pressed` を更新します。xplat トグル ボタンは `aria-disabled` も公開します。 |
 
-### アクセシビリティ コンプライアンス
+ユーザー側の責任:
 
-レンダリングされた {Platform} ボタン グループをアプリケーションのアクセシビリティ要件と照らし合わせて確認してください。ターゲット フレームワークで設定された選択モードのボタン名、フォーカス順序、選択状態のアナウンス、動作を確認してください。
+- 各トグル ボタンに明確な表示ラベルまたはアクセシブルな名前を付けてください。特にアイコンのみのボタンでは重要です。
+- グループの選択モードをコントロールの目的に合わせて設定し、ユーザーが 1 つまたは複数のオプションを選択できるかどうかを理解できるようにしてください。
+- グループまたはその選択状態をカスタマイズする際は、論理的なボタンの順序と十分な色のコントラストを維持してください。
 
 ## トラブルシューティング
 
@@ -1011,7 +1044,7 @@ API の詳細とプロジェクト サポートについては、次の {Platfor
 
 - <ApiLink pkg="core" type="ToggleButton" />
 
-## よくある質問
+## FAQ
 
 これらのよくある質問は、{Platform} ボタン グループの選択、コンテンツ、設定に関する一般的なシナリオをカバーします。
 

docs/xplat/src/content/jp/components/layouts/avatar.mdx

@@ -569,17 +569,17 @@ Ignite UI コンポーネント トークンと共にユーティリティ フ
 
 | 基準 | コンポーネントの準拠方法 |
 | -- | -- |
-| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | アバターにはアクセシブルなラベルがあり、画像アバターは `alt` を通じて特定の代替テキストを受け取ることができます。 |
-| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | コンポーネントは画像セマンティクスで初期化され、コンテンツ関連の ARIA 情報を公開します。 |
+| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | アバターにはアクセシブルなラベルがあり、画像アバターは `alt` を通じて特定の代替テキストを受け取ることができます。 |
+| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | コンポーネントは画像セマンティクスで初期化され、コンテンツ関連の ARIA 情報を公開します。 |
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
 | 基準 | コンポーネントの準拠方法 |
 | -- | -- |
-| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | アバターにはアクセシブル ラベルがあり、表現されるエンティティを識別する周囲のテキストと組み合わせることができます。 |
-| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | コンポーネントは `role="img"` とデフォルトのアクセシブル ラベルで初期化されます。 |
+| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | アバターにはアクセシブル ラベルがあり、表現されるエンティティを識別する周囲のテキストと組み合わせることができます。 |
+| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | コンポーネントは `role="img"` とデフォルトのアクセシブル ラベルで初期化されます。 |
 
 </PlatformBlock>